{% extends "base.html" %}

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

{% block content %}
<section class="page-hero compact-hero py-5">
  <div class="container">
    <div class="article-shell glass-panel">
      <div class="story-meta mb-3">
        <span>{{ article.topic.name|default:"Tech" }}</span>
        <span>{% if article.source %}{{ article.source.name }}{% else %}Signal Original{% endif %}</span>
        <span>{{ article.published_at|date:"F d, Y" }}</span>
      </div>
      <h1 class="article-title">{{ article.title }}</h1>
      <p class="article-dek">{{ article.excerpt }}</p>
      <div class="article-actions d-flex flex-wrap gap-3 mt-4">
        {% if article.external_url %}
        <a class="btn btn-signal" href="{{ article.external_url }}" target="_blank" rel="noopener">Read original source</a>
        {% endif %}
        <a class="btn btn-outline-light" href="{% url 'article_list' %}">Back to stories</a>
      </div>
    </div>
  </div>
</section>

<section class="section-block pb-5">
  <div class="container">
    <div class="row g-4">
      <div class="col-lg-8">
        <article class="glass-panel article-body">
          {% if article.article_kind == 'original' %}
          <div class="rich-copy">{{ article.content|linebreaks }}</div>
          {% else %}
          <div class="rich-copy">
            {{ article.content|linebreaks }}
            {% if article.external_url %}
            <p><strong>Source note:</strong> This item was imported from an RSS feed and lightly summarized for scanning. Use the source link above for the full article.</p>
            {% endif %}
          </div>
          {% endif %}
        </article>
      </div>
      <div class="col-lg-4">
        <aside class="editorial-sidebar d-grid gap-4">
          <div class="glass-panel sidebar-card">
            <span class="eyebrow">Story details</span>
            <ul class="detail-list mb-0">
              <li><strong>Format</strong><span>{{ article.get_article_kind_display }}</span></li>
              <li><strong>Author</strong><span>{{ article.author_name|default:"Editorial desk" }}</span></li>
              <li><strong>Topic</strong><span>{{ article.topic.name|default:"General tech" }}</span></li>
            </ul>
          </div>
          <div class="glass-panel sidebar-card">
            <span class="eyebrow">Need a custom piece?</span>
            <h3>Use the CMS to publish your own analysis.</h3>
            <a class="btn btn-outline-light w-100" href="{% url 'article_submit' %}">Start writing</a>
          </div>
          {% if related_articles %}
          <div class="glass-panel sidebar-card">
            <span class="eyebrow">Related reads</span>
            <div class="related-stack d-grid gap-3">
              {% for related in related_articles %}
              <a class="related-link" href="{{ related.get_absolute_url }}">
                <strong>{{ related.title }}</strong>
                <span>{{ related.published_at|date:"M d" }} · {{ related.topic.name|default:"Tech" }}</span>
              </a>
              {% endfor %}
            </div>
          </div>
          {% endif %}
        </aside>
      </div>
    </div>
  </div>
</section>
{% endblock %}