{#
    Editorial SEO landing page shared by the country / region / subregion /
    city actions (src/Http/Action/Web/Geo/*). The `kind` variable selects the
    `pages.geo.<kind>.*` translation namespace; everything else (name,
    description_html, medias, breadcrumb, canonical, alternates) is supplied
    by the action.

    Markdown is rendered server-side (MarkdownRenderer) and injected via
    `|raw` — the renderer escapes inline HTML + strips unsafe links, so the
    fragment is safe.
#}
{% set ns = 'pages.geo.' ~ kind ~ '.' %}
{% set page_name = name|default('') %}
{% set meta_title = trans(ns ~ 'meta.title', { name: page_name }, locale) %}
{% set meta_description = trans(ns ~ 'meta.description', { name: page_name }, locale) %}
<!doctype html>
<html lang="{{ locale|default('fr-FR') }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ meta_title }}</title>
    <meta name="description" content="{{ meta_description }}">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="{{ canonical }}">
    {% for alt in alternates %}
        <link rel="alternate" hreflang="{{ alt.hreflang }}" href="{{ alt.href }}">
    {% endfor %}
    <meta property="og:type" content="website">
    <meta property="og:title" content="{{ meta_title }}">
    <meta property="og:description" content="{{ meta_description }}">
    {% if medias|length > 0 %}
        <meta property="og:image" content="{{ medias[0].url }}">
    {% endif %}
    <meta name="twitter:card" content="summary_large_image">
</head>
<body>
    <nav aria-label="breadcrumb">
        <ol>
            <li><a href="/">{{ trans('pages.geo.breadcrumb.home', {}, locale) }}</a></li>
            {% for crumb in breadcrumb %}
                <li>
                    {% if crumb.url %}<a href="{{ crumb.url }}">{{ crumb.label }}</a>
                    {% else %}<span aria-current="page">{{ crumb.label }}</span>{% endif %}
                </li>
            {% endfor %}
        </ol>
    </nav>

    <h1>{{ page_name }}</h1>

    {% if description_html %}
        <section class="geo-description">
            {{ description_html|raw }}
        </section>
    {% endif %}

    <section class="geo-media">
        <h2>{{ trans(ns ~ 'media_heading', { name: page_name }, locale) }}</h2>
        {% if medias|length == 0 %}
            <p>{{ trans('pages.geo.empty_media', {}, locale) }}</p>
        {% else %}
            <ul class="media-grid">
                {% for m in medias %}
                    <li>
                        <a href="{{ m.url }}">
                            <img src="{{ m.url }}" alt="{{ m.name }}"
                                 {% if m.width %}width="{{ m.width }}"{% endif %}
                                 {% if m.height %}height="{{ m.height }}"{% endif %}
                                 loading="lazy">
                        </a>
                    </li>
                {% endfor %}
            </ul>
        {% endif %}
    </section>

    {% include 'partials/cookie-consent.twig' %}
</body>
</html>
