<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="Docs" path={~p"/docs"} />
      <UI.button
        id="docs-sidebar-collapse-toggle"
        class="sidebar-toggle sidebar-toggle--collapse"
        variant={:ghost}
        size={:sm}
        data-docs-sidebar-toggle
        aria-label="Collapse documentation sidebar"
        aria-controls="docs-sidebar"
        aria-expanded="true"
        title="Collapse documentation sidebar"
      >
        <UI.icon name="sidebar-left" />
      </UI.button>
    </div>

    <nav class="docs-sidebar__nav" aria-label="Documentation">
      <Layouts.sidebar_section
        :for={section <- OpenAgentsWeb.DocsCatalog.sections()}
        title={section.title}
        state={assigns[:sidebar_sections] || %{}}
        open={Enum.any?(section.items, &(&1.slug == @active_page))}
      >
        <Layouts.sidebar_link
          :for={item <- section.items}
          path={~p"/docs/#{item.slug}"}
          label={item.title}
          icon={item.icon}
          selected={@active_page == item.slug}
          patchable={true}
        />
      </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 documentation sidebar"
    aria-hidden="true"
    tabindex="-1"
  ></button>

  <div class="docs-column">
    <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 documentation sidebar"
        aria-controls="docs-sidebar"
        aria-expanded="true"
        title="Open documentation sidebar"
      >
        <UI.icon name="sidebar-open-left" />
      </UI.button>
      <UI.breadcrumb label="Documentation">
        <:item navigate={~p"/docs"}>Docs</:item>
        <:item :if={assigns[:section_title]}>{@section_title}</:item>
        <:item :if={assigns[:page]}>{@page.item.title}</:item>
      </UI.breadcrumb>

      <div class="docs-header__controls">
        <Layouts.theme_toggle />
        <%!-- The Markdown source, not the URL. A reader copying from a docs
        page is nearly always taking it somewhere that renders Markdown -- an
        issue, a model prompt, a note -- and a link makes them fetch and strip
        the page themselves. --%>
        <UI.copy_button
          :if={assigns[:page]}
          id="copy-docs-page"
          text={@page.markdown}
          label="Copy page"
          copied_label="Copied"
        />
      </div>
    </header>

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