{% 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 request.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] }}">
  <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 }}">
  {% 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="{{ 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 %}
<meta name="twitter:image" content="{{ page.twitter_image }}">
{% elif _og_img_obj %}
<meta name="twitter:image" content="{{ _og_img_obj.get_og_meta()[0] }}">
{% elif page.featured_image %}
<meta name="twitter:image" content="{{ page.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 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 request.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">
{
  "@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/{{ page.author.id if page.author else 0 }}"
      ,"name": {{ page.schema_author or (page.author.get_display_name() if page.author else site_name) | tojson }}
      {% if page.author and page.author.bio %}
      ,"description": {{ page.author.bio|tojson }}
      {% endif %}
      {% if page.author and page.author.avatar_url %}
      ,"image": {{ page.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": "{{ page.schema_type or 'WebPage' }}",
      "@id": "{{ page.canonical_url or request.url }}",
      "name": {{ page.meta_title or page.title | tojson }},
      "headline": {{ page.title | tojson }},
      {% if page.meta_description or page.excerpt %}
      "description": {{ page.meta_description or page.excerpt | tojson }},
      {% endif %}
      "url": "{{ page.canonical_url or request.url }}",
      "inLanguage": "{{ page.language }}",
      {% if page.featured_image %}
      "image": {
        "@type": "ImageObject",
        "url": "{{ page.featured_image }}"
        {% if page.featured_image_alt %}
        ,"caption": {{ page.featured_image_alt | tojson }}
        {% endif %}
        {% set schema_img = None %}
        {% for img in images_map.values() if images_map is defined and img.url == page.featured_image %}
        {% set schema_img = img %}
        {% endfor %}
        {% if schema_img and schema_img.width and schema_img.height %}
        ,"width": {{ schema_img.width }}
        ,"height": {{ schema_img.height }}
        {% endif %}
      },
      {% endif %}
      {% if page.published_at %}
      "datePublished": "{{ page.published_at.isoformat() }}",
      {% endif %}
      "dateModified": "{{ page.updated_at.isoformat() }}",
      "author": { "@id": "{{ request.url_root }}#/person/{{ page.author.id if page.author else 0 }}" },
      "publisher": { "@id": "{{ request.url_root }}#organization" },
      "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "{{ request.url }}"
      }
      {% if page.tags %}
      ,"keywords": "{{ page.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 page.get_all_faq_items() %}
    ,{
      "@type": "FAQPage",
      "mainEntity": [
        {% for faq in page.get_all_faq_items() %}
        {
          "@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--{{ 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 = None %}
    {% for img in images_map.values() if images_map is defined and img.url == page.featured_image %}
        {% set fi_image = img %}
    {% endfor %}
    
    {% if fi_image and fi_image.get_variants() and fi_image.get_variants().get('avif') %}
    {# Optimized: <picture> with AVIF, WebP, and original fallback #}
    <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="{{ 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 | 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>
{% endblock %}
