{% extends 'public/base.html' %}

{% block title %}{{ page.meta_title or page.title }} - {{ site_name }}{% endblock %}
{% block meta_description %}{{ page.meta_description or page.excerpt or '' }}{% endblock %}

{% block meta_tags %}
<!-- Open Graph -->
<meta property="og:type" content="{{ page.og_type or 'website' }}">
<meta property="og:url" content="{{ page.canonical_url or canonical_url() }}">
<meta property="og:title" content="{{ page.og_title or page.meta_title or page.title }}">
<meta property="og:description" content="{{ page.og_description or page.meta_description or page.excerpt or '' }}">
{%- set _og_img_obj = images_map.get(page.og_image or page.featured_image) if images_map is defined else None %}
{%- if page.og_image or page.featured_image %}
  {%- if _og_img_obj %}
    {%- set _og_meta = _og_img_obj.get_og_meta() %}
<meta property="og:image" content="{{ _og_meta[0] | absolute_url }}">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="{{ _og_meta[1] }}">
  {%- else %}
<meta property="og:image" content="{{ (page.og_image or page.featured_image) | absolute_url }}">
  {%- endif %}
{%- elif site_og_meta %}
<meta property="og:image" content="{{ site_og_meta[0] | absolute_url }}">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="{{ site_og_meta[1] }}">
{%- endif %}
<meta property="og:site_name" content="{{ site_name }}">
<meta property="og:locale" content="{{ page.language }}">

<!-- Twitter Card -->
<meta name="twitter:card" content="{{ page.twitter_card or 'summary_large_image' }}">
<meta name="twitter:title" content="{{ page.twitter_title or page.meta_title or page.title }}">
<meta name="twitter:description" content="{{ page.twitter_description or page.meta_description or page.excerpt or '' }}">
{%- if page.twitter_image %}
  {%- set _tw_img_obj = images_map.get(page.twitter_image) if images_map is defined else None %}
  {%- if _tw_img_obj %}
<meta name="twitter:image" content="{{ _tw_img_obj.get_og_meta()[0] | absolute_url }}">
  {%- else %}
<meta name="twitter:image" content="{{ page.twitter_image | absolute_url }}">
  {%- endif %}
{%- elif _og_img_obj %}
<meta name="twitter:image" content="{{ _og_img_obj.get_og_meta()[0] | absolute_url }}">
{%- elif page.featured_image %}
<meta name="twitter:image" content="{{ page.featured_image | absolute_url }}">
{%- elif settings.get('twitter_image') or settings.get('og_image') %}
<meta name="twitter:image" content="{{ (settings.get('twitter_image') or settings.get('og_image')) | absolute_url }}">
{%- endif %}

<!-- Additional SEO -->
{% if page.meta_keywords %}
<meta name="keywords" content="{{ page.meta_keywords }}">
{% endif %}
{% if page.schema_author %}
<meta name="author" content="{{ page.schema_author }}">
{% elif page.author %}
<meta name="author" content="{{ page.author.get_display_name() }}">
{% endif %}
{% endblock %}

{% block canonical %}<link rel="canonical" href="{{ page.canonical_url or canonical_url() }}" />{% endblock %}

{% block hreflang %}
{%- if all_versions is defined %}
{%- for version in all_versions %}
  {%- if is_homepage is defined and is_homepage %}
    {%- if version.language == (default_language or 'en') %}
<link rel="alternate" hreflang="{{ version.language }}" href="{{ url_for('index', _external=True) }}" />
    {%- else %}
<link rel="alternate" hreflang="{{ version.language }}" href="{{ url_for('index', lang=version.language, _external=True) }}" />
    {%- endif %}
  {%- else %}
<link rel="alternate" hreflang="{{ version.language }}" href="{{ url_for('view_content', slug=version.slug, _external=True) }}" />
  {%- endif %}
{%- endfor %}
{%- if is_homepage is defined and is_homepage %}
<link rel="alternate" hreflang="x-default" href="{{ url_for('index', _external=True) }}" />
{%- else %}
<link rel="alternate" hreflang="x-default" href="{{ url_for('view_content', slug=page.slug, _external=True) }}" />
{%- endif %}
{%- endif %}
{% endblock %}

{% block schema %}
<script type="application/ld+json">{{ page_schema | tojson | safe }}</script>
{% endblock %}

