@extends('layouts/guest')

@section('title', 'Login Operatore')

@section('page-meta')
  <script>document.documentElement.classList.add('welcome-bacheca-page');</script>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap" rel="stylesheet" />
@endsection


@section('page-style')
  @vite(['resources/css/welcome.css'])
@endsection

@section('content')
@include('_partials.status')

  <div class="welcome-bacheca__bg" data-bg="bold" aria-hidden="true">
    <div class="welcome-bacheca__bg-stripe"></div>
    <div class="welcome-bacheca__bg-pattern"></div>
    <div class="welcome-bacheca__bg-glow welcome-bacheca__bg-glow--orange"></div>
    <div class="welcome-bacheca__bg-glow welcome-bacheca__bg-glow--purple"></div>
    <div class="welcome-bacheca__bg-glow welcome-bacheca__bg-glow--navy"></div>
  </div>

  <div
    class="container-fluid min-vh-100 d-flex align-items-center justify-content-center px-3 py-4"
    style="--fest-orange:#f58220; --fest-orange-soft:#ff9a2e; --fest-purple:#602d91; --fest-navy:#15265c; --fest-text:#1a2744; --fest-text-muted:#4a5568;"
  >
    <div class="welcome-bacheca__masthead w-100" style="max-width: 380px; margin-bottom: 0;">
      <div class="text-center mb-3">
        <img
          src="{{ asset('assets/img/logo_fest_L.png') }}"
          alt="{{ config('app.name') }}"
          class="img-fluid"
          style="max-height: 52px;"
        >
      </div>

      <div class="text-center mb-4">
        <p class="welcome-bacheca__eyebrow mb-2 justify-content-center">
          <span class="welcome-bacheca__live-dot" aria-hidden="true"></span>
          Area cassa
        </p>
        <h1 class="welcome-bacheca__title mb-1" style="font-size: clamp(1.25rem, 3.6vw, 1.55rem);">Login Operatore</h1>
        <p class="welcome-bacheca__lead mb-0" style="font-size: 0.9rem;">Accedi con le tue credenziali per usare il dispositivo.</p>
      </div>

      <form method="POST" action="{{ route('operatore.login') }}">
        @csrf
        <div class="mb-3">
          <label for="username" class="form-label fw-semibold">Username</label>
          <input
            type="text"
            class="form-control"
            id="username"
            name="username"
            value="{{ old('username') }}"
            required
            autofocus
          >
        </div>
        <div class="mb-3">
          <label for="password" class="form-label fw-semibold">Password</label>
          <input
            type="password"
            class="form-control"
            id="password"
            name="password"
            required
          >
        </div>
        <button type="submit" class="welcome-bacheca__btn welcome-bacheca__btn--primary w-100">Accedi</button>
      </form>
    </div>
  </div>
@endsection