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

{% block schema %}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": {{ site_name | tojson }},
  "description": {{ site_tagline | tojson }},
  "url": "{{ request.url_root }}"
  {% if settings.get('site_logo') %}
  ,"image": {
    "@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 available_languages|length > 1 %}
  ,"availableLanguage": [
    {% for lang in available_languages %}
    "{{ lang.code }}"{% if not loop.last %},{% endif %}
    {% endfor %}
  ]
  {% endif %}
}
</script>
{% if posts.items %}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ItemList",
  "itemListElement": [
    {% for post in posts.items %}
    {
      "@type": "ListItem",
      "position": {{ loop.index }},
      "url": "{{ url_for('view_content', slug=post.slug, _external=True) }}",
      "name": {{ post.title | tojson }}
    }{% if not loop.last %},{% endif %}
    {% endfor %}
  ]
}
</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 %}
        <div class="ap-post-card__image-wrap">
            <img src="{{ post.featured_image }}" 
                 alt="{{ post.featured_image_alt or post.title }}"
                 loading="lazy"
                 class="ap-post-card__image">
        </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 %}
<nav class="ap-pagination" aria-label="Pagination">
    {% if posts.has_prev %}
    <a href="{{ url_for('index', page=posts.prev_num, lang=current_language) }}"><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=current_language) }}">{{ page_num }}</a>
            {% endif %}
        {% else %}
            <span>…</span>
        {% endif %}
    {% endfor %}
    
    {% if posts.has_next %}
    <a href="{{ url_for('index', page=posts.next_num, lang=current_language) }}"><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 %}
