{% extends "base.html" %}
{% block title %}{{ t('Cuenta') }}{% endblock %}
{% block content %}
  <section class="header-grid">
    <article class="hero-card">
      <p class="eyebrow">{{ t('Cuenta') }}</p>
      <h2>{{ current_user.username }}</h2>
      <p>{{ t('Rol actual: {role}', role=role_label) }}</p>
      <p>{{ t('Desde aqui puedes actualizar tu contrasena. Si eres administrador, tambien puedes crear usuarios nuevos con perfil de solo lectura o de administracion.') }}</p>
    </article>

    <article class="status-card">
      <h3>{{ t('Acceso') }}</h3>
      <p class="badge badge-success">{{ role_label }}</p>
      {% if can_manage %}
        <p>{{ t('Tu usuario puede editar periodos, configuraciones y cuentas.') }}</p>
      {% else %}
        <p>{{ t('Tu usuario solo puede visualizar el tablero y el detalle de cada periodo.') }}</p>
      {% endif %}
    </article>
  </section>

  <section class="two-column-grid">
    <article class="panel">
      <div class="section-heading">
        <div>
          <p class="eyebrow">{{ t('Seguridad') }}</p>
          <h2>{{ t('Cambiar contrasena') }}</h2>
        </div>
      </div>
      <form method="post" action="{{ url_for('change_password') }}" class="stack-form">
        <label>{{ t('Contrasena actual') }}<input type="password" name="current_password" autocomplete="current-password" required></label>
        <label>{{ t('Nueva contrasena') }}<input type="password" name="new_password" autocomplete="new-password" required></label>
        <label>{{ t('Repetir nueva contrasena') }}<input type="password" name="confirm_password" autocomplete="new-password" required></label>
        <button type="submit" class="primary-button">{{ t('Actualizar contrasena') }}</button>
      </form>
    </article>

    <article class="panel">
      <div class="section-heading">
        <div>
          <p class="eyebrow">{{ t('Idioma') }}</p>
          <h2>{{ t('Idioma de la cuenta') }}</h2>
        </div>
      </div>
      <form method="post" action="{{ url_for('change_language') }}" class="stack-form">
        <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>
        <button type="submit" class="primary-button">{{ t('Guardar idioma') }}</button>
      </form>
    </article>
  </section>

  {% if can_manage %}
    <section class="panel">
      <div class="section-heading">
        <div>
          <p class="eyebrow">{{ t('Usuarios') }}</p>
          <h2>{{ t('Crear usuario') }}</h2>
        </div>
      </div>
      <form method="post" action="{{ url_for('save_user') }}" class="stack-form">
        <label>{{ t('Usuario') }}<input type="text" name="username" autocomplete="username" required></label>
        <label>
          {{ t('Rol') }}
          <select name="role">
            <option value="viewer">{{ t('Visualizador') }}</option>
            <option value="admin">{{ t('Administrador') }}</option>
          </select>
        </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>
        <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>
        <button type="submit" class="primary-button">{{ t('Crear usuario') }}</button>
      </form>
    </section>

    <section class="panel">
      <div class="section-heading">
        <div>
          <p class="eyebrow">{{ t('Usuarios') }}</p>
          <h2>{{ t('Accesos configurados') }}</h2>
        </div>
      </div>
      <div class="table-shell">
        <table>
          <thead>
            <tr>
              <th>{{ t('Usuario') }}</th>
              <th>{{ t('Rol') }}</th>
              <th>{{ t('Idioma') }}</th>
              <th>{{ t('Estado') }}</th>
              <th>{{ t('Creado') }}</th>
              <th>{{ t('Accion') }}</th>
            </tr>
          </thead>
          <tbody>
            {% for user in users %}
              <tr>
                <td>{{ user.username }}</td>
                <td>{{ t('Administrador') if user.role == 'admin' else t('Visualizador') }}</td>
                <td>{{ 'Español' if (user.language or 'es') == 'es' else 'English' }}</td>
                <td>{{ t('Habilitado') if user.enabled else t('Deshabilitado') }}</td>
                <td>{{ user.created_at | datetime_local }}</td>
                <td>
                  {% if user.id == current_user.id %}
                    <span class="muted">{{ t('Sesion actual') }}</span>
                  {% else %}
                    <form method="post" action="{{ url_for('toggle_user_enabled', user_id=user.id) }}">
                      <input type="hidden" name="enabled" value="{{ '0' if user.enabled else '1' }}">
                      <button type="submit" class="{{ 'danger-button' if user.enabled else 'ghost-button' }}">
                        {{ t('Deshabilitar') if user.enabled else t('Habilitar') }}
                      </button>
                    </form>
                  {% endif %}
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </section>
  {% endif %}
{% endblock %}