{% extends "base.html" %}
{% block title %}Statistics - Illustrations DB{% endblock %}
{% block content %}
  <div class="panel">
    <h1>Statistics</h1>
    <div class="row">
      <div class="stat"><div class="small">Total entries</div><div style="font-size:28px; font-weight:700;">{{ total }}</div></div>
      <div class="stat"><div class="small">New in last 30 days</div><div style="font-size:28px; font-weight:700;">{{ last30 }}</div></div>
      <div class="stat"><div class="small">New in last 365 days</div><div style="font-size:28px; font-weight:700;">{{ last365 }}</div></div>
    </div>
    <div class="spacer"></div>
    <h2>Trend (last 12 months)</h2>
    <div class="card">
      <div class="small">Entries per month (by Date Added)</div>
      <div style="display:flex; gap:6px; align-items:flex-end; height:120px; margin-top:8px;">
        {% for label, value, height in heights %}
          <div title="{{ label }}: {{ value }}" style="width:24px; background:#dbe7ff; border:1px solid #c8d6ff; height: {{ height }}px;"></div>
        {% endfor %}
      </div>
      <div class="small" style="display:flex; gap:8px; flex-wrap:wrap; margin-top:6px;">
        {% for label, value in series %}<span>{{ label }}</span>{% endfor %}
      </div>
    </div>
    <div class="spacer"></div>
    <h2>Top Subjects</h2>
    <div class="cards">
      {% for item in top_subjects %}
      <div class="card"><div style="font-weight:600;">{{ item.name }}</div><div class="small">{{ item.count }} entries</div></div>
      {% endfor %}
    </div>
  </div>
{% endblock %}