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

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

{% block meta_tags %}
<!-- Open Graph -->
<meta property="og:type" content="{{ post.og_type or 'article' }}">
<meta property="og:url" content="{{ post.canonical_url or canonical_url() }}">
<meta property="og:title" content="{{ post.og_title or post.meta_title or post.title }}">
<meta property="og:description" content="{{ post.og_description or post.meta_description or post.excerpt or '' }}">
{%- set _og_img_obj = images_map.get(post.og_image or post.featured_image) if images_map is defined else None %}
{%- if post.og_image or post.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="{{ (post.og_image or post.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="{{ post.language }}">
{%- if post.published_at %}
<meta property="article:published_time" content="{{ post.published_at.isoformat() }}">
{%- endif %}
<meta property="article:modified_time" content="{{ post.updated_at.isoformat() }}">
{%- if post.schema_author or (post.author and post.author.get_display_name()) %}
<meta property="article:author" content="{{ post.schema_author or post.author.get_display_name() }}">
{%- endif %}

<!-- Twitter Card -->
<meta name="twitter:card" content="{{ post.twitter_card or 'summary_large_image' }}">
<meta name="twitter:title" content="{{ post.twitter_title or post.meta_title or post.title }}">
<meta name="twitter:description" content="{{ post.twitter_description or post.meta_description or post.excerpt or '' }}">
{%- if post.twitter_image %}
  {%- set _tw_img_obj = images_map.get(post.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="{{ post.twitter_image | absolute_url }}">
  {%- endif %}
{%- elif _og_img_obj %}
<meta name="twitter:image" content="{{ _og_img_obj.get_og_meta()[0] | absolute_url }}">
{%- elif post.featured_image %}
<meta name="twitter:image" content="{{ post.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 post.meta_keywords %}
<meta name="keywords" content="{{ post.meta_keywords }}">
{% endif %}
{% if post.schema_author %}
<meta name="author" content="{{ post.schema_author }}">
{% elif post.author %}
<meta name="author" content="{{ post.author.get_display_name() }}">
{% endif %}
{% endblock %}

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

{% block hreflang %}
{%- if all_versions is defined %}
{%- for version in all_versions %}
<link rel="alternate" hreflang="{{ version.language }}" href="{{ url_for('view_content', slug=version.slug, _external=True) }}" />
{%- endfor %}
<link rel="alternate" hreflang="x-default" href="{{ url_for('view_content', slug=post.slug, _external=True) }}" />
{%- endif %}
{% endblock %}

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

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

{% if post.featured_image %}
{% set fi_image = images_map.get(post.featured_image) if images_map is defined else None %}
<figure class="ap-page__featured-image">
    {% if fi_image and fi_image.width and fi_image.height %}
    {# Optimized <picture>: AVIF + WebP sources, short-URL original fallback.
       All URLs emitted are clean short URLs — no /static/uploads/ paths. #}
    {% set fi_cw = ap_content_width('default') %}
    <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="{{ fi_image.public_url }}" 
             alt="{{ post.featured_image_alt or post.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 generated (SVG or processing failed) — plain <img>. #}
    <img src="{{ post.featured_image }}" 
         alt="{{ post.featured_image_alt or post.title }}"
         fetchpriority="high"
         decoding="async">
    {% endif %}
    {% if post.featured_image_caption %}
    <figcaption>{{ post.featured_image_caption }}</figcaption>
    {% endif %}
</figure>
{% endif %}

<div class="ap-page__content">
    <div class="ap-prose">
        {{ post.content | safe }}
    </div>

    {% if post.get_faq_list() %}
    <section class="ap-faq">
        <h2 class="ap-faq__title">{{ pt('faq_heading') }}</h2>
        <div class="ap-faq__items">
        {% for faq in post.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 post.tags and post.get_tags_list() %}
<div class="ap-article__tags">
    {% for tag in post.get_tags_list() %}
    <a href="{{ url_for('view_tag', tag_name=tag) }}" class="ap-tag">{{ tag }}</a>
    {% endfor %}
</div>
{% endif %}
</article>
{% endblock %}