{% extends 'base.html' %}
{% block title %}Paramètres{% endblock %}
{% block content %}
<div class="max-w-2xl mx-auto px-4 py-8 space-y-6">
  <h1 class="text-2xl font-bold text-ocean-800">Paramètres</h1>

  <form method="post" action="{{ url_for('auth.settings') }}" class="card p-5 sm:p-6 space-y-4">
    <input type="hidden" name="form" value="profile"/>
    <div>
      <h2 class="font-semibold text-ocean-800">Profil</h2>
      <p class="text-xs text-gray-500">{{ current_user.email }}</p>
    </div>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
      <div>
        <label for="first_name" class="block text-sm font-medium text-gray-700 mb-1">Prénom</label>
        <input id="first_name" name="first_name" maxlength="50" autocomplete="given-name" class="input" value="{{ current_user.first_name or '' }}"/>
      </div>
      <div>
        <label for="last_name" class="block text-sm font-medium text-gray-700 mb-1">Nom</label>
        <input id="last_name" name="last_name" maxlength="50" autocomplete="family-name" class="input" value="{{ current_user.last_name or '' }}"/>
      </div>
      <div>
        <label for="certification_agency" class="block text-sm font-medium text-gray-700 mb-1">Agence</label>
        <select id="certification_agency" name="certification_agency" class="input">
          {% for a in agencies %}
          <option value="{{ a }}" {{ 'selected' if (current_user.certification_agency or 'PADI') == a }}>{{ a }}</option>
          {% endfor %}
        </select>
      </div>
      <div>
        <label for="certification_number" class="block text-sm font-medium text-gray-700 mb-1">N° PADI</label>
        <input id="certification_number" name="certification_number" maxlength="50" class="input" value="{{ current_user.certification_number or '' }}"/>
      </div>
    </div>
    <p class="text-xs text-gray-500">Votre n° PADI permet de vous reconnaître quand vous signez un dossier en tant qu'instructeur.</p>
    <button class="btn-primary">Enregistrer</button>
  </form>

  <form method="post" action="{{ url_for('auth.settings') }}" class="card p-5 sm:p-6 space-y-4">
    <input type="hidden" name="form" value="password"/>
    <h2 class="font-semibold text-ocean-800">Changer le mot de passe</h2>
    <div>
      <label for="current_password" class="block text-sm font-medium text-gray-700 mb-1">Mot de passe actuel</label>
      <input id="current_password" type="password" name="current_password" required autocomplete="current-password" class="input"/>
    </div>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
      <div>
        <label for="new_password" class="block text-sm font-medium text-gray-700 mb-1">Nouveau mot de passe</label>
        <input id="new_password" type="password" name="new_password" required minlength="8" autocomplete="new-password" class="input"/>
      </div>
      <div>
        <label for="confirm" class="block text-sm font-medium text-gray-700 mb-1">Confirmer</label>
        <input id="confirm" type="password" name="confirm" required minlength="8" autocomplete="new-password" class="input"/>
      </div>
    </div>
    <button class="btn-secondary">Changer le mot de passe</button>
  </form>
</div>
{% endblock %}