{% extends "base.html" %}
{% from "_parts.html" import icon, badges, meter, scan_button %}
{% block title %}Overview{% endblock %}
{% block main %}
<div class="page-head">
  <div>
    <h1>Overview</h1>
    <p class="lede">How much of each platform's catalog is in your library.</p>
  </div>
  {{ scan_button() }}
</div>

{% if not platforms %}
<section class="empty" aria-labelledby="empty-title">
  <h2 id="empty-title">No platforms configured</h2>
  <p>Add a platform to the config file, then scan.</p>
  <pre><code>[platforms.nes]</code></pre>
  <p class="muted">See the <a href="{{ docs_url }}/setup.md">setup guide</a> for every option.</p>
</section>
{% else %}
{% if not scanned %}
<section class="empty" aria-labelledby="empty-title">
  <h2 id="empty-title">Nothing scanned yet</h2>
  <p>Download the DATs, then scan. Run these in a terminal, or press Scan once the DATs exist.</p>
  <pre><code>romledger dats update
romledger scan</code></pre>
</section>
{% endif %}
<ul class="grid">
  {% for platform in platforms %}
  <li>
    <article class="card">
      <header class="card-head">
        <h2><a href="/platforms/{{ platform.slug }}">{{ platform.name }}</a></h2>
        <p class="slug">{{ platform.slug }}</p>
      </header>
      {% if platform.counts %}
        {{ meter(platform) }}
        {{ badges(platform.counts) }}
        <p class="muted small">Scanned <time datetime="{{ platform.scanned_at }}">{{ platform.scanned_at|stamp }}</time></p>
      {% else %}
        <p class="muted">Not scanned yet. Run <code>romledger scan {{ platform.slug }}</code>.</p>
      {% endif %}
    </article>
  </li>
  {% endfor %}
</ul>
{% endif %}
{% endblock %}