{% extends "base.html" %}
{% block title %}Themes · Wordsmith{% endblock %}
{% block content %}
{% set total_words = themes|map(attribute='words')|map('length')|sum %}
<section class="container">
  <div class="page-head">
    <div class="page-head__title">
      <div class="eyebrow">№ 02 · Ledger</div>
      <h1>Themes</h1>
      <div class="muted mono" style="font-size:12px; margin-top:6px;">
        {{ themes|length }} theme{{ '' if themes|length == 1 else 's' }} · {{ total_words }} word{{ '' if total_words == 1 else 's' }} on file
      </div>
    </div>
    <div>
      <a class="btn" href="/themes/new">+ New theme</a>
    </div>
  </div>
  <hr class="section-rule" />

  {% if themes %}
  <div class="panel" style="padding:0; overflow:hidden;">
    <table class="ledger">
      <thead>
        <tr>
          <th>Name</th>
          <th>Slug</th>
          <th class="col-words">Words</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for t in themes %}
        <tr>
          <td class="col-name">{{ t.name }}</td>
          <td class="col-slug">{{ t.slug }}</td>
          <td class="col-words">{{ t.words|length }}</td>
          <td class="col-actions">
            <span class="row-actions">
              <a href="/themes/{{ t.slug }}/edit">edit</a>
              <form method="post" action="/themes/{{ t.slug }}/delete"
                    onsubmit="return confirm('Delete theme {{ t.name }}?');">
                <button type="submit" class="del">delete</button>
              </form>
            </span>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <div class="panel">
    <p>No themes yet. <a href="/themes/new">Create the first one</a>.</p>
  </div>
  {% endif %}
</section>
{% endblock %}