{% 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 request.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] }}">
  <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 }}">
  {% endif %}
{% elif site_og_meta %}
<meta property="og:image" content="{{ site_og_meta[0] }}">
<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 %}
{% if post.tags %}
{% for tag in post.get_tags_list() %}
<meta property="article:tag" content="{{ tag }}">
{% endfor %}
{% 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 %}
<meta name="twitter:image" content="{{ post.twitter_image }}">
{% elif _og_img_obj %}
<meta name="twitter:image" content="{{ _og_img_obj.get_og_meta()[0] }}">
{% elif post.featured_image %}
<meta name="twitter:image" content="{{ post.featured_image }}">
{% elif settings.get('twitter_image') or settings.get('og_image') %}
<meta name="twitter:image" content="{{ settings.get('twitter_image') or settings.get('og_image') }}">
{% 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 request.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">
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "Organization",
      "@id": "{{ request.url_root }}#organization",
      "name": {{ site_name | tojson }}
      ,"url": "{{ request.url_root.rstrip('/') }}"
      {% if settings.get('site_logo') %}
      ,"logo": {
        "@type": "ImageObject",
        "url": "{{ settings.get('site_logo') }}"
        {% if settings.get('site_logo_width') and settings.get('site_logo_height') %}
        ,"width": {{ settings.get('site_logo_width') }}
        ,"height": {{ settings.get('site_logo_height') }}
        {% endif %}
      }
      {% endif %}
      {% if org_sameas is defined and org_sameas %}
      ,"sameAs": [
        {% for url in org_sameas %}"{{ url }}"{% if not loop.last %}, {% endif %}{% endfor %}
      ]
      {% endif %}
    },
    {
      "@type": "Person",
      "@id": "{{ request.url_root }}#/person/{{ post.author.id if post.author else 0 }}"
      ,"name": {{ post.schema_author or (post.author.get_display_name() if post.author else site_name) | tojson }}
      {% if post.author and post.author.bio %}
      ,"description": {{ post.author.bio|tojson }}
      {% endif %}
      {% if post.author and post.author.avatar_url %}
      ,"image": {{ post.author.avatar_url | tojson }}
      {% endif %}
      {% if author_sameas is defined and author_sameas %}
      ,"sameAs": [
        {% for url in author_sameas %}"{{ url }}"{% if not loop.last %}, {% endif %}{% endfor %}
      ]
      {% endif %}
    },
    {
      "@type": "{{ post.schema_type or 'BlogPosting' }}",
      "@id": "{{ post.canonical_url or request.url }}",
      "headline": {{ post.meta_title or post.title | tojson }},
      {% if post.meta_description or post.excerpt %}
      "description": {{ post.meta_description or post.excerpt | tojson }},
      {% endif %}
      "url": "{{ post.canonical_url or request.url }}",
      "inLanguage": "{{ post.language }}",
      {% if post.featured_image %}
      {% set schema_img = images_map.get(post.featured_image) if images_map is defined else None %}
      "image": {
        "@type": "ImageObject",
        "url": "{{ post.featured_image }}"
        {% if post.featured_image_alt %}
        ,"caption": {{ post.featured_image_alt | tojson }}
        {% endif %}
        {% if schema_img and schema_img.width and schema_img.height %}
        ,"width": {{ schema_img.width }}
        ,"height": {{ schema_img.height }}
        {% endif %}
      },
      {% endif %}
      {% if post.published_at %}
      "datePublished": "{{ post.published_at.isoformat() }}",
      {% else %}
      "datePublished": "{{ post.created_at.isoformat() }}",
      {% endif %}
      "dateModified": "{{ post.updated_at.isoformat() }}",
      "author": { "@id": "{{ request.url_root }}#/person/{{ post.author.id if post.author else 0 }}" },
      "publisher": { "@id": "{{ request.url_root }}#organization" },
      "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "{{ request.url }}"
      }
      {% if post.category %}
      ,"articleSection": {{ post.category | tojson }}
      {% endif %}
      {% if post.tags %}
      ,"keywords": "{{ post.get_tags_list()|join(', ') }}"
      {% endif %}
      {% if all_versions is defined and all_versions|length > 1 %}
      ,"availableLanguage": [
        {% for version in all_versions %}"{{ version.language }}"{% if not loop.last %},{% endif %}{% endfor %}
      ]
      {% endif %}
      ,"speakable": {
        "@type": "SpeakableSpecification",
        "cssSelector": [".ap-prose > p:first-of-type"]
      }
    }
    {% if post.get_faq_list() %}
    ,{
      "@type": "FAQPage",
      "mainEntity": [
        {% for faq in post.get_faq_list() %}
        {
          "@type": "Question",
          "name": {{ faq.question|tojson }},
          "acceptedAnswer": {
            "@type": "Answer",
            "text": {{ faq.answer|tojson }}
          }
        }{% if not loop.last %},{% endif %}
        {% endfor %}
      ]
    }
    {% endif %}
  ]
}
</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.get_variants() and fi_image.get_variants().get('avif') %}
    {# Optimized <picture>: AVIF + WebP sources, short-URL original fallback.
       All URLs emitted are clean short URLs — no /static/uploads/ paths. #}
    <picture>
        {% if fi_image.get_srcset('avif') %}
        <source type="image/avif" 
                srcset="{{ fi_image.get_srcset('avif') }}" 
                sizes="(max-width: 800px) 100vw, 800px">
        {% endif %}
        {% if fi_image.get_srcset('webp') %}
        <source type="image/webp" 
                srcset="{{ fi_image.get_srcset('webp') }}" 
                sizes="(max-width: 800px) 100vw, 800px">
        {% 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 %}
