{% extends "base.html" %}

{% block title %}Mentions{% endblock %}

{% block content %}
<div class="page-header">
  <h1>Mentions</h1>
  <p>Track when monitored accounts are mentioned by other users.</p>
</div>

{# ── Filter Bar ──────────────────────────────────────────────────── #}
<form class="filter-bar" method="get" action="/mentions">
  <select name="account">
    <option value="">All Accounts</option>
    {% for acct in accounts %}
    <option value="{{ acct.did }}" {% if mentioned_did == acct.did %}selected{% endif %}>
      @{{ acct.handle }}
    </option>
    {% endfor %}
  </select>

  <input type="text" name="search" placeholder="Search text..." value="{{ search }}" style="min-width: 200px;">

  <button type="submit" class="btn btn-primary">Apply</button>
</form>

<div class="result-count">{{ total | format_number }} mentions found</div>

{# ── Mentions Table ──────────────────────────────────────────────── #}
<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th>Mentioned Account</th>
        <th>Mentioning User</th>
        <th>Text</th>
        <th>Created</th>
      </tr>
    </thead>
    <tbody>
      {% for mention in mentions %}
      <tr>
        <td>
          {% if mention.mentioned_handle %}
          <a href="https://bsky.app/profile/{{ mention.mentioned_handle }}" target="_blank" rel="noopener">
            @{{ mention.mentioned_handle }}
          </a>
          {% else %}
          <span class="text-muted mono">{{ mention.mentioned_did[:25] }}...</span>
          {% endif %}
        </td>
        <td>
          <span class="text-muted mono" title="{{ mention.mentioning_did }}">
            {{ mention.mentioning_did[:30] }}...
          </span>
        </td>
        <td class="text-preview">
          {% if mention.post_uri %}
          <a href="/statuses/{{ encode_uri(mention.post_uri) }}">
            {{ mention.post_text | truncate_text(200) }}
          </a>
          {% else %}
          {{ mention.post_text | truncate_text(200) }}
          {% endif %}
        </td>
        <td title="{{ mention.post_created_at | format_dt }}">
          {{ mention.post_created_at | time_ago }}
        </td>
      </tr>
      {% else %}
      <tr>
        <td colspan="4" class="table-empty">No mentions found.</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

{# ── Pagination ──────────────────────────────────────────────────── #}
{% if total_pages > 1 %}
<div class="pagination">
  {% if page > 1 %}
    <a href="?account={{ mentioned_did }}&search={{ search }}&page={{ page - 1 }}">Prev</a>
  {% else %}
    <span class="disabled">Prev</span>
  {% endif %}

  {% set start_page = [1, page - 3] | max %}
  {% set end_page = [total_pages, page + 3] | min %}

  {% if start_page > 1 %}
    <a href="?account={{ mentioned_did }}&search={{ search }}&page=1">1</a>
    {% if start_page > 2 %}<span class="ellipsis">...</span>{% endif %}
  {% endif %}

  {% for p in range(start_page, end_page + 1) %}
    {% if p == page %}
      <span class="active">{{ p }}</span>
    {% else %}
      <a href="?account={{ mentioned_did }}&search={{ search }}&page={{ p }}">{{ p }}</a>
    {% endif %}
  {% endfor %}

  {% if end_page < total_pages %}
    {% if end_page < total_pages - 1 %}<span class="ellipsis">...</span>{% endif %}
    <a href="?account={{ mentioned_did }}&search={{ search }}&page={{ total_pages }}">{{ total_pages }}</a>
  {% endif %}

  {% if page < total_pages %}
    <a href="?account={{ mentioned_did }}&search={{ search }}&page={{ page + 1 }}">Next</a>
  {% else %}
    <span class="disabled">Next</span>
  {% endif %}
</div>
{% endif %}
{% endblock %}