{% extends 'base.html.twig' %}
{% block metadata %}
  {# ============================
   METADATA / SEO
   ============================ #}

  {% set meta_title = meta_title is defined
    ? meta_title
    : 'Spectacles jeune public Ain : écoles collectivités'
  %}
  {% set meta_description = meta_description is defined
    ? meta_description
    : '
  Spectacles pour enfants contes et marionettes.
  '
  %}
  {% set meta_image = meta_image is defined
    ? meta_image
    : asset('images/logo.png')
  %}
  {% set meta_url = meta_url is defined
    ? meta_url
    : app.request.uri|replace({
      'http://': 'https://'
    })
  %}
  {% set meta_site_name = meta_site_name is defined
    ? meta_site_name
    : 'Nom du site'
  %}
  {% set meta_type = meta_type is defined ? meta_type : 'website' %}

  <title>
    {{ meta_title }}
  </title>

  <meta name="description" content="{{ meta_description }}" />
  <meta name="robots" content="index, follow" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta charset="utf-8" />

  <link rel="canonical" href="{{ meta_url }}" />

  {# ============================
   OPEN GRAPH (Facebook, LinkedIn…)
   ============================ #}

  <meta property="og:title" content="{{ meta_title }}" />
  <meta property="og:description" content="{{ meta_description }}" />
  <meta property="og:type" content="{{ meta_type }}" />
  <meta property="og:url" content="{{ meta_url }}" />
  <meta property="og:image" content="{{ meta_image }}" />
  <meta property="og:site_name" content="{{ meta_site_name }}" />
  <meta property="og:locale" content="fr_FR" />

  {# Optionnel mais recommandé #}
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />

  {# ============================
   TWITTER CARDS
   ============================ #}

  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="{{ meta_title }}" />
  <meta name="twitter:description" content="{{ meta_description }}" />
  <meta name="twitter:image" content="{{ meta_image }}" />
{% endblock %}
{% block body %}
  <div class="bg-white py-6 sm:py-8">
    <div class="mx-auto max-w-7xl px-6 lg:px-8">
      <div class="mx-auto max-w-2xl lg:mx-0">
        <p class="text-base/7 font-semibold text-amber-600">
          Spectacles jeune public
        </p>
        <h1
          class="mt-2 text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl"
        >
          Spectacles contes et marionnettes
        </h1>
        <p class="mt-6 text-xl/8 text-balance text-gray-700">
          Une démarche de création pour introduire, enrichir, conclure des
          projets de classe, des projets d’école ou s’inscrire dans la
          thématique d'un projet spécifique. Un spectacle pour s’initier à
          l’écoute, la concentration et devenir un spectateur averti. Des textes
          aux mots choisis pour élargir le vocabulaire du jeune public. 
          Des thématiques en lien avec les programmes tels que le vivre ensemble, l'égalité, la fraternité,
          l'éducation au développement durable pour engager questions et réflexion.
          Des choix scénographiques privilégiant des décors
          construits à partir d’éléments existants ou transformés.
        </p>
      </div>
    </div>
  </div>

  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <!-- We've used 3xl here, but feel free to try other max-widths based on your needs -->
    <div class="mx-auto max-w-7xl">
      <!-- Content goes here -->
      {{
        render(
          controller(
            'App\\Controller\\RenderFeatureController::news',
            {
              isCarousel: true
            }
          )
        )
      }}
    </div>
  </div>
{% endblock %}