@props(['title' => null])

<x-layouts.base :title="$title">
  <div class="app-shell">
    <header class="topbar">
      <div class="container topbar-inner">
        <a class="brand" href="{{ route('app.dashboard') }}">
          <span class="brand-mark">
            <x-ui.icon name="dashboard"/>
          </span>
          <span>{{ config('app.name') }}</span>
        </a>

        <div class="topbar-actions">
          <form method="post" action="{{ route('logout') }}">
            @csrf
            <button
              class="btn btn-secondary btn-sm"
              type="submit"
            >
              خروج
            </button>
          </form>
        </div>
      </div>
    </header>

    <div class="desktop-shell">
      <x-navigation area="user"/>

      <main class="page">
        <div class="container">
          <x-ui.flash/>
          {{ $slot }}
        </div>
      </main>
    </div>
  </div>
</x-layouts.base>