{% extends "layout.html" %}
{% block content %}
<div class="row g-3">
  <div class="col-lg-4">
    <div class="card shadow-sm">
      <div class="card-body">
        <div class="text-muted small">Total messages</div>
        <div class="display-6">{{total}}</div>
        <a class="btn btn-primary mt-2" href="/search">Search</a>
      </div>
    </div>

    <div class="card shadow-sm mt-3">
      <div class="card-body">
        <h2 class="h6">Tags</h2>
        <form method="post" action="/tag" class="d-flex gap-2">
          <input class="form-control" name="name" placeholder="New tag name" required>
          <button class="btn btn-outline-primary">Add</button>
        </form>
        <div class="mt-3 d-flex flex-wrap gap-2">
          {% for t in tags %}
            <span class="badge text-bg-secondary">{{t["name"]}}</span>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>

  <div class="col-lg-8">
    <div class="card shadow-sm mb-3">
      <div class="card-body">
        <h2 class="h6">Recent searches</h2>
        <div class="list-group">
          {% for s in recent_searches %}
            <div class="list-group-item d-flex justify-content-between">
              <div>
                <span class="badge text-bg-dark">{{s["mode"]}}</span>
                <span class="ms-2">{{s["query"]}}</span>
              </div>
              <a class="btn btn-sm btn-outline-secondary"
                 href="/export.csv?mode={{s['mode']}}&query={{s['query']}}">Export CSV</a>
            </div>
          {% endfor %}
        </div>
      </div>
    </div>

    <div class="card shadow-sm">
      <div class="card-body">
        <h2 class="h6">Bookmarks</h2>
        {% for b in bookmarks %}
          <div class="border rounded p-2 mb-2">
            <div class="small text-muted">#{{b["message_id"]}} · {{b["address"]}} · {{b["date_ms"]}}</div>
            <div class="mt-1">{{b["body"]}}</div>
            {% if b["note"] %}
              <div class="mt-1 small"><strong>Note:</strong> {{b["note"]}}</div>
            {% endif %}
          </div>
        {% endfor %}
      </div>
    </div>
  </div>
</div>
{% endblock %}