{% extends "base.html" %}
{% load wagtailcore_tags wagtailimages_tags static %}

{% block extra_css %}
  <link rel="stylesheet" type="text/css" href="{% static 'css/article_page.css' %}">
{% endblock %}

{% block content %}
  <article class="article-page">
    {% if breadcrumbs %}
      <nav class="article-breadcrumbs" aria-label="breadcrumb">
        <ol>
          <li>
            {% if breadcrumb_root %}
              <a href="{{ breadcrumb_root.url }}">首頁</a>
            {% else %}
              <a href="/">首頁</a>
            {% endif %}
          </li>
          {% for crumb in breadcrumbs %}
            {% if not breadcrumb_root or crumb.id != breadcrumb_root.id %}
              {% if crumb.id != page.id %}
                <li>
                  <a href="{{ crumb.url }}">{{ crumb.title }}</a>
                </li>
              {% endif %}
            {% endif %}
          {% endfor %}
        </ol>
      </nav>
    {% endif %}
    <div class="article-category">
      <div class="block-title category-title"><span>{% if article_category %}{{ article_category.title }}{% endif %}</span></div>
    </div>
    <div class="article-content">
      {% if page.cover_image %}
        {% image page.cover_image original as cover %}
        <img src="{{ cover.url }}" alt="{{ page.title }}">
      {% endif %}
      <h1>{{ page.title }}</h1>
      <p class="date">{{ page.date|date:"Y/m/d" }}</p>
      <div class="intro">{{ page.intro }}</div>
      <div class="body">
        {{ page.body }}
      </div>
    </div>
    {% with share_url=request.build_absolute_uri|urlencode share_text=page.title|urlencode %}
      <div class="article-share" aria-label="分享文章">
        <a href="https://www.facebook.com/sharer/sharer.php?u={{ share_url }}" target="_blank" rel="noopener noreferrer" aria-label="分享到 Facebook">
          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33.18 33.18" role="img">
            <path d="M16.59 0C7.43 0 0 7.43 0 16.59C0 25.75 7.43 33.18 16.59 33.18C25.75 33.18 33.18 25.75 33.18 16.59C33.18 7.43 25.75 0 16.59 0ZM23.12 8.37H21.18C19.27 8.37 18.67 9.56 18.67 10.78V13.67H22.94L22.26 18.12H18.67V28.89H13.85V18.12H9.94V13.67H13.85V10.28C13.85 6.42 16.15 4.29 19.67 4.29C21.36 4.29 23.12 4.59 23.12 4.59V8.38V8.37Z" fill="var(--fill-0, #0E1B42)"/>
          </svg>
        </a>
        <a href="https://x.com/intent/tweet?url={{ share_url }}&text={{ share_text }}" target="_blank" rel="noopener noreferrer" aria-label="分享到 X">
          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33.18 33.18" role="img">
            <path d="M16.59 0C7.43 0 0 7.43 0 16.59C0 25.75 7.43 33.18 16.59 33.18C25.75 33.18 33.18 25.75 33.18 16.59C33.18 7.43 25.75 0 16.59 0Z" fill="var(--fill-0, #0E1B42)"/>
            <path class="icon-cutout" d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z" transform="translate(7.59 7.59) scale(1.125)"/>
          </svg>
        </a>
        <a href="https://www.threads.net/intent/post?text={{ share_text }}%20{{ share_url }}" target="_blank" rel="noopener noreferrer" aria-label="分享到 Threads">
          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33.18 33.18" role="img">
            <path d="M16.59 0C7.43 0 0 7.43 0 16.59C0 25.75 7.43 33.18 16.59 33.18C25.75 33.18 33.18 25.75 33.18 16.59C33.18 7.43 25.75 0 16.59 0Z" fill="var(--fill-0, #0E1B42)"/>
            <path class="icon-cutout" d="M6.321 6.016c-.27-.18-1.166-.802-1.166-.802.756-1.081 1.753-1.502 3.132-1.502.975 0 1.803.327 2.394.948s.928 1.509 1.005 2.644q.492.207.905.484c1.109.745 1.719 1.86 1.719 3.137 0 2.716-2.226 5.075-6.256 5.075C4.594 16 1 13.987 1 7.994 1 2.034 4.482 0 8.044 0 9.69 0 13.55.243 15 5.036l-1.36.353C12.516 1.974 10.163 1.43 8.006 1.43c-3.565 0-5.582 2.171-5.582 6.79 0 4.143 2.254 6.343 5.63 6.343 2.777 0 4.847-1.443 4.847-3.556 0-1.438-1.208-2.127-1.27-2.127-.236 1.234-.868 3.31-3.644 3.31-1.618 0-3.013-1.118-3.013-2.582 0-2.09 1.984-2.847 3.55-2.847.586 0 1.294.04 1.663.114 0-.637-.54-1.728-1.9-1.728-1.25 0-1.566.405-1.967.868ZM8.716 8.19c-2.04 0-2.304.87-2.304 1.416 0 .878 1.043 1.168 1.6 1.168 1.02 0 2.067-.282 2.232-2.423a6.2 6.2 0 0 0-1.528-.161" transform="translate(7.59 7.59) scale(1.125)"/>
          </svg>
        </a>
      </div>
    {% endwith %}
    {% with tags=page.tags.all %}
      {% if tags %}
        <div class="article-tags">
          <ul class="tag-chips">
            {% for tag in tags %}
              <li><a href="{% url 'hashtag_search' tag.slug %}">{{ tag }}</a></li>
            {% endfor %}
          </ul>
        </div>
      {% endif %}
    {% endwith %}
    {% if related_articles %}
    <hr/>
      <section class="related-articles">
        <h2>相關文章</h2>
        <div class="related-articles-list">
          {% for related in related_articles %}
            <article class="related-article-item">
              <div class="related-article-left">
                <a class="related-article-image" href="{{ related.url }}">
                  {% if related.cover_image %}
                    {% image related.cover_image max-194x133 as related_cover %}
                    <img src="{{ related_cover.url }}" alt="{{ related.title }}">
                  {% else %}
                    <img src="{% static 'img/default_cover.jpg' %}" alt="{{ related.title }}">
                  {% endif %}
                </a>
                <p class="related-article-date">{{ related.date|date:"Y/m/d" }}</p>
              </div>
              <div class="related-article-right">
                <h3 class="related-article-title"><a href="{{ related.url }}">{{ related.title }}</a></h3>
                {% with related_tags=related.tags.all %}
                  {% if related_tags %}
                    <ul class="related-article-tags tag-chips">
                      {% for tag in related_tags %}
                        <li><a href="{% url 'hashtag_search' tag.slug %}">{{ tag }}</a></li>
                      {% endfor %}
                    </ul>
                  {% endif %}
                {% endwith %}
              </div>
            </article>
            <hr/>
          {% endfor %}
        </div>
      </section>
    {% endif %}
  </article>
  <button class="back-to-top" type="button" aria-label="回到頁首">
    <span class="back-to-top__icon" aria-hidden="true"></span>
    <span class="back-to-top__label">TOP</span>
  </button>
{% endblock %}

{% block extra_js %}
  {{ block.super }}
  <script type="text/javascript" src="{% static 'js/article_page.js' %}"></script>
{% endblock %}