{% from "components/_tabs.html" import tabs_intro %}
<header class="page-heading split-heading">
  <div>
    <p class="eyebrow">ARCHIVO DE CONOCIMIENTO</p>
    <h1>Enciclopedia imperial</h1>
    <p>Consulta qué hace cada sistema, qué proporciona, cuánto cuesta, qué exige y cuándo resulta útil.</p>
  </div>
  <a class="button" href="#wiki-search">Buscar en la enciclopedia</a>
</header>

<section class="metric-grid metric-grid-four" aria-label="Contenido de la enciclopedia">
  <article><span>Artículos</span><strong>{{ encyclopedia_stats.articles }}</strong><small>guías y fichas verificadas</small></article>
  <article><span>Edificios y ciencia</span><strong>{{ encyclopedia_stats.buildings + encyclopedia_stats.technologies }}</strong><small>calculables en cualquier nivel</small></article>
  <article><span>Naves</span><strong>{{ encyclopedia_stats.ships }}</strong><small>estadísticas y funciones</small></article>
  <article><span>Personalidades IA</span><strong>{{ encyclopedia_stats.ai_styles }}</strong><small>más objetivos emergentes</small></article>
</section>

<section class="panel wiki-tools" aria-labelledby="wiki-tools-title">
  <p class="eyebrow">CONSULTA RÁPIDA</p>
  <h2 id="wiki-tools-title">Buscar y filtrar</h2>
  <p id="wiki-search-help">Puedes escribir un nombre, requisito, recurso, función o concepto estratégico. La búsqueda ignora tildes.</p>
  <div class="wiki-filter-grid">
    <label for="wiki-search">Buscar en todos los artículos
      <input id="wiki-search" type="search" inputmode="search" autocomplete="off" aria-describedby="wiki-search-help wiki-results" data-wiki-search-input>
    </label>
    <label for="wiki-category-filter">Mostrar categoría
      <select id="wiki-category-filter" data-wiki-category-filter>
        <option value="">Todas las categorías</option>
        {% for category in encyclopedia %}<option value="{{ category.id }}">{{ category.title }} ({{ category.entries|length }})</option>{% endfor %}
      </select>
    </label>
    <label for="wiki-navigation-mode">Organización
      <select id="wiki-navigation-mode" data-navigation-mode-select aria-describedby="wiki-navigation-mode-help">
        <option value="classic">Modo normal: todas las categorías</option>
        <option value="tabs">Modo por pestañas: una categoría</option>
      </select>
      <small id="wiki-navigation-mode-help">En pestañas, usa Izquierda y Derecha para recorrer categorías; Intro o Espacio abre la elegida.</small>
    </label>
    <button type="button" class="button button-secondary" data-wiki-clear>Limpiar búsqueda</button>
  </div>
  <p id="wiki-results" class="wiki-results" role="status" aria-live="polite" aria-atomic="true">Mostrando {{ encyclopedia_stats.articles }} {{ 'artículo' if encyclopedia_stats.articles == 1 else 'artículos' }}.</p>

  <nav class="wiki-toc" aria-labelledby="wiki-toc-title">
    <h3 id="wiki-toc-title">Índice de la enciclopedia</h3>
    <ul>
      {% for category in encyclopedia %}
        <li><a href="#{{ category.id }}">{{ category.title }}</a> <span aria-label="{{ category.entries|length }} {{ 'artículo' if category.entries|length == 1 else 'artículos' }}">({{ category.entries|length }})</span></li>
      {% endfor %}
    </ul>
  </nav>
</section>

