{% extends "base.html" %}

{% block htmltitle %}
{% if page.url == "" %}
<title>{{ config.site_name }}</title>
{% else %}
<title>{{ page.title }} - {{ config.site_name }}</title>
{% endif %}
{% endblock %}

{% block extrahead %}
{% if page.meta %}
{% set page_title = page.meta.title or config.site_name %}
{% set page_desc = page.meta.summary or page.meta.excerpt or config.site_description %}
{% set page_image = page.meta.image or "" %}
{% else %}
{% set page_title = config.site_name %}
{% set page_desc = config.site_description %}
{% set page_image = "" %}
{% endif %}
{% set page_url = page.canonical_url or "" %}
{% set base_url = config.site_url or "" %}

<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="{{ page_title }}">
<meta property="og:description" content="{{ page_desc }}">
{% if page_url %}<meta property="og:url" content="{{ page_url }}">{% endif %}
{% if page_image and base_url %}<meta property="og:image" content="{{ base_url }}{{ page_image }}">{% endif %}
{% if config.site_name %}<meta property="og:site_name" content="{{ config.site_name }}">{% endif %}

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{ page_title }}">
<meta name="twitter:description" content="{{ page_desc }}">
{% if page_image and base_url %}<meta name="twitter:image" content="{{ base_url }}{{ page_image }}">{% endif %}

<!-- Schema.org JSON-LD -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "{{ config.site_name | e }}",
  "url": "{{ base_url or page_url }}",
  "description": "{{ page_desc | e }}"{% if config.site_author %},
  "author": { "@type": "Organization", "name": "{{ config.site_author | e }}" }{% endif %}
}
</script>
{% endblock %}

{% block content %}
{% if page.url == "" %}

{# === HERO === #}
{% if page.meta and page.meta.image %}
<div class="home-hero home-hero--bg" role="banner" style="background-image: url('{{ page.meta.image }}');">
{% else %}
<div class="home-hero" role="banner">
{% endif %}
  {% if page.meta and page.meta.logo %}
    <img class="home-hero__logo" src="{{ page.meta.logo }}" alt="">
  {% endif %}

  <p class="home-title">{{ config.site_name }}</p>

  {% if page.meta and page.meta.summary %}
    <p class="home-subtitle">{{ page.meta.summary }}</p>
  {% elif config.site_description %}
    <p class="home-subtitle">{{ config.site_description }}</p>
  {% endif %}

</div>

{# === CONTENU MARKDOWN === #}
<div class="home-body">
  {{ page.content | replace("\\", "<br>") | safe }}
</div>
  
{# === TILES (sections enfants) === #}
{% set tile_count = namespace(n=0) %}
<nav class="home-tiles-wrapper" aria-label="Sections du site">
<div class="home-tiles">
  {% set style_classes = ["style1", "style2", "style3", "style4", "style5", "style6"] %}
  {% for section in nav.items %}
    {% if section.children %}
      {% set idx = section.children | first %}
      {% set meta = idx.meta if idx and idx.meta else {} %}
      <article class="home-tile {{ style_classes[tile_count.n % 6] }}">
        {% if meta.image %}
          <span class="home-tile__image" aria-hidden="true">
            <img src="{{ (idx.url | url) ~ meta.image }}" alt="" loading="lazy">
          </span>
        {% else %}
          <span class="home-tile__image home-tile__image--placeholder" aria-hidden="true"></span>
        {% endif %}
        <a href="{{ idx.url | url }}">
          <h2>{{ section.title }}</h2>
          <div class="home-tile__content">
            {% if meta.excerpt %}
              <p>{{ meta.excerpt }}</p>
            {% elif meta.summary %}
              <p>{{ meta.summary }}</p>
            {% endif %}
            {% if meta.tags %}
              <div class="home-tile__tags">
                {% for tag in meta.tags %}
                  <span class="home-tag">{{ tag }}</span>
                {% endfor %}
              </div>
            {% endif %}
          </div>
        </a>
      </article>
      {% set tile_count.n = tile_count.n + 1 %}
    {% elif section.url and section.url != "" %}
      {% set tile_meta = section.meta if section.meta else {} %}
      {% set tile_url = section.url | url %}
      {% if tile_url %}
      <article class="home-tile {{ style_classes[tile_count.n % 6] }}">
        {% if tile_meta.image %}
          <span class="home-tile__image" aria-hidden="true">
            <img src="{{ tile_url ~ tile_meta.image }}" alt="" loading="lazy">
          </span>
        {% else %}
          <span class="home-tile__image home-tile__image--placeholder" aria-hidden="true"></span>
        {% endif %}
        <a href="{{ tile_url }}">
          <h2>{{ section.title }}</h2>
          <div class="home-tile__content">
            {% if tile_meta.excerpt %}
              <p>{{ tile_meta.excerpt }}</p>
            {% elif tile_meta.summary %}
              <p>{{ tile_meta.summary }}</p>
            {% endif %}
            {% if tile_meta.tags %}
              <div class="home-tile__tags">
                {% for tag in tile_meta.tags %}
                  <span class="home-tag">{{ tag }}</span>
                {% endfor %}
              </div>
            {% endif %}
          </div>
        </a>
      </article>
      {% set tile_count.n = tile_count.n + 1 %}
      {% endif %}
    {% endif %}
  {% endfor %}
</div>
</nav>

{% if page.meta and page.meta.iframe %}
<div class="iframe-embed">
  <iframe {{ page.meta.iframe }} title="Contenu intégré"></iframe>
</div>
{% endif %}

{% else %}
{{ super() }}
{% if page.meta and page.meta.iframe %}
<div class="iframe-embed">
  <iframe {{ page.meta.iframe }} title="Contenu intégré"></iframe>
</div>
{% endif %}
{% endif %}
{% endblock %}