{% extends "base.html" %}
{% block content %}
<section>
  <div class="actions-grid">
    <a class="action-button primary" href="/build">Build a Deck</a>
    <a class="action-button" href="/configs">Run a JSON Config</a>
  {% if show_setup %}<a class="action-button" href="/setup">Initial Setup</a>{% endif %}
    <a class="action-button" href="/owned">Owned Library</a>
    <a class="action-button" href="/decks">Finished Decks</a>
  <a class="action-button" href="/themes/">Browse Themes</a>
  {% if show_logs %}<a class="action-button" href="/logs">View Logs</a>{% endif %}
  </div>
  <div id="themes-quick" style="margin-top:1rem; font-size:.85rem; color:var(--text-muted);">
    <span id="themes-quick-status">Themes: …</span>
  </div>
</section>
<script>
(function(){
  function upd(data){
    var el = document.getElementById('themes-quick-status');
    if(!el) return;
    if(!data || !data.ok){ el.textContent='Themes: unavailable'; return; }
    var badge = '';
    if(data.phase === 'themes' || data.phase === 'themes-fast') badge=' (refreshing)';
    else if(data.stale) badge=' (stale)';
    el.textContent = 'Themes: ' + (data.theme_count != null ? data.theme_count : '?') + badge;
  }
  function poll(){
    fetch('/themes/status', { cache:'no-store' })
      .then(function(r){ return r.json(); })
      .then(upd)
      .catch(function(){});
  }
  poll();
  setInterval(poll, 7000);
})();
</script>
{% endblock %}