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

{% block content %}
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 px-4 sm:px-6 lg:px-8">
  <div class="max-w-md w-full space-y-8">
    <!-- Card -->
    <div class="bg-white dark:bg-slate-800 shadow-lg rounded-xl p-8">
      <!-- Logo -->
      <div class="text-center mb-8">
        <img src="{{ url_for('static', filename='img/tmflow-logo.svg') }}"
             alt="TieMeasureFlow Logo"
             class="mx-auto h-16 w-auto mb-4"
             onerror="this.style.display='none'">
        <h2 class="text-3xl font-bold text-slate-900 dark:text-white mb-2">
          TieMeasureFlow
        </h2>
        <p class="text-sm text-slate-600 dark:text-slate-400">
          {{ _('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="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
            {{ _('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-slate-400" 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
                   placeholder="{{ _('Username') }}"
                   class="block w-full pl-10 pr-3 py-2.5 border border-slate-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-400 dark:focus:border-primary-400 bg-white dark:bg-slate-700 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-slate-500 transition-colors">
          </div>
        </div>

        <!-- Password -->
        <div>
          <label for="password" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
            {{ _('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-slate-400" 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="password"
                   id="password"
                   name="password"
                   required
                   placeholder="{{ _('Password') }}"
                   class="block w-full pl-10 pr-3 py-2.5 border border-slate-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-400 dark:focus:border-primary-400 bg-white dark:bg-slate-700 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-slate-500 transition-colors">
          </div>
        </div>

        <!-- Submit Button -->
        <div>
          <button type="submit"
                  class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-semibold text-white bg-primary-600 hover:bg-primary-700 dark:bg-primary-500 dark:hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-all duration-200">
            <svg class="h-5 w-5 mr-2" 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-slate-500 dark:text-slate-400">
          {{ _('Hai dimenticato la password?') }}
          <br>
          {{ _('Contatta l\'amministratore') }}
        </p>
      </div>
    </div>

    <!-- Footer -->
    <div class="text-center text-xs text-slate-500 dark:text-slate-400">
      <p>TieMeasureFlow &copy; 2025 - {{ _('Sistema di misurazione industriale') }}</p>
    </div>
  </div>
</div>
{% endblock %}