<div>
  <x-notifications.notify />
  <div class="min-h-screen flex items-center justify-center bg-theme-surface py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-md w-full">
      @if(isMaintenanceMode() || session('maintenance_mode_active'))
        <div class="mb-6 rounded-md bg-gray-50 border border-gray-300 p-4">
          <div class="flex">
            <div class="flex-shrink-0">
              <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
              </svg>
            </div>
            <div class="ml-3">
              <h3 class="text-sm font-medium text-gray-800">
                {{ __('Site under maintenance') }}
              </h3>
              <div class="mt-2 text-sm text-gray-600">
                <p>
                  {{ __('The site is currently undergoing maintenance, and login is temporarily unavailable. Thank you for your patience.') }}
                </p>
              </div>
            </div>
          </div>
        </div>
      @endif

      <div>
        <img class="mx-auto h-12 w-auto" src="https://tailwindui.com/img/logos/workflow-mark-on-white.svg"
          alt="Workflow">
        <h2 class="mt-6 text-center text-3xl leading-9 font-extrabold text-theme-primary">
          Sign in to your account
        </h2>
        <p class="mt-2 text-center text-sm leading-5 text-theme-primary">
          Or
          <a href="{{route('register')}}"
            class="font-medium text-theme-primary hover:text-theme-secondary focus:outline-none focus:underline transition ease-in-out duration-150">
            Register Here
          </a>
        </p>
      </div>
      <form class="mt-8" wire:submit="login">
        <div class="rounded-md shadow-sm">
          <div>
            <input wire:model.blur="email" aria-label="Email address" name="email" type="email" required
              class="appearance-none rounded-none relative block w-full px-3 py-2 border border-theme-primary placeholder-theme-secondary text-theme-primary rounded-t-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm sm:leading-5"
              placeholder="Email address">
            @error('email')
            <p class="text-sm text-red-500 text-center">{{$message}}</p>
            @enderror
          </div>
          <div class="-mt-px">
            <input wire:model.blur="password" aria-label="Password" name="password" type="password" required
              class="appearance-none rounded-none relative block w-full px-3 py-2 border border-theme-primary placeholder-theme-secondary text-theme-primary rounded-b-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm sm:leading-5"
              placeholder="Password">
          </div>
        </div>

        <div class="mt-6">
          <button type="submit"
            class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-theme-primary hover:bg-theme-surface0 focus:outline-none focus:border-theme-primary focus:shadow-outline-gray active:bg-theme-primary transition duration-150 ease-in-out">
            <span class="absolute left-0 inset-y-0 flex items-center pl-3">
              <svg class="h-5 w-5 text-theme-secondary group-hover:text-theme-light transition ease-in-out duration-150"
                fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd"
                  d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
                  clip-rule="evenodd" />
              </svg>
            </span>
            Sign in
          </button>
        </div>
      </form>
    </div>
  </div>
</div>