{% extends 'base.html' %}
{% block title %}Games and Apps{% endblock %}
{% block content %}
<header class="board-head">
  <div>
    <p class="eyebrow">STATION GAMES  & SOFTWARE</p>
    <h1>Games and Apps</h1>
    <p class="muted">Station-hosted software and games.</p>
  </div>
</header>

<nav class="subnav" aria-label="Software categories">
  {% for category in categories %}<a href="#{{ category|lower }}">{{ category|upper }}</a>{% endfor %}
</nav>

{% for category in categories %}
<section class="application-category" id="{{ category|lower }}">
  <div class="application-category-heading">
    <p class="eyebrow">CAT://{{ '%02d'|format(loop.index) }}</p>
    <h2>{{ category }}</h2>
  </div>
  <div class="application-list">
    {% for application in applications[category] %}
    <article class="application-card">
      <div class="application-copy">
        <span>{{ application.category|upper }} / V{{ application.version }}</span>
        <h3>{{ application.name }}</h3>
        <p>{{ application.description }}</p>
        <small class="application-requirements">{{ 'UNIVERSAL' if application.platforms|length == 2 else application.platforms|join(' + ')|upper }}{% if application.required_inputs %} / {{ application.required_inputs|join(' + ')|upper }} REQUIRED{% endif %} / {{ application.preferred_presentation|upper }}</small>
        <small>AUTHOR: {{ application.author }}</small>
      </div>
      <a class="button" href="{{ url_for('applications.display', slug=application.slug) }}">VIEW / LAUNCH</a>
    </article>
    {% else %}
    <div class="empty-state small"><p>NO {{ category|upper }} REGISTERED</p></div>
    {% endfor %}
  </div>
</section>
{% endfor %}
{% endblock %}