{% extends "base.html" %}
{% block title %}{{ t('Primer usuario') }}{% endblock %}
{% block content %}
  <section class="auth-layout">
    <article class="hero-card">
      <p class="eyebrow">{{ t('Primer paso') }}</p>
      <h2>{{ t('Crea el usuario administrador') }}</h2>
      <p>
        {{ t('Este paso solo aparece una vez. Despues podras entrar con usuario y contrasena para configurar franjas, periodos, cargos fijos e impuestos.') }}
      </p>
    </article>

    <article class="panel">
      <h2>{{ t('Alta inicial') }}</h2>
      <form method="post" class="stack-form">
        <label>
          {{ t('Usuario') }}
          <input type="text" name="username" autocomplete="username" required>
        </label>
        <label>
          {{ t('Contrasena') }}
          <input type="password" name="password" autocomplete="new-password" required>
        </label>
        <label>
          {{ t('Repetir contrasena') }}
          <input type="password" name="password_confirm" autocomplete="new-password" required>
        </label>
        <label>
          {{ t('Idioma') }}
          <select name="language">
            {% for option in language_options %}
              <option value="{{ option.code }}" {% if option.code == current_language %}selected{% endif %}>{{ option.label }}</option>
            {% endfor %}
          </select>
        </label>
        <p class="muted">{{ t('Selecciona el idioma inicial de este usuario. Luego cada cuenta podra cambiarlo desde su perfil.') }}</p>
        <button type="submit" class="primary-button">{{ t('Crear administrador') }}</button>
      </form>
    </article>
  </section>
{% endblock %}