{% extends "base.html" %}

{% block title %}
  RideAware - {{ newsletter.subject if newsletter else 'Newsletter Detail' }}
{% endblock %}

{% block content %}
  <div class="article-wrap">
    <aside class="article-aside">
      <a href="/newsletters" class="back-link">
        <i class="fas fa-arrow-left"></i>
        Back to Newsletters
      </a>

      <div class="article-meta">
        <h2 class="article-title">{{ newsletter.subject if newsletter else 'Newsletter Title' }}</h2>
        <div class="meta-row">
          <i class="fas fa-calendar-alt"></i>
          <span>{{ newsletter.sent_at if newsletter else 'Published Date' }}</span>
        </div>
        {% if newsletter and newsletter.get('reading_time') %}
        <div class="meta-row">
          <i class="fas fa-clock"></i>
          <span>{{ newsletter.reading_time }} min read</span>
        </div>
        {% endif %}
        {% if newsletter and newsletter.get('author') %}
        <div class="meta-row">
          <i class="fas fa-user"></i>
          <span>{{ newsletter.author }}</span>
        </div>
        {% endif %}

        {% if newsletter and newsletter.get('tags') %}
        <div class="article-tags">
          {% for tag in newsletter.tags %}
          <span class="tag">{{ tag }}</span>
          {% endfor %}
        </div>
        {% endif %}
      </div>

      <nav class="toc">
        <div class="toc-title">On this page</div>
        <ol id="toc-list"></ol>
      </nav>
    </aside>

    <main class="article-main">
      <header class="article-hero">
        <div class="newsletter-icon"><i class="fas fa-envelope-open-text"></i></div>
        <h1>{{ newsletter.subject if newsletter else 'Newsletter Title' }}</h1>
      </header>

      <article class="newsletter-content" id="article">
        {% if newsletter %}
          {{ newsletter.body | safe }}
        {% else %}
          <h2>Welcome to RideAware Newsletter</h2>
          <p>Sample content…</p>
        {% endif %}
      </article>

      <div class="newsletter-actions">
        <a href="/newsletters" class="action-btn primary">
          <i class="fas fa-list"></i>
          View All Newsletters
        </a>
        <button onclick="window.print()" class="action-btn secondary">
          <i class="fas fa-print"></i>
          Print
        </button>
        <button onclick="shareNewsletter()" class="action-btn secondary">
          <i class="fas fa-share-alt"></i>
          Share
        </button>
      </div>
    </main>
  </div>
{% endblock %}

{% block extra_scripts %}
<script>
  function shareNewsletter() {
    if (navigator.share) {
      navigator.share({ title: document.title, url: location.href }).catch(() => {});
    } else {
      navigator.clipboard.writeText(location.href);
      alert('Link copied to clipboard!');
    }
  }

  // Build TOC from h2/h3 inside the article
  (function buildTOC() {
    const article = document.getElementById('article');
    if (!article) return;
    const headings = article.querySelectorAll('h2, h3');
    const list = document.getElementById('toc-list');
    if (!headings.length || !list) return;

    headings.forEach((h, idx) => {
      const id = h.id || `h-${idx}`;
      h.id = id;
      const li = document.createElement('li');
      li.className = h.tagName === 'H2' ? 'toc-h2' : 'toc-h3';
      const a = document.createElement('a');
      a.href = `#${id}`;
      a.textContent = h.textContent;
      li.appendChild(a);
      list.appendChild(li);
    });
  })();
</script>
{% endblock %}