{% extends "base.html" %}
{% block title %}Login - SupportHub{% endblock %}
{% block public_content %}
<div class="min-h-screen bg-gradient-to-br from-brand-50 to-gray-100 dark:from-gray-900 dark:to-gray-950 flex items-center justify-center p-4">
  <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-gray-900/50 p-8 w-full max-w-sm">
    <div class="text-center mb-8">
      <img src="{{ url_for('static', filename='logo.svg') }}" alt="SupportHub" class="h-12 w-12 mx-auto">
      <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mt-2">SupportHub</h1>
      <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">PrestaShop Support Management</p>
    </div>

    {% if error %}
    <div id="login-error" class="bg-red-50 dark:bg-red-500/10 border-l-4 border-red-400 dark:border-red-500 p-3 mb-6 rounded-r" role="alert">
      <p class="text-sm text-red-700 dark:text-red-300">{{ error }}</p>
    </div>
    {% endif %}

    <form id="login-form" method="post" action="{{ url_for('login') }}" class="space-y-5">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <div>
        <label for="username" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Username</label>
        <input type="text" id="username" name="username" required autofocus
               class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none transition-shadow">
      </div>
      <div>
        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label>
        <input type="password" id="password" name="password" required
               class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none transition-shadow">
      </div>
      <button type="submit" id="login-submit"
              class="w-full bg-brand-600 text-white py-2.5 px-4 rounded-lg text-sm font-semibold hover:bg-brand-700 focus:ring-2 focus:ring-offset-2 focus:ring-brand-500 transition-colors">
        Sign In
      </button>
    </form>
  </div>
</div>
{% endblock %}