{% extends "base.html" %}
{% block title %}Login — TieMeasureFlow{% endblock %}

{% block content %}
<div class="relative min-h-screen flex items-center justify-center overflow-hidden bg-[var(--bg-primary)] px-4 sm:px-6 lg:px-8">

  <!-- Decorative brand background -->
  <div class="pointer-events-none absolute inset-0" aria-hidden="true">
    <div class="absolute -top-32 -left-32 w-96 h-96 rounded-full bg-primary-500/10 dark:bg-primary-400/10 blur-3xl"></div>
    <div class="absolute -bottom-40 -right-24 w-[28rem] h-[28rem] rounded-full bg-primary-600/10 dark:bg-primary-500/10 blur-3xl"></div>
  </div>

  <div class="relative max-w-md w-full space-y-6">
    <!-- Card -->
    <div class="bg-[var(--bg-card)] border border-[var(--border-color)] shadow-lg rounded-2xl p-8">
      <!-- Logo -->
      <div class="text-center mb-8">
        <div class="mx-auto mb-4 inline-flex justify-center text-slate-900 dark:text-white">
          {% set logo_class = 'h-14 w-14' %}
          {% set wordmark_class = 'text-3xl' %}
          {% set logo_id = 'login' %}
          {% include 'components/_app_logo.html' %}
        </div>
        <p class="text-sm text-[var(--text-secondary)]">
          {{ _('Accedi al sistema') }}
        </p>
      </div>

      <!-- Login Form -->
      <form method="POST" action="{{ url_for('auth.login') }}" class="space-y-6">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <!-- Username -->
        <div>
          <label for="username" class="tmf-label">
            {{ _('Username') }}
          </label>
          <div class="relative">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <svg class="h-5 w-5 text-[var(--text-muted)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
              </svg>
            </div>
            <input type="text"
                   id="username"
                   name="username"
                   required
                   autofocus
                   autocomplete="username"
                   placeholder="{{ _('Username') }}"
                   class="tmf-input !pl-10 !py-2.5">
          </div>
        </div>

        <!-- Password -->
        <div x-data="{ show: false }">
          <label for="password" class="tmf-label">
            {{ _('Password') }}
          </label>
          <div class="relative">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <svg class="h-5 w-5 text-[var(--text-muted)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
              </svg>
            </div>
            <input :type="show ? 'text' : 'password'"
                   type="password"
                   id="password"
                   name="password"
                   required
                   autocomplete="current-password"
                   placeholder="{{ _('Password') }}"
                   class="tmf-input !pl-10 !pr-12 !py-2.5">
            <button type="button"
                    @click="show = !show"
                    :aria-label="show ? {{ _('Nascondi password')|tojson_attr }} : {{ _('Mostra password')|tojson_attr }}"
                    class="absolute inset-y-0 right-0 px-3 flex items-center text-[var(--text-muted)] hover:text-[var(--text-secondary)] transition-colors">
              <!-- Eye (password hidden, click to show) -->
              <svg x-show="!show" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/>
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
              </svg>
              <!-- Eye slash (password visible, click to hide) -->
              <svg x-show="show" x-cloak class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12c1.292 4.338 5.31 7.5 10.066 7.5.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"/>
              </svg>
            </button>
          </div>
        </div>

        <!-- Submit Button -->
        <div>
          <button type="submit" class="btn btn-primary btn-lg w-full shadow-sm">
            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
            </svg>
            {{ _('Accedi') }}
          </button>
        </div>
      </form>

      <!-- Help Text -->
      <div class="mt-6 text-center">
        <p class="text-xs text-[var(--text-muted)]">
          {{ _('Hai dimenticato la password?') }}
          <br>
          {{ _('Contatta l\'amministratore') }}
        </p>
      </div>
    </div>

    <!-- Footer -->
    <div class="text-center text-xs text-[var(--text-muted)]">
      <p>TieMeasureFlow &copy; {{ current_year }} - {{ _('Sistema di misurazione industriale') }}</p>
    </div>
  </div>
</div>
{% endblock %}