{% block content %}
<article class="ap-page ap-page--{{ page.template or 'default' }}">
<div class="ap-page__header">
    <h1 class="ap-page__title">{{ page.title }}</h1>
    {% if (page.show_date is not defined or page.show_date) or (page.show_author is not defined or page.show_author) %}
    <div class="ap-page__meta">
        {% if page.show_date is not defined or page.show_date %}
            {% if page.published_at %}
            <time datetime="{{ page.published_at.isoformat() }}">{{ page.published_at.strftime('%B %d, %Y') }}</time>
            {% endif %}
        {% endif %}
        {% if page.show_author is not defined or page.show_author %}
            {% if page.schema_author %}
                · {{ page.schema_author }}
            {% elif page.author %}
                · {{ page.author.get_display_name() }}
            {% endif %}
        {% endif %}
    </div>
    {% endif %}
</div>

{% if page.featured_image %}
<figure class="ap-page__featured-image">
    {% set fi_image = images_map.get(page.featured_image) if images_map is defined else None %}
    {% if fi_image and fi_image.width and fi_image.height %}
    {# Optimized: <picture> with AVIF, WebP, and original fallback #}
    {% set fi_cw = ap_content_width(page.template) %}
    <picture>
        {% if fi_image.get_srcset('avif') %}
        <source type="image/avif" 
                srcset="{{ fi_image.get_srcset('avif') }}" 
                sizes="(max-width: {{ fi_cw }}px) 100vw, {{ fi_cw }}px">
        {% endif %}
        {% if fi_image.get_srcset('webp') %}
        <source type="image/webp" 
                srcset="{{ fi_image.get_srcset('webp') }}" 
                sizes="(max-width: {{ fi_cw }}px) 100vw, {{ fi_cw }}px">
        {% endif %}
        <img src="{{ page.featured_image }}" 
             alt="{{ page.featured_image_alt or page.title }}"
             width="{{ fi_image.width }}"
             height="{{ fi_image.height }}"
             fetchpriority="high"
             decoding="async"
             {% if fi_image.dominant_color %}style="background-color:{{ fi_image.dominant_color }}"{% endif %}>
    </picture>
    {% else %}
    {# Fallback: no variants available (old images or SVG) #}
    <img src="{{ page.featured_image }}" 
         alt="{{ page.featured_image_alt or page.title }}"
         fetchpriority="high"
         decoding="async">
    {% endif %}
    {% if page.featured_image_caption %}
    <figcaption>{{ page.featured_image_caption }}</figcaption>
    {% endif %}
</figure>
{% endif %}

{# ================================================================
   PAGE CONTENT — Two rendering modes:
   1. Page Builder (JSON blocks) — if use_builder is true
   2. Legacy HTML content — original editor
   ================================================================ #}
<div class="ap-page__content">
{% if page.use_builder and page.blocks %}
    {# Builder: own block styles, no .ap-prose wrapper needed
       (text blocks already wrap their content in .ap-prose) #}
    {{ page.blocks | render_blocks(page.template) | safe }}
{% else %}
    {# Legacy: render raw HTML content (TinyMCE / markdown) #}
    <div class="ap-prose">
        {{ page.content | safe }}
    </div>
{% endif %}

{% if page.get_faq_list() %}
<section class="ap-faq">
    <h2 class="ap-faq__title">{{ pt('faq_heading') }}</h2>
    <div class="ap-faq__items">
    {% for faq in page.get_faq_list() %}
    <details class="ap-faq__item">
        <summary class="ap-faq__question">{{ faq.question }}</summary>
        <div class="ap-faq__answer">{{ faq.answer }}</div>
    </details>
    {% endfor %}
    </div>
</section>
{% endif %}
</div>

{% if page.tags and page.get_tags_list() %}
<div class="ap-article__tags">
    {% for tag in page.get_tags_list() %}
    <a href="{{ url_for('view_tag', tag_name=tag) }}" class="ap-tag">{{ tag }}</a>
    {% endfor %}
</div>
{% endif %}
</article>

{# ================================================================
   POSTS PAGE — when the page is flagged "Show latest posts", a
   paginated grid of published posts in the page's language follows
   the page's own content. Same card markup as the homepage listing.
   Pagination stays on this page's own slug (?page=N), so hreflang,
   the language switcher, and translation groups keep working: each
   language version of this page lists posts in its own language.
   ================================================================ #}
{% if posts is defined and posts %}
{% if posts_schema %}
<script type="application/ld+json">{{ posts_schema | tojson | safe }}</script>
{% endif %}

{% if posts.items %}
<div class="ap-home__grid">
    {% for post in posts.items %}
    <article class="ap-post-card ap-post-card--grid">
        {% if post.featured_image %}
        {% set card_img = images_map.get(post.featured_image) if images_map is defined else None %}
        {# The whole image is a link to the post. aria-hidden + tabindex=-1
           keep it out of the tab order and the accessibility tree: the title
           link right below goes to the same URL, so assistive tech announces
           one link per card instead of two identical ones. Google still
           follows the href and uses the img alt as its anchor text. #}
        <div class="ap-post-card__image-wrap">
            <a href="{{ url_for('view_content', slug=post.slug) }}" class="ap-post-card__image-link" aria-hidden="true" tabindex="-1">
            {% if card_img and card_img.width and card_img.height %}
            <picture>
                {% if card_img.get_srcset('avif') %}
                <source type="image/avif" srcset="{{ card_img.get_srcset('avif') }}" sizes="(max-width: 768px) 100vw, 360px">
                {% endif %}
                {% if card_img.get_srcset('webp') %}
                <source type="image/webp" srcset="{{ card_img.get_srcset('webp') }}" sizes="(max-width: 768px) 100vw, 360px">
                {% endif %}
                <img src="{{ post.featured_image }}" 
                     alt="{{ post.featured_image_alt or post.title }}"
                     width="{{ card_img.width }}"
                     height="{{ card_img.height }}"
                     loading="lazy"
                     decoding="async"
                     class="ap-post-card__image">
            </picture>
            {% else %}
            <img src="{{ post.featured_image }}" 
                 alt="{{ post.featured_image_alt or post.title }}"
                 loading="lazy"
                 class="ap-post-card__image">
            {% endif %}
            </a>
        </div>
        {% endif %}
        <h2 class="ap-post-card__title">
            <a href="{{ url_for('view_content', slug=post.slug) }}">{{ post.title }}</a>
        </h2>
        <div class="ap-post-card__meta">
            <time datetime="{{ post.published_at.isoformat() if post.published_at else '' }}">
                {{ (post.published_at|site_tz).strftime('%B %d, %Y') if post.published_at else '' }}
            </time>
        </div>
        {% if post.excerpt %}
        <p class="ap-post-card__excerpt">{{ post.excerpt }}</p>
        {% endif %}
    </article>
    {% endfor %}
</div>

{% if posts.pages > 1 %}
{# Each language version of a posts page has its own slug, so pagination
   links never need a lang parameter — /en-blog?page=2, /de-blog?page=2.
   EXCEPTION: when this posts page is the static homepage, its slug 301s
   to /, so pagination must go through index() with the same lang logic
   as the built-in homepage listing (lang omitted for default language). #}
{%- if is_homepage is defined and is_homepage %}
  {%- if current_language and current_language != (default_language or 'en') %}
    {%- set _pag_lang = current_language %}
  {%- else %}
    {%- set _pag_lang = none %}
  {%- endif %}
  {%- macro _pag_url(num) %}{{ url_for('index', page=(num if num > 1 else none), lang=_pag_lang) }}{% endmacro %}
{%- else %}
  {%- macro _pag_url(num) %}{{ url_for('view_content', slug=page.slug, page=(num if num > 1 else none)) }}{% endmacro %}
{%- endif %}
<nav class="ap-pagination" aria-label="Pagination">
    {% if posts.has_prev %}
    <a href="{{ _pag_url(posts.prev_num) }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg></a>
    {% endif %}
    
    {% for page_num in posts.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
        {% if page_num %}
            {% if page_num == posts.page %}
            <span class="is-current">{{ page_num }}</span>
            {% else %}
            <a href="{{ _pag_url(page_num) }}">{{ page_num }}</a>
            {% endif %}
        {% else %}
            <span>…</span>
        {% endif %}
    {% endfor %}
    
    {% if posts.has_next %}
    <a href="{{ _pag_url(posts.next_num) }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></a>
    {% endif %}
</nav>
{% endif %}

{% else %}
<div class="ap-empty-state">
    <h2>{{ pt('no_posts') }}</h2>
    <p class="ap-empty-state__hint">{{ pt('check_back') }}</p>
</div>
{% endif %}
{% endif %}
{% endblock %}