<!doctype html>
{% extends "index.html" %}

{% block title %}Mi perfil · EpicrisisIA{% endblock %}
{% block body_class %}app-page app-page--profile{% endblock %}
{% block shell_class %}app-page__shell{% endblock %}

{% block head_extra %}
  <link rel="stylesheet" href="/static/css/app-pages.css" />
{% endblock %}

{% block header_actions %}
  {% set back_href = "/dashboard" %}
  {% set back_label = "Volver al dashboard" %}
  {% include "includes/auth_header_actions.html" %}
{% endblock %}

{% block content %}
  <div class="app-page__content">
    <div class="app-page__stack">
      <section class="ui-card app-page__hero">
        <div class="app-page__hero-grid">
          <div>
            <p class="app-page__eyebrow">Cuenta activa</p>
            <h1>{{ user.username }}</h1>
            <p>Gestiona las credenciales del usuario autenticado y mantén el acceso operativo protegido.</p>
          </div>
          <div class="app-page__stats">
            <article class="app-page__stat">
              <span>Rol</span>
              <strong>{{ "Administrador" if user.role == "admin" else "Auditor" }}</strong>
            </article>
            <article class="app-page__stat">
              <span>Estado</span>
              <strong>Activo</strong>
            </article>
          </div>
        </div>
      </section>

      <div class="app-page__split">
        <section class="ui-card app-page__section">
          <div class="app-page__section-head">
            <div>
              <p class="app-page__eyebrow">Seguridad</p>
              <h2>Cambiar contraseña</h2>
            </div>
          </div>

          {% if error %}
            <div class="ui-alert ui-alert--error">
              <div class="ui-alert__title">No se pudo actualizar la contraseña</div>
              <div class="ui-alert__body">{{ error }}</div>
            </div>
          {% endif %}
          {% if success %}
            <div class="ui-alert ui-alert--success">
              <div class="ui-alert__title">Contraseña actualizada</div>
              <div class="ui-alert__body">{{ success }}</div>
            </div>
          {% endif %}

          <form method="post" action="/perfil/cambiar-password" class="app-page__form">
            <label class="ui-field">
              <span>Contraseña actual</span>
              <input
                type="password"
                id="current_password"
                name="current_password"
                placeholder="Ingresa tu contraseña actual"
                required
              />
            </label>
            <label class="ui-field">
              <span>Nueva contraseña</span>
              <input
                type="password"
                id="new_password"
                name="new_password"
                placeholder="Mínimo 6 caracteres"
                required
              />
            </label>
            <label class="ui-field">
              <span>Confirmar nueva contraseña</span>
              <input
                type="password"
                id="confirm_password"
                name="confirm_password"
                placeholder="Repite la contraseña"
                required
              />
            </label>
            <div class="app-page__actions">
              <button type="submit" class="ui-button">Guardar cambio</button>
            </div>
          </form>
        </section>

        <aside class="ui-card app-page__section">
          <div class="app-page__section-head">
            <div>
              <p class="app-page__eyebrow">Recomendaciones</p>
              <h2>Buenas prácticas</h2>
            </div>
          </div>
          <div class="app-page__card-list">
            <article class="app-page__card">
              <h3>Evita reutilizar claves</h3>
              <p>Usa una contraseña exclusiva para este sistema, especialmente si administras información clínica.</p>
            </article>
            <article class="app-page__card">
              <h3>Actualiza ante rotación</h3>
              <p>Cambia la contraseña cuando el acceso pase a otro auditor o cierre una sesión compartida.</p>
            </article>
          </div>
        </aside>
      </div>
    </div>
  </div>
{% endblock %}

{% block scripts %}
{% endblock %}
