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

{% block title %}{{ title }} · Epicrisis{% endblock %}
{% block body_class %}app-page epicrisis-page{% endblock %}
{% block shell_class %}app-page__shell epicrisis-shell{% endblock %}

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

{% block header_actions %}
  <div class="app-header-actions epicrisis-header-actions">
    <a href="{{ secondary_action_href }}" class="ui-button ui-button--secondary">{{ secondary_action_label }}</a>
  </div>
{% endblock %}

{% block content %}
  <div class="app-page__content epicrisis-content">
    <section
      class="app-page__section ui-card epicrisis-status epicrisis-status--{{ status_variant }}"
      data-epicrisis-status-view
      data-status-variant="{{ status_variant }}"
      data-case-key="{{ case_key }}"
      data-status-endpoint="/epicrisis/estado?case_key={{ case_key | urlencode }}"
      data-success-href="/epicrisis?case_key={{ case_key | urlencode }}"
    >
      <p class="app-page__eyebrow">Epicrisis operativa</p>
      <div class="epicrisis-status__heading">
        <h1>{{ title }}</h1>
        {% if case_number or case_key %}
        <p class="epicrisis-status__meta">
          {% if case_number %}<strong>Caso:</strong> {{ case_number }}{% endif %}
          {% if case_key %}<span>Case key: {{ case_key }}</span>{% endif %}
        </p>
        {% endif %}
      </div>

      <p class="epicrisis-status__message">{{ message }}</p>

      {% if detail %}
      <div
        class="ui-alert {{ 'ui-alert--error' if status_variant == 'error' else 'ui-alert--warning' }}"
        data-epicrisis-status-detail
      >
        <div class="ui-alert__title">{{ 'Detalle del error' if status_variant == 'error' else 'Estado actual' }}</div>
        <div class="ui-alert__body" data-epicrisis-status-detail-body>{{ detail }}</div>
      </div>
      {% endif %}

      {% if rule_diagnostic and rule_diagnostic.findings %}
      <section class="ui-card ui-card--subtle epicrisis-status__diagnostic" data-epicrisis-rule-diagnostic>
        <h2>Diagnóstico de validación</h2>
        {% if rule_diagnostic.missing_documents %}
        <p><strong>Falta:</strong> {{ rule_diagnostic.missing_documents | join(", ") }}</p>
        {% endif %}
        {% if rule_diagnostic.checked_documents %}
        <p><strong>Documentos detectados:</strong> {{ rule_diagnostic.checked_documents | join(", ") }}</p>
        {% endif %}
        {% if rule_diagnostic.action_hint %}
        <p><strong>Cómo corregirlo:</strong> {{ rule_diagnostic.action_hint }}</p>
        {% endif %}

        <div class="epicrisis-status__diagnostic-list">
          {% for finding in rule_diagnostic.findings %}
          <article class="epicrisis-status__diagnostic-item">
            <p><strong>Regla:</strong> {{ finding.rule_code or "Sin código" }}</p>
            {% if finding.severity %}<p><strong>Severidad:</strong> {{ finding.severity }}</p>{% endif %}
            {% if finding.message %}<p><strong>Motivo:</strong> {{ finding.message }}</p>{% endif %}
            {% if finding.checked_documents %}
            <p><strong>Documentos revisados por la regla:</strong> {{ finding.checked_documents | join(", ") }}</p>
            {% endif %}
          </article>
          {% endfor %}
        </div>
      </section>
      {% endif %}

      <div class="app-page__actions epicrisis-status__actions">
        <a
          href="{{ primary_action_href }}"
          class="ui-button {{ 'ui-button--accent' if status_variant == 'error' else '' }}"
        >
          {{ primary_action_label }}
        </a>
        <a href="{{ secondary_action_href }}" class="ui-button ui-button--ghost">{{ secondary_action_label }}</a>
      </div>
    </section>
  </div>
{% endblock %}

{% block scripts %}
  <script src="/static/js/epicrisis/status-polling.js"></script>
{% endblock %}
