{% extends 'public/base.html' %}
{% block title %}{{ site_name }} - {{ site_tagline }}{% endblock %}

{% block hreflang %}
{#- Posts-mode homepage: /?lang=xx exists for every active language (the
    language switcher links them all), so the head must declare the same
    hreflang cluster — mirroring what page.html emits for a builder
    homepage. Only on page 1: paginated /?page=N URLs are not language
    equivalents of each other. x-default points to the clean default URL. -#}
{%- if all_versions is defined and all_versions|length > 1 and posts.page == 1 %}
{%- set _dl = default_language or 'en' %}
{%- for version in all_versions %}
<link rel="alternate" hreflang="{{ version.language }}" href="{{ request.url_root if version.language == _dl else request.url_root ~ '?lang=' ~ version.language }}" />
{%- endfor %}
<link rel="alternate" hreflang="x-default" href="{{ request.url_root }}" />
{%- endif %}
{% endblock %}

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

{% block content %}
<div class="ap-article__header ap-home__header">
    <h1 class="ap-article__title">{{ site_name }}</h1>
    <p class="ap-home__tagline">{{ site_tagline }}</p>
</div>

{% 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>
            <span>· {{ post.language|upper }}</span>
        </div>
        {% if post.excerpt %}
        <p class="ap-post-card__excerpt">{{ post.excerpt }}</p>
        {% endif %}
    </article>
    {% endfor %}
</div>

{% if posts.pages > 1 %}
{# Pagination links: include lang= ONLY when the visitor is NOT on the
   default language. Generating /?page=N&lang=<default> as an internal
   link would otherwise let Google index /?lang=<default>&page=N as a
   distinct URL with its own canonical, defeating the /?lang=<default> →
   / 301-redirect in index(). url_for() drops keys whose value is None. #}
{%- if current_language and current_language != (default_language or 'en') %}
  {%- set _pag_lang = current_language %}
{%- else %}
  {%- set _pag_lang = none %}
{%- endif %}
<nav class="ap-pagination" aria-label="Pagination">
    {% if posts.has_prev %}
    <a href="{{ url_for('index', page=(posts.prev_num if posts.prev_num > 1 else none), lang=_pag_lang) }}"><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="{{ url_for('index', page=(page_num if page_num > 1 else none), lang=_pag_lang) }}">{{ page_num }}</a>
            {% endif %}
        {% else %}
            <span>…</span>
        {% endif %}
    {% endfor %}
    
    {% if posts.has_next %}
    <a href="{{ url_for('index', page=posts.next_num, lang=_pag_lang) }}"><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 %}
{% endblock %}