<header class="topbar">
  <a href="{{ url_for('game_view', section='overview') }}" class="brand" aria-label="Eclipse Imperia, ir al resumen">
    <span class="brand-mark" aria-hidden="true">EI</span>
    <span><strong>Eclipse Imperia</strong><small>{{ game.name }}</small></span>
  </a>
  <section id="resources" class="resource-bar" aria-label="Recursos actuales de {{ planet.name }}" tabindex="-1" aria-keyshortcuts="{{ shortcut_map.resources }}" data-binding-action="resources">
    <dl>
      <div><dt>Metal</dt><dd><strong id="resource-metal" data-value="{{ snap.resources.metal|int }}">{{ snap.resources.metal|number }}</strong><small>+{{ (snap.rates.metal * game.speed)|number }}/h</small></dd></div>
      <div><dt>Cristal</dt><dd><strong id="resource-crystal" data-value="{{ snap.resources.crystal|int }}">{{ snap.resources.crystal|number }}</strong><small>+{{ (snap.rates.crystal * game.speed)|number }}/h</small></dd></div>
      <div><dt>Deuterio</dt><dd><strong id="resource-deuterium" data-value="{{ snap.resources.deuterium|int }}">{{ snap.resources.deuterium|number }}</strong><small>+{{ (snap.rates.deuterium * game.speed)|number }}/h</small></dd></div>
      <div><dt>Alimento</dt><dd><strong id="resource-food" data-value="{{ snap.food|int }}">{{ snap.food|number }}</strong><small>{{ snap.population|number }} habitantes</small></dd></div>
      <div><dt>Energía</dt><dd><strong>{{ snap.rates.energy_total|number }}</strong><small>{{ (snap.rates.energy_ratio * 100)|round|int }} % rendimiento</small></dd></div>
      <div><dt>Créditos</dt><dd><strong id="resource-credits">{{ empire.credits|number }}</strong><small>mercado y rutas</small></dd></div>
      <div><dt>Recursos estratégicos</dt><dd><strong id="resource-strategic">{{ strategic_resources.values()|sum|round(1) }}</strong><small>reserva imperial</small></dd></div>
    </dl>
  </section>
  <div class="access-tools" aria-label="Accesibilidad, audio y ayuda">
    <form method="post" action="{{ url_for('language_select') }}" class="language-switcher">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <input type="hidden" name="next" value="{{ request.full_path }}">
      <label class="sr-only" for="game-language">Idioma</label>
      <select id="game-language" name="language" aria-label="Idioma" onchange="this.form.submit()">
        {% for code, language in LANGUAGES.items() %}
        <option value="{{ code }}" {% if code == current_language %}selected{% endif %}>{{ language.native_name }}</option>
        {% endfor %}
      </select>
      <noscript><button type="submit">Aplicar</button></noscript>
    </form>
    <button type="button" class="icon-button" data-action="text-size" aria-pressed="false">Texto A+</button>
    <button type="button" class="icon-button" data-action="contrast" aria-pressed="false">Alto contraste</button>
    <button type="button" class="icon-button" data-action="updates" aria-pressed="false">Pausar avisos</button>
    <button type="button" class="icon-button" data-action="music-toggle" aria-pressed="{{ 'true' if audio_preferences.music_enabled else 'false' }}">{{ 'Pausar música' if audio_preferences.music_enabled else 'Activar música' }}</button>
    <button type="button" class="icon-button" data-action="audio-settings" aria-haspopup="dialog" aria-controls="audio-dialog">Cambiar audio</button>
    <button type="button" class="icon-button" data-action="shortcut-help" aria-haspopup="dialog" aria-controls="shortcut-dialog" aria-keyshortcuts="{{ shortcut_map.shortcuts }}" data-binding-action="shortcuts">Teclas rápidas</button>
  </div>
</header>
