<%= render "layouts/shared/htmldoc" do %>
  <div class="flex flex-col lg:flex-row h-full bg-surface">
    <div class="p-4 w-full md:w-96 shrink-0 md:h-full md:overflow-y-auto">
      <%= render "settings/settings_nav" %>
    </div>

    <main class="px-4 pt-2 md:py-4 md:px-10 grow flex h-full overflow-y-auto">
      <div class="relative max-w-4xl mx-auto flex flex-col w-full h-full">
        <div class="grow space-y-4 overflow-y-auto -mx-1 px-1 pb-12">
          <% if content_for?(:breadcrumbs) %>
            <%= yield :breadcrumbs %>
          <% else %>
            <%= render "layouts/shared/breadcrumbs", breadcrumbs: @breadcrumbs %>
          <% end %>

          <% if content_for?(:page_title) %>
            <h1 class="text-primary text-3xl md:text-xl font-medium">
              <%= content_for :page_title %>
            </h1>
          <% end %>

          <%= yield %>
          <%= settings_nav_footer_mobile %>
        </div>

        <div class="mt-4">
          <%= settings_nav_footer %>
        </div>
      </div>
    </main>
  </div>
<% end %>
