<div x-data="{ open: false }">
  <nav
    class="window"
    x-show="open"
    x-on:click.outside="open = false"
    x-transition.duration.200ms
    x-transition.opacity
  >
    <div class="wrapper">
      <h1>
        Retro
        <span class="font-thin">Fairie</span>
      </h1>
      <div class="links">
        <a href="/">
          <img
            src="{{ Vite::asset('resources/images/startmenu/desktop.png') }}"
            alt="desktop"
          />
          Home
        </a>

        <hr />

        @auth
          <a href="{{ route('admin') }}">
            <img
              src="{{ Vite::asset('resources/images/startmenu/cpanel.png') }}"
              alt="control panel"
            />
            Admin
          </a>

          <a href="{{ route('profile.edit') }}">
            <img
              src="{{ Vite::asset('resources/images/startmenu/userskey.png') }}"
              alt="users with key"
            />
            {{ Auth::user()->name }}
          </a>

          <hr />

          <form action="{{ route('logout') }}" method="POST">
            @csrf

            <a
              href="#"
              x-on:click="
                $event.preventDefault()
                $el.closest('form').submit()
              "
            >
              <img
                src="{{ Vite::asset('resources/images/startmenu/key.png') }}"
                alt="key"
              />
              Log Out
            </a>
          </form>
        @else
          <a href="{{ route('login') }}">
            <img
              src="{{ Vite::asset('resources/images/startmenu/key.png') }}"
              alt="key"
            />
            Log In
          </a>
        @endauth
      </div>
    </div>
  </nav>
  <div
    class="window fixed bottom-0 left-0 box-border flex h-[30px] w-screen justify-between"
  >
    <button
      class="min-w-0 p-1 text-[12px] leading-0 font-bold"
      x-on:click="open = ! open"
    >
      <img
        src="{{ Vite::asset('resources/images/logo.svg') }}"
        alt="Windows Logo"
        class="relative top-[1px] w-4"
      />
      Start
    </button>

    <div
      class="status-bar-field max-w-fit px-2 leading-[20px]"
      x-data
      x-text="new Date().toLocaleTimeString(undefined, { timeStyle: 'short' })"
    ></div>
  </div>
</div>
