{% extends 'base.html' %}
{% load wagtailcore_tags wagtailimages_tags seo_tags %}
{% block title %}{{ page.title }} | No Hype AI{% endblock %}
{% block head_meta %}
  {% canonical_url page as canonical %}
  {% article_og_image_url page as og_image %}
  <link rel="canonical" href="{{ canonical }}" />
  <meta name="description" content="{{ page.search_description|default:page.summary }}" />
  <meta property="og:type" content="article" />
  <meta property="og:title" content="{{ page.title }} | No Hype AI" />
  <meta property="og:description" content="{{ page.search_description|default:page.summary }}" />
  <meta property="og:url" content="{{ canonical }}" />
  {% if og_image %}<meta property="og:image" content="{{ og_image }}" />{% endif %}
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="{{ page.title }} | No Hype AI" />
  <meta name="twitter:description" content="{{ page.search_description|default:page.summary }}" />
  {% if og_image %}<meta name="twitter:image" content="{{ og_image }}" />{% endif %}
{% endblock %}
{% block content %}
<article>
  <h1>{{ page.title }}</h1>
  <p>{{ page.read_time_mins }} min read</p>
  {% if page.hero_image %}
    {% image page.hero_image fill-1200x630 %}
  {% endif %}
  {{ page.body }}
  {% article_json_ld page %}
</article>
<section aria-label="Share this article">
  <h2>Share</h2>
  <a href="https://x.com/intent/post?url={{ request.build_absolute_uri|urlencode }}&text={{ page.title|urlencode }}" target="_blank" rel="noopener noreferrer">Share on X</a>
  <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ request.build_absolute_uri|urlencode }}" target="_blank" rel="noopener noreferrer">Share on LinkedIn</a>
  <button type="button" data-copy-link data-copy-url="{{ request.build_absolute_uri }}">Copy link</button>
</section>
<section>
  <h2>Related</h2>
  {% for article in related_articles %}
  <a href="{{ article.url }}">{{ article.title }}</a>
  {% endfor %}
</section>
<aside>
  <h2>Newsletter</h2>
  {% include 'components/newsletter_form.html' with source='article' label='Never miss a post' %}
</aside>
{% if page.comments_enabled %}
<section>
  <h2>Comments</h2>
  {% for comment in approved_comments %}
    <article id="comment-{{ comment.id }}">
      <p><strong>{{ comment.author_name }}</strong></p>
      <p>{{ comment.body }}</p>
      {% for reply in comment.replies.all %}
        <article id="comment-{{ reply.id }}">
          <p><strong>{{ reply.author_name }}</strong></p>
          <p>{{ reply.body }}</p>
        </article>
      {% endfor %}
      <form method="post" action="{% url 'comment_post' %}">
        {% csrf_token %}
        <input type="hidden" name="article_id" value="{{ page.id }}" />
        <input type="hidden" name="parent_id" value="{{ comment.id }}" />
        <input type="text" name="author_name" required />
        <input type="email" name="author_email" required />
        <textarea name="body" required></textarea>
        <input type="text" name="honeypot" style="display:none" />
        <button type="submit">Reply</button>
      </form>
    </article>
  {% empty %}
    <p>No comments yet.</p>
  {% endfor %}
  {% if comment_form and comment_form.errors %}
    <div aria-label="Comment form errors">
      {{ comment_form.non_field_errors }}
      {% for field in comment_form %}
        {{ field.errors }}
      {% endfor %}
    </div>
  {% endif %}
  <form method="post" action="{% url 'comment_post' %}">
    {% csrf_token %}
    <input type="hidden" name="article_id" value="{{ page.id }}" />
    <input type="text" name="author_name" value="{% if comment_form %}{{ comment_form.author_name.value|default:'' }}{% endif %}" required />
    <input type="email" name="author_email" value="{% if comment_form %}{{ comment_form.author_email.value|default:'' }}{% endif %}" required />
    <textarea name="body" required>{% if comment_form %}{{ comment_form.body.value|default:'' }}{% endif %}</textarea>
    <input type="text" name="honeypot" style="display:none" />
    <button type="submit">Post comment</button>
  </form>
</section>
{% endif %}
{% endblock %}