{% 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 %}
        <div class="ap-post-card__image-wrap">
            {% 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 %}
        </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.strftime('%B %d, %Y') if post.published_at else '' }}
            </time>
        </div>
        {% if post.excerpt %}
        <p class="ap-post-card__excerpt">{{ post.excerpt }}</p>
        {% endif %}
        <a href="{{ url_for('view_content', slug=post.slug) }}" class="ap-post-card__read-more">
            {{ pt('read_more') }} <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>
    </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, lang=_pag_lang) }}{% endmacro %}
{%- else %}
  {%- macro _pag_url(num) %}{{ url_for('view_content', slug=page.slug, page=num) }}{% 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 %}