<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{% block title %}EpicrisisIA{% endblock %}</title>
    {% block meta %}
    <meta
      name="description"
      content="{% block meta_description %}EpicrisisIA apoya la auditoría clínica, la consolidación documental y la generación trazable de epicrisis.{% endblock %}"
    />
    {% endblock %}
    <link rel="stylesheet" href="/static/css/globals.css" />
    <link rel="icon" type="image/x-icon" href="/static/logo-icon-32x32.gif" />
    {% block head_extra %}{% endblock %}
  </head>
  <body class="ui-body {% if shell_sidebar_enabled %}has-app-shell-sidebar{% endif %} {% block body_class %}{% endblock %}">
    {% block header %}
    <header class="ui-header">
      <div class="ui-container ui-header__inner">
        {% if shell_sidebar_enabled %}
          <div class="ui-header__leading">
            <button
              type="button"
              class="ui-header__shell-trigger"
              data-app-shell-toggle
              aria-expanded="false"
              aria-controls="app-shell-sidebar"
            >
              <span class="ui-sr-only">Alternar navegación lateral</span>
              <img src="/static/icons/menu-2.svg" alt="" aria-hidden="true" />
            </button>
            <a class="ui-header__brand" href="/dashboard" aria-label="Ir al dashboard de EpicrisisIA">
              <img class="ui-header__logo" src="/static/logo-white.png" alt="Logo de Cidti" />
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="8" height="8">
                <circle cx="12" cy="12" r="10" fill="currentColor" />
                <circle cx="12" cy="12" r="5" fill="#fff" />
              </svg>
              <span>EpicrisisIA</span>
            </a>
          </div>
          {% if self.shell_header_actions()|trim %}
            <div class="ui-header__center">
              {% block shell_header_actions %}{% endblock %}
            </div>
          {% endif %}
          {% set render_back_link = false %}
          {% set render_user_menu = true %}
          {% include "includes/auth_header_actions.html" %}
        {% else %}
          <a class="ui-header__brand" href="/dashboard" aria-label="Ir al dashboard de EpicrisisIA">
            <img class="ui-header__logo" src="/static/logo-white.png" alt="Logo de Cidti" />
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="8" height="8">
              <circle cx="12" cy="12" r="10" fill="currentColor" />
              <circle cx="12" cy="12" r="5" fill="#fff" />
            </svg>
            <span>EpicrisisIA</span>
          </a>
          {% block header_actions %}{% endblock %}
        {% endif %}
      </div>
    </header>
    {% endblock %}

    <main class="ui-shell {% block shell_class %}{% endblock %}">
      <div class="ui-shell__layout {% if shell_sidebar_enabled %}ui-shell__layout--with-sidebar{% endif %}">
        {% if shell_sidebar_enabled %}
          {% include "includes/app_sidebar.html" %}
        {% endif %}
        <div class="ui-shell__main">
          {% block content %}{% endblock %}
        </div>
      </div>
    </main>

    {% if shell_sidebar_enabled %}
      <button
        type="button"
        class="app-shell-sidebar__backdrop"
        data-app-shell-backdrop
        aria-label="Cerrar navegación lateral"
      ></button>
    {% endif %}

    {% if shell_sidebar_enabled %}
      {% include "includes/case_upload_dialog.html" %}
    {% endif %}

    <script src="/static/js/app-toast.js"></script>
    <script src="/static/js/auth-guard.js"></script>
    {% if shell_sidebar_enabled %}
      <script src="/static/js/case-upload-dialog.js?v={{ case_upload_asset_version }}"></script>
      <script src="/static/js/app-shell.js"></script>
      <script src="/static/js/user-menu.js"></script>
    {% endif %}
    {% block scripts %}{% endblock %}
    {% block scripts_extra %}{% endblock %}
  </body>
</html>
