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

{% block title %}Ingreso EpicrisisIA{% endblock %}
{% block body_class %}login-page{% endblock %}

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

{% block content %}
  <main class="login-page__layout">
    <section class="login-page__hero" aria-labelledby="login-page-title">
      <span class="login-page__eyebrow">Acceso clínico seguro</span>
      <h1 class="login-page__title" id="login-page-title">Auditoría clínica con trazabilidad operacional.</h1>
      <p class="login-page__lead">
        Ingresa a EpicrisisIA para revisar casos, consolidar soportes y operar flujos clínico-administrativos
        desde una sola consola.
      </p>
      <ul class="login-page__meta" aria-label="Capacidades de la plataforma">
        <li class="login-page__meta-item">Epicrisis y exportables auditables</li>
        <li class="login-page__meta-item">RIPS, SOAT y soportes trazables</li>
        <li class="login-page__meta-item">Operación asistida para auditoría médica</li>
      </ul>
    </section>

    <section class="ui-card login-page__panel" aria-labelledby="login-card-title">
      <div class="login-page__brand">
        <img src="/static/logo.png" alt="Logo de CIDTI" class="login-page__logo" />
        <div class="login-page__brand-copy">
          <h2 class="login-page__brand-title" id="login-card-title">Ingreso EpicrisisIA</h2>
          <p class="login-page__brand-subtitle">
            Accede con tu cuenta institucional para continuar con la operación clínica.
          </p>
        </div>
      </div>

      {% if error %}
      <div class="ui-alert ui-alert--error" id="login-error" role="alert" aria-live="polite">
        <div class="ui-alert__title">No fue posible iniciar sesión</div>
        <div class="ui-alert__body">{{ error }}</div>
      </div>
      {% endif %}

      <form class="login-form" method="post" action="/login" data-login-form>
        <input type="hidden" name="next" value="{{ next_path or '/dashboard' }}" />

        <div class="login-form__fields">
          <div class="ui-field">
            <label for="login-username">Usuario</label>
            <input
              id="login-username"
              type="text"
              name="username"
              placeholder="usuario@cidti"
              required
              autocomplete="username"
              {% if error %}aria-describedby="login-error"{% endif %}
              autofocus
            />
          </div>

          <div class="ui-field">
            <label for="login-password">Contraseña</label>
            <div class="login-form__password-wrap">
              <input
                id="login-password"
                type="password"
                name="password"
                placeholder="Ingresa tu contraseña"
                required
                autocomplete="current-password"
                data-password-input
                {% if error %}aria-describedby="login-error"{% endif %}
              />
              <button
                class="login-form__toggle"
                type="button"
                data-password-toggle
                aria-controls="login-password"
                aria-pressed="false"
              >
                Mostrar
              </button>
            </div>
          </div>
        </div>

        <div class="login-form__actions">
          <button class="ui-button login-form__submit" type="submit" data-submit-button>
            <span class="login-form__submit-label">Iniciar sesión</span>
            <span class="login-form__submit-status">Iniciando sesión...</span>
          </button>
          <p class="login-form__hint">
            Usa tus credenciales institucionales. El acceso mantiene el destino seguro mediante `next`.
          </p>
        </div>
      </form>
    </section>
  </main>
{% endblock %}

{% block scripts %}
  <script src="/static/js/login.js"></script>
{% endblock %}