<div data-tab-scope="encyclopedia">
  {{ tabs_intro('encyclopedia', 'Categorías de la enciclopedia', 'Usa flecha izquierda o derecha para recorrer categorías y pulsa Intro o Espacio para abrir una. La búsqueda consulta todas las categorías.') }}
  <div class="wiki-empty panel" data-wiki-empty role="status" hidden>
    <h2>Sin coincidencias</h2>
    <p>No hay artículos que coincidan con esos filtros. Prueba un término más general o limpia la búsqueda.</p>
  </div>

  <div class="wiki-catalog" data-wiki-catalog>
    {% for category in encyclopedia %}
    <section id="{{ category.id }}" class="wiki-category" data-wiki-category="{{ category.id }}" data-tab-panel data-tab-id="{{ category.id }}" data-tab-label="{{ category.title }}" aria-labelledby="{{ category.id }}-title">
      <header class="wiki-category-heading">
        <div><p class="eyebrow">CATEGORÍA {{ loop.index }} DE {{ encyclopedia|length }}</p><h2 id="{{ category.id }}-title" tabindex="-1">{{ category.title }}</h2><p>{{ category.description }}</p></div>
        <span class="badge" data-wiki-category-count>{{ category.entries|length }} {{ 'artículo' if category.entries|length == 1 else 'artículos' }}</span>
      </header>
      <div class="wiki-entry-grid">
        {% for entry in category.entries %}
          {% set dom_id = category.id ~ '-' ~ entry.id %}
          <article id="{{ dom_id }}" class="panel wiki-entry" data-wiki-entry
                   data-wiki-canonical-id="{{ entry.id }}" aria-labelledby="{{ dom_id }}-title">
            <p class="eyebrow">{{ entry.label }}</p>
            <h3 id="{{ dom_id }}-title">{{ entry.name }}</h3>
            <p>{{ entry.summary }}</p>
            <button class="button button-secondary" type="button" data-wiki-open
                    aria-haspopup="dialog" aria-controls="{{ dom_id }}-dialog">
              Abrir ficha completa de {{ entry.name }}
            </button>
            <dialog id="{{ dom_id }}-dialog" class="wiki-entry-dialog"
                    data-wiki-dialog data-wiki-entry-id="{{ entry.id }}"
                    aria-labelledby="{{ dom_id }}-dialog-title"
                    aria-describedby="{{ dom_id }}-dialog-description">
              <div class="wiki-dialog-content" data-dialog-scroll>
                <p class="eyebrow">{{ entry.label }}</p>
                <h2 id="{{ dom_id }}-dialog-title" tabindex="-1" data-dialog-start>{{ entry.name }}</h2>
                <p id="{{ dom_id }}-dialog-description">{{ entry.summary }}</p>
                <p class="wiki-dialog-help">Estás en una ficha interactiva. Recorre sus controles con Tab. Pulsa Escape o el botón Cerrar para volver exactamente al botón que abrió esta ficha.</p>
                <dl class="wiki-core-facts">
                  <div><dt>Qué proporciona</dt><dd>{{ entry.provides }}</dd></div>
                  <div><dt>Uso estratégico</dt><dd>{{ entry.strategy }}</dd></div>
                </dl>
                {% if entry.specs or entry.requirements %}
                  <section aria-labelledby="{{ dom_id }}-properties-title">
                    <h3 id="{{ dom_id }}-properties-title">Costes, estadísticas y requisitos</h3>
                    {% if entry.specs %}
                      <dl class="wiki-specs">
                        {% for label, value in entry.specs %}<div><dt>{{ label }}</dt><dd>{{ value }}</dd></div>{% endfor %}
                      </dl>
                    {% endif %}
                    {% if entry.requirements %}
                      <div class="wiki-requirements"><h4>Requisitos</h4><ul>
                        {% for requirement in entry.requirements %}
                          <li>{% if requirement.anchor %}<a href="#{{ requirement.anchor }}" data-wiki-related data-wiki-target="{{ requirement.anchor }}">{{ requirement.name }}</a>{% else %}{{ requirement.name }}{% endif %}, nivel {{ requirement.level }}</li>
                        {% endfor %}
                      </ul></div>
                    {% else %}<p>No tiene requisitos adicionales.</p>{% endif %}
                  </section>
                {% endif %}
                {% if entry.calculator %}
                  <section class="level-calculator" aria-labelledby="{{ dom_id }}-calculator-title"
                           data-level-calculator
                           data-level-base='{{ entry.calculator.base|tojson }}'
                           data-level-factor="{{ entry.calculator.factor }}"
                           data-level-seconds="{{ entry.calculator.seconds }}"
                           data-level-projection="{{ entry.calculator.projection }}">
                    <h3 id="{{ dom_id }}-calculator-title">Calculadora para cualquier nivel</h3>
                    <p id="{{ dom_id }}-calculator-help">Indica el nivel que quieres alcanzar. Se mostrará el coste exacto de ese nivel y la inversión acumulada desde nivel 1.</p>
                    <div class="inline-form">
                      <label for="{{ dom_id }}-level">Nivel objetivo
                        <input id="{{ dom_id }}-level" type="number" min="1" max="100" step="1" value="1"
                               inputmode="numeric" aria-describedby="{{ dom_id }}-calculator-help"
                               data-level-input>
                      </label>
                      <button class="button button-secondary" type="button" data-level-calculate>Calcular nivel</button>
                    </div>
                    <p class="level-calculator-result" role="status" aria-live="polite" aria-atomic="true" data-level-result></p>
                  </section>
                {% endif %}
                {% if entry.action and not public_catalog|default(false) %}<p class="wiki-action"><a href="{{ url_for('game_view', section=entry.action[1], planet=planet.id) }}">{{ entry.action[0] }}</a></p>{% endif %}
                <form method="dialog" class="wiki-dialog-close">
                  <button class="button button-primary" type="submit" value="close">Cerrar ficha y volver</button>
                </form>
              </div>
            </dialog>
          </article>
        {% endfor %}
      </div>
    </section>
    {% endfor %}
  </div>
</div>