{% extends "base.html" %}

{% block title %}{{ article.title }} — {{ site.title }}{% endblock %}

{% block content %}
<article>
  <header class="article-meta">
    <h1>
      {{ article.title }}
      <button class="copy-url-btn" title="Copy URL to article" aria-label="Copy URL to article">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
          <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
        </svg>
      </button>
    </h1>
    <script>
      document.querySelector('.copy-url-btn').addEventListener('click', function() {
        navigator.clipboard.writeText(window.location.href).then(() => {
          this.classList.add('copied');
          setTimeout(() => this.classList.remove('copied'), 2000);
        });
      });
    </script>
    <time datetime="{{ article.date.isoformat() }}">{{ article.date.strftime('%d %B %Y') }}</time>
    <span class="reading-time">{{ article.reading_time_minutes }} min read</span>
    {% if article.tags %}
    <div class="tags">
      {% for tag in article.tags %}
        <a href="{{ site.base_url }}/tags/{{ tag }}/" class="tag">{{ tag }}</a>
      {% endfor %}
    </div>
    {% endif %}
    {% if article.description %}
    <p class="description">{{ article.description }}</p>
    {% endif %}
  </header>

  {# body_html is pre-rendered HTML from markdown-it-py — | safe is mandatory #}
  <div class="article-body">
    {{ article.body_html | safe }}
  </div>

  <nav class="article-nav">
    <div class="article-nav-prev">
      {% if article.prev_article %}
      <a href="{{ site.base_url }}{{ article.prev_article.url_path }}">← Older: {{ article.prev_article.title }}</a>
      {% endif %}
    </div>
    <div class="article-nav-next">
      {% if article.next_article %}
      <a href="{{ site.base_url }}{{ article.next_article.url_path }}">Newer: {{ article.next_article.title }} →</a>
      {% endif %}
    </div>
  </nav>
</article>
{% if 'code-copy-btn' in article.body_html %}
<script>
  document.addEventListener('click', function(e) {
    var btn = e.target.closest('.code-copy-btn');
    if (!btn) return;
    var block = btn.closest('.code-block');
    var pre = block.querySelector('td.code pre') || block.querySelector('pre');
    navigator.clipboard.writeText(pre.textContent).then(function() {
      btn.classList.add('copied');
      setTimeout(function() { btn.classList.remove('copied'); }, 2000);
    });
  });
</script>
{% endif %}
{% endblock %}