{% extends "base.html" %}
{% block title %}{{ feed.name }} — RSS{% endblock %}
{% block content %}
<style>
.rss-item-card { transition: box-shadow .12s; }
.rss-item-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,.15); }
.rss-thumb { width: 90px; height: 70px; object-fit: cover;
             border-radius: .375rem; flex-shrink: 0; }
.rss-title-link { text-decoration: none; color: inherit; }
.rss-title-link:hover { text-decoration: underline; }
.rss-summary { display: -webkit-box; -webkit-line-clamp: 2;
               -webkit-box-orient: vertical; overflow: hidden; }
</style>

<div class="bbs-header">
  <h1><i class="bi bi-rss-fill"></i> {{ feed.name }}</h1>
  {% if feed.description %}<p class="mb-1">{{ feed.description }}</p>{% endif %}
  <p class="small text-muted mb-0">
    {% if feed.site_url %}
      <a href="{{ feed.site_url }}" target="_blank" rel="noopener">
        <i class="bi bi-box-arrow-up-right"></i> {{ feed.site_url }}
      </a>
    {% else %}
      <code>{{ feed.url }}</code>
    {% endif %}
  </p>
</div>

<div class="d-flex flex-wrap gap-2 mb-4">
  <a href="{{ url_for('rss.index') }}" class="btn btn-secondary">
    <i class="bi bi-arrow-left"></i> All Feeds
  </a>
  <a href="{{ url_for('rss.river') }}" class="btn btn-outline-secondary">
    <i class="bi bi-water"></i> River
  </a>
  <form method="post" action="{{ url_for('rss.mark_feed_read', feed_id=feed.id) }}" class="d-inline">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <button class="btn btn-outline-secondary">
      <i class="bi bi-check2-all"></i> Mark all read
    </button>
  </form>
</div>

{% if pagination.items %}
<div class="d-flex flex-column gap-2">
  {% for item in pagination.items %}
  {% set is_unread = item.id not in read_ids %}
  <div class="card rss-item-card {{ 'border-primary border-opacity-50' if is_unread else '' }}">
    <div class="card-body py-2 px-3">
      <div class="d-flex gap-3 align-items-start">
        {% if item.image_url %}
        <a href="{{ url_for('rss.view_item', item_id=item.id) }}" class="flex-shrink-0">
          <img src="{{ item.image_url }}" class="rss-thumb"
               alt="" loading="lazy" onerror="this.style.display='none'">
        </a>
        {% endif %}
        <div class="flex-grow-1 min-width-0">
          <div class="d-flex justify-content-between align-items-start gap-2 mb-1">
            <h6 class="mb-0 {{ 'fw-bold' if is_unread else 'text-muted' }}">
              {% if is_unread %}
              <span class="badge bg-primary me-1" style="font-size:.6rem">NEW</span>
              {% endif %}
              <a href="{{ url_for('rss.view_item', item_id=item.id) }}"
                 class="rss-title-link">{{ item.title or '(no title)' }}</a>
            </h6>
            <small class="text-muted text-nowrap flex-shrink-0">
              {% if item.published_at %}{{ item.published_at.strftime('%m-%d %H:%M') }}{% else %}—{% endif %}
            </small>
          </div>
          {% if item.summary %}
          <p class="small text-muted mb-1 rss-summary">{{ item.summary[:300] }}</p>
          {% endif %}
          <div class="d-flex gap-2 align-items-center">
            <a href="{{ url_for('rss.view_item', item_id=item.id) }}"
               class="btn btn-sm btn-outline-primary py-0 px-2" style="font-size:.75rem">
              Read
            </a>
            {% if item.link %}
            <a href="{{ item.link }}" target="_blank" rel="noopener"
               class="btn btn-sm btn-outline-secondary py-0 px-2" style="font-size:.75rem">
              <i class="bi bi-box-arrow-up-right"></i> Original
            </a>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  </div>
  {% endfor %}
</div>

{% if pagination.pages > 1 %}
<nav class="mt-4">
  <ul class="pagination justify-content-center flex-wrap gap-1">
    {% if pagination.has_prev %}
    <li class="page-item">
      <a class="page-link" href="{{ url_for('rss.view_feed', feed_id=feed.id, page=pagination.prev_num) }}">
        <i class="bi bi-chevron-left"></i> Prev
      </a>
    </li>
    {% endif %}
    {% for p in pagination.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
      {% if p %}
      <li class="page-item {{ 'active' if p == pagination.page else '' }}">
        <a class="page-link" href="{{ url_for('rss.view_feed', feed_id=feed.id, page=p) }}">{{ p }}</a>
      </li>
      {% else %}
      <li class="page-item disabled"><span class="page-link">…</span></li>
      {% endif %}
    {% endfor %}
    {% if pagination.has_next %}
    <li class="page-item">
      <a class="page-link" href="{{ url_for('rss.view_feed', feed_id=feed.id, page=pagination.next_num) }}">
        Next <i class="bi bi-chevron-right"></i>
      </a>
    </li>
    {% endif %}
  </ul>
</nav>
{% endif %}

{% else %}
<div class="alert alert-info">
  <i class="bi bi-info-circle"></i> No items yet. The poller fetches every ~30 minutes;
  if this is a fresh subscription give it a moment.
</div>
{% endif %}
{% endblock %}