<%= render "layouts/shared/htmldoc" do %>
  <div class="flex flex-col md:flex-row h-full bg-surface pt-[env(safe-area-inset-top)]">
    <div class="w-full md:w-auto md:min-w-64 shrink-0 md:h-full md:overflow-y-auto border-divider md:border-r">
      <div class="p-4">
        <%= render "settings/settings_nav" %>
      </div>
    </div>

    <main class="grow flex h-full">
      <div class="relative max-w-4xl mx-auto flex flex-col w-full h-full">
        <div class="grow flex flex-col overflow-y-auto overflow-x-hidden overscroll-contain [-webkit-overflow-scrolling:touch]">
          <div class="sticky top-0 z-10 px-3 md:px-10 pt-1.5 md:pt-3 pb-3 bg-surface border-b border-tertiary shrink-0">
            <% if content_for?(:breadcrumbs) %>
              <%= yield :breadcrumbs %>
            <% else %>
              <%= render "layouts/shared/breadcrumbs", breadcrumbs: @breadcrumbs %>
            <% end %>

            <div class="flex items-center justify-between gap-4 mt-1.5 min-h-9">
              <% if content_for?(:page_title) %>
                <h1 class="text-primary text-xl font-medium">
                  <%= content_for :page_title %>
                </h1>
              <% else %>
                <div></div>
              <% end %>
              <% if content_for?(:page_actions) %>
                <div class="flex items-center gap-2 shrink-0">
                  <%= yield :page_actions %>
                </div>
              <% end %>
            </div>
          </div>

          <div class="grow space-y-4 px-3 md:px-10 pb-20 pt-4">
            <%= yield %>
            <%= settings_nav_footer_mobile %>
            <div class="my-4">
              <%= settings_nav_footer %>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
<% end %>
