<% patchable? = @active_component != :icons %>
<div id="docs-shell" class="docs-layout" phx-hook="DocsSidebar">
  <aside id="docs-sidebar" class="docs-sidebar" aria-hidden="false">
    <div class="sidebar-app-header">
      <Layouts.sidebar_brand title="Components" path={~p"/components"} />
      <UI.button
        id="docs-sidebar-collapse-toggle"
        class="sidebar-toggle sidebar-toggle--collapse"
        variant={:ghost}
        size={:sm}
        data-docs-sidebar-toggle
        aria-label="Collapse component library sidebar"
        aria-controls="docs-sidebar"
        aria-expanded="true"
        title="Collapse component library sidebar"
      >
        <UI.icon name="sidebar-left" />
      </UI.button>
    </div>

    <nav class="docs-sidebar__nav" aria-label="Component library">
      <Layouts.sidebar_section
        :for={section <- OpenAgentsWeb.ComponentCatalog.sections()}
        title={section.title}
        state={assigns[:sidebar_sections] || %{}}
        open={Enum.any?(section.items, &(&1.slug == @active_component))}
      >
        <Layouts.sidebar_link
          :for={item <- section.items}
          path={~p"/components/#{item.slug}"}
          label={item.title}
          icon={item.icon}
          selected={@active_component == item.slug}
          patchable={patchable?}
        />
      </Layouts.sidebar_section>

      <Layouts.sidebar_section
        title="Reference"
        state={assigns[:sidebar_sections] || %{}}
        open={@active_component == :icons}
      >
        <Layouts.sidebar_link
          path={~p"/components/icons"}
          label="Icons"
          icon="book-open"
          selected={@active_component == :icons}
          patchable={false}
        />
      </Layouts.sidebar_section>
    </nav>

    <Layouts.sidebar_footer current_user={@current_scope} />
  </aside>

  <button
    id="docs-sidebar-scrim"
    type="button"
    class="docs-sidebar-scrim"
    aria-label="Close component library sidebar"
    aria-hidden="true"
    tabindex="-1"
  ></button>

  <div class="docs-column">
    <%!-- The header spans the content column, not the sidebar: the trail names
    where you are within the library, and the controls act on the page you are
    reading. Same arrangement as the docs surface it is modelled on. --%>
    <header class="docs-header">
      <UI.button
        id="docs-sidebar-expand-toggle"
        class="sidebar-toggle sidebar-toggle--expand"
        variant={:ghost}
        size={:sm}
        data-docs-sidebar-toggle
        aria-label="Open component library sidebar"
        aria-controls="docs-sidebar"
        aria-expanded="true"
        title="Open component library sidebar"
      >
        <UI.icon name="sidebar-open-left" />
      </UI.button>
      <UI.breadcrumb label="Component library">
        <:item navigate={~p"/components"}>Components</:item>
        <:item :if={assigns[:section_title]}>{@section_title}</:item>
        <:item :if={assigns[:item]}>{@item.title}</:item>
      </UI.breadcrumb>

      <div class="docs-header__controls">
        <Layouts.theme_toggle />
      </div>
    </header>

    <main class="docs-main">
      <.flash_group flash={@flash} />
      {@inner_content}
    </main>
  </div>
</div>