{% extends "base.html" %}

{% block title %}{{ page_title }}{% endblock %}

{% block content %}
<section class="page-hero compact-hero py-5">
  <div class="container">
    <span class="eyebrow">Signal archive</span>
    <h1 class="display-title small-title">Browse the full newsroom.</h1>
    <p class="hero-copy narrow-copy">Filter the stream by topic or keyword, then jump into the detail page for the full summary, source context, and related reads.</p>
    <form method="get" class="signal-search story-search mt-4">
      <div class="row g-3 align-items-end">
        <div class="col-md-7 col-lg-6">{{ filter_form.q }}</div>
        <div class="col-md-3 col-lg-3">{{ filter_form.topic }}</div>
        <div class="col-md-2 col-lg-2 d-grid"><button class="btn btn-signal btn-lg" type="submit">Filter</button></div>
      </div>
    </form>
  </div>
</section>

<section class="section-block pb-5">
  <div class="container">
    {% if selected_topic %}
    <div class="filter-summary mb-4">Showing stories for <strong>{{ selected_topic.name }}</strong>.</div>
    {% endif %}
    <div class="story-grid story-grid-wide">
      {% for story in stories %}
      <article class="story-card glass-panel tall-card">
        <div class="story-meta mb-3">
          <span>{{ story.topic.name|default:"Tech" }}</span>
          <span>{{ story.published_at|date:"M d, Y" }}</span>
        </div>
        <h2 class="h4"><a href="{{ story.get_absolute_url }}">{{ story.title }}</a></h2>
        <p>{{ story.excerpt|default:story.content|truncatechars:180 }}</p>
        <div class="story-footer mt-auto">
          <span>{% if story.source %}{{ story.source.name }}{% else %}Signal Original{% endif %}</span>
          <span>{{ story.author_name|default:"Editorial" }}</span>
        </div>
      </article>
      {% empty %}
      <div class="glass-panel p-5 text-center w-100">
        <h2 class="h4">No matches yet</h2>
        <p class="mb-3">Try a different keyword, switch topics, or publish the first original story.</p>
        <a class="btn btn-signal" href="{% url 'article_submit' %}">Open CMS</a>
      </div>
      {% endfor %}
    </div>
  </div>
</section>
{% endblock %}