{# MaatLog post page — implements Theme API 1.0 blocks and semantic classes. #}
{%- extends "layout.html" -%}

{%- macro taxonomy_separator() -%}
<span class="maatlog-visually-hidden">, </span>
{%- endmacro -%}

{%- macro author_links(links) -%}
{%- for link in links -%}
{%- if not loop.first -%}{{ taxonomy_separator() }}{%- endif -%}
{%- if link.url -%}<a class="maatlog-taxonomy-link maatlog-post-author-link" href="{{ link.url|e }}">{{ link.label|e }}</a>
{%- else -%}<span class="maatlog-taxonomy-link maatlog-post-author-link">{{ link.label|e }}</span>{%- endif -%}
{%- endfor -%}
{%- endmacro -%}

{%- macro category_badges(links) -%}
{%- for link in links -%}
{%- if not loop.first -%}{{ taxonomy_separator() }}{%- endif -%}
{%- if link.url -%}<a class="maatlog-taxonomy-link maatlog-category-badge" href="{{ link.url|e }}">{{ link.label|e }}</a>
{%- else -%}<span class="maatlog-taxonomy-link maatlog-category-badge">{{ link.label|e }}</span>{%- endif -%}
{%- endfor -%}
{%- endmacro -%}

{%- macro tag_links(links) -%}
{%- for link in links -%}
{%- if not loop.first -%}{{ taxonomy_separator() }}{%- endif -%}
{%- if link.url -%}<a class="maatlog-taxonomy-link maatlog-tag-link" href="{{ link.url|e }}">#{{ link.label|e }}</a>
{%- else -%}<span class="maatlog-taxonomy-link maatlog-tag-link">#{{ link.label|e }}</span>{%- endif -%}
{%- endfor -%}
{%- endmacro -%}

{%- block extrahead -%}
  {{ super() }}
  {%- block maatlog_head -%}
  {%- if maatlog.post and maatlog.post.canonical_url -%}
  <link rel="canonical" href="{{ maatlog.post.canonical_url|e }}" />
  {%- endif -%}
  {%- for feed in maatlog.feeds -%}
  <link rel="alternate" type="application/atom+xml" title="{{ feed.title|e }}" href="{{ feed.url|e }}" />
  {%- endfor -%}
  {%- endblock maatlog_head -%}
{%- endblock extrahead -%}

{%- block body -%}
<article class="maatlog-post" data-maatlog-component="post">
  {#- Hero image from maattop directive. Theme API 1.9, optional. -#}
  {%- block maatlog_post_top_image -%}
  {%- if maatlog.post and maatlog.post.top_image_url -%}
  <div class="maatlog-post-top-image" data-maatlog-component="post-top-image">
    <img class="maatlog-post-top-image-img"
         src="{{ maatlog.post.top_image_url|e }}"
         alt="{{ maatlog.post.top_image_alt|e }}" />
    <div class="maatlog-post-top-image-overlay" aria-hidden="true"></div>
    <div class="maatlog-post-top-image-title">
      <span aria-hidden="true">{{ maatlog.post.title|e }}</span>
    </div>
  </div>
  {%- endif -%}
  {%- endblock maatlog_post_top_image -%}
  {%- block maatlog_post_header -%}
  <header class="maatlog-post-header">
    {#- Category sits above the title as an eyebrow. Theme API 1.4, optional. -#}
    {%- block maatlog_post_eyebrow -%}
    {%- if maatlog.post and maatlog.post.categories -%}
    <p class="maatlog-post-eyebrow">
      <span class="maatlog-post-categories">{{ category_badges(maatlog.post.taxonomies.categories) }}</span>
    </p>
    {%- endif -%}
    {%- endblock maatlog_post_eyebrow -%}

    <h1{% if maatlog.post and maatlog.post.top_image_url %} class="maatlog-visually-hidden"{% endif %}>{{ maatlog.post.title|e if maatlog.post else title|e }}</h1>

    {#- The excerpt doubles as the tagline. Theme API 1.4, optional. -#}
    {%- block maatlog_post_tagline -%}
    {%- if maatlog.post and maatlog.post.excerpt -%}
    <p class="maatlog-post-tagline">{{ maatlog.post.excerpt|e }}</p>
    {%- endif -%}
    {%- endblock maatlog_post_tagline -%}

    {#- Required block since 1.0. It moved inside the header in 1.4; the block
        name, the classes and the nesting below it are unchanged. -#}
    {%- block maatlog_post_meta -%}
    <div class="maatlog-post-meta">
      {%- if maatlog.post -%}
      {%- if maatlog.post.published_at or maatlog.post.authors -%}
      <div class="maatlog-post-info">
        {%- if maatlog.post.published_at -%}
        <time datetime="{{ maatlog.post.published_at.isoformat() }}">{{ maatlog.post.published_at|maatlog_post_date }}</time>
        {%- endif -%}
        {%- if maatlog.post.published_at and maatlog.post.authors -%}
        <span class="maatlog-post-meta-separator" aria-hidden="true">·</span>
        {%- endif -%}
        {%- if maatlog.post.authors -%}
        <span class="maatlog-post-authors">{{ author_links(maatlog.post.taxonomies.authors) }}</span>
        {%- endif -%}
      </div>
      {%- endif -%}
      {%- if maatlog.post.tags -%}
      <div class="maatlog-post-taxonomies">
        <span class="maatlog-post-tags">{{ tag_links(maatlog.post.taxonomies.tags) }}</span>
      </div>
      {%- endif -%}
      {%- if maatlog.post.external_url -%}
      <span class="maatlog-post-external-badge">External</span>
      {%- endif -%}
      {%- endif -%}
    </div>
    {%- endblock maatlog_post_meta -%}

    {%- block maatlog_post_share -%}
    {%- if maatlog.post -%}
    <div class="maatlog-share" data-maatlog-component="share">
      <button type="button" class="maatlog-share-button">{{ _('Share') }}</button>
      <span class="maatlog-share-status" role="status" aria-live="polite"></span>
    </div>
    {%- endif -%}
    {%- endblock maatlog_post_share -%}
    {#- Share は Web Share / Clipboard API に依存するため、単一 runtime の enhancer が
        .maatlog-js ゲートで表示する。JS 無効時は出さない。-#}

    {#- Decorative: it repeats the title. Theme API 1.4, optional. -#}
    {%- block maatlog_post_hero -%}
    {%- if maatlog.post and maatlog.post.image_url -%}
    <img class="maatlog-post-hero-image" src="{{ maatlog.post.image_url|e }}" alt="" />
    {%- endif -%}
    {%- endblock maatlog_post_hero -%}
  </header>
  {%- endblock maatlog_post_header -%}

  {%- block maatlog_post_body -%}
  <div class="maatlog-post-body">
    {%- if maatlog.post and maatlog.post.external_url -%}
    <p>
      <a class="maatlog-external-link" href="{{ maatlog.post.external_url|e }}" rel="noopener noreferrer">
        Read on external site
      </a>
    </p>
    {%- elif maatlog.post and maatlog.post.body_html -%}
    {{ maatlog.post.body_html|safe }}
    {%- else -%}
    {{ body }}
    {%- endif -%}
  </div>
  {%- endblock maatlog_post_body -%}

  {%- block maatlog_post_navigation -%}
  <nav class="maatlog-post-navigation" aria-label="Post navigation">
    {%- if maatlog.navigation.older_post -%}
    <a class="maatlog-nav-older" href="{{ maatlog.navigation.older_post.page_url|e }}">
      ← {{ maatlog.navigation.older_post.title|e }}
    </a>
    {%- endif -%}
    {%- if maatlog.navigation.newer_post -%}
    <a class="maatlog-nav-newer" href="{{ maatlog.navigation.newer_post.page_url|e }}">
      {{ maatlog.navigation.newer_post.title|e }} →
    </a>
    {%- endif -%}
  </nav>
  {%- endblock maatlog_post_navigation -%}

  {%- block maatlog_archive_header -%}{%- endblock maatlog_archive_header -%}
  {%- block maatlog_archive_items -%}{%- endblock maatlog_archive_items -%}
  {%- block maatlog_profile_header -%}{%- endblock maatlog_profile_header -%}
  {%- block maatlog_profile_body -%}{%- endblock maatlog_profile_body -%}

  {%- block maatlog_pagination -%}
  {%- include "maatlog/components/pagination.html" -%}
  {%- endblock maatlog_pagination -%}

  {#- The sidebar now lives in the layout's left column (Theme API 1.2).
      The block stays because it is a required block of the contract. -#}
  {%- block maatlog_sidebar -%}{%- endblock maatlog_sidebar -%}
</article>
{%- endblock body -%}