{% 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>
    <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 %}
          <article id="{{ entry.id }}" class="panel wiki-entry" data-wiki-entry tabindex="-1" aria-labelledby="{{ entry.id }}-title">
            <p class="eyebrow">{{ entry.label }}</p>
            <h3 id="{{ entry.id }}-title">{{ entry.name }}</h3>
            <p>{{ entry.summary }}</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 %}
              <details>
                <summary>Costes, estadísticas y requisitos</summary>
                {% 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 }}">{{ requirement.name }}</a>{% else %}{{ requirement.name }}{% endif %}, nivel {{ requirement.level }}</li>
                    {% endfor %}
                  </ul></div>
                {% else %}<p>No tiene requisitos adicionales.</p>{% endif %}
              </details>
            {% endif %}
            {% if entry.calculator %}
              <section class="level-calculator" aria-labelledby="{{ entry.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 }}">
                <h4 id="{{ entry.id }}-calculator-title">Calculadora para cualquier nivel</h4>
                <p id="{{ entry.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="{{ entry.id }}-level">Nivel objetivo
                    <input id="{{ entry.id }}-level" type="number" min="1" max="100" step="1" value="1"
                           inputmode="numeric" aria-describedby="{{ entry.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 %}<p class="wiki-action"><a href="{{ url_for('game_view', section=entry.action[1], planet=planet.id) }}">{{ entry.action[0] }}</a></p>{% endif %}
          </article>
        {% endfor %}
      </div>
    </section>
    {% endfor %}
  </div>
</div>