{% extends 'public/base.html' %}
{% block title %}{{ site_name }} - {{ site_tagline }}{% 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 %}
        <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>
            <span>· {{ post.language|upper }}</span>
        </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 %}
{# 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, 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, 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 %}