{# SPDX-License-Identifier: EUPL-1.2 #}

{% from "includes/markdown_by_paragraph.twig" import markdown_by_paragraph %}
{% from "includes/actions.twig" import actions %}
{% from "includes/video.twig" import video %}
<section id="hero" class="layout-maxed bg-blue">
	<div class="layout-hero bg-section bg-overlay bg-gradient sm:py-36 py-8" <?php bg('bg-hero')?>>
		<div class="hero-content grid md:grid-cols-2 flex flex-wrap sm:my-36 my-8 sm:py-36 py-8">
			<div class="py-16">
				<div class="hero-text mx-24 animation fade-in">
          <h1 id="hero-title" class="hero-title color-light">{{ site_title }}</h1>
          <div id="hero-desc" class="editable hero-desc color-light py-20 mb-16">
          <hr>
          <em class="color-2">Editable text with icon <i class="icon icon-{{ pages["_meta"].meta.icon2 }}" aria-hidden="true"></i></em>
          </div>

					<div class="hero-action grid lg:grid-cols-2">
          {% for button in pages["_meta"].meta.button %}
						<a class="btn hero-btn bg-glaz border-rounded no-decoration" href="{{ "index"|link }}">Editable button with icon<i class="icon icon-{{ button.icon }} ml-8"></i></a>
          {% endfor %}
					</div>
				</div>
			</div>
			<div class="flex flex-col flex-grow justify-center mx-24 py-12">
        <div class="hero-card bg-white border-rounded shadow text-center animation slide-right fire">
            <span id="hero-card-icon" class="editable-media" data-width="80" data-height="80" style="max-width:80px; max-height:80px">
            <img class="" src="{{ pages["_meta"].meta.image1.url|url }}" style="max-width: 80px; max-height: 80px;" alt="{{ pages["_meta"].meta.image1.alt }}">
            </span>
            <h3 id="hero-card-title" class="editable hero-card-title color-blue my-16">{{ pages["_meta"].meta.image1.title }}</h3>
            <div id="hero-card-desc" class="editable hero-card-desc mb-0">{{ pages["_meta"].meta.image1.txt }}</div>
          </div>
      </div>
		</div>
	</div>
</section>

<section id="features" class="layout-maxed text-center py-36">
	<div class="features-content sm:grid md:grid-cols-2 flex flex-wrap py-36 m-auto">
		<div class="features-text md:col-span-2 lg:col-span-full">
			<?php txt('features-subtitle','features-subtitle color-glaz')?>
		</div>
		<div class="features-heading md:col-span-2 lg:col-span-full pt-8">
			<?php h2('features-title', 'features-title color-blue')?>
		</div>
	</div>


	<!-- module pour bien identifier que ce sont les elements à dupliquer et a sauvegardé-->
	<div id="features-card" class="module sm:grid md:grid-cols-2 lg:grid-cols-4 gap-36 sm:mx-20 mx-8 py-36 animation delay-1 fade-in">
  {% for module in pages["_meta"].meta.module %}
    <div class="features-card bg-white shadow border-rounded flex flex-col my-16 md:my-24">
      <div class="features-card-icon">
        <span id="features-card-icon-{{ module.id }}" data-class="ml-0" data-width="70" data-height="70" style="max-width: 70px; max-height: 70px;">
          <img class="" src="{{ module.url|url }}" loading="lazy" style="max-width: 70px; max-height: 70px;">
        </span>
      </div>
      <div class="flex flex-col align-items-center text-left">
        <h4 class="color-blue pb-24 mb-24">
          <div id="features-card-title-{{ module.id }}" class="editable">{{ module.title }}</div>
        </h4>
        <p class="mb-0">
        <div id="features-card-desc-{{ module.id }}" class="editable">{{ module.txt }}</div>
        </p>
      </div>
    </div>
  {% endfor %}
	</div>

</section>



<!-- CODE POUR EXEMPLE -->

<section class="page-section content" id="content">
    <div class="text-center">
      <!-- Content Section Heading-->
      <h2 class="page-section-heading text-center text-uppercase color-blue mb-0">{{ current_page.title }}</h2>
      <h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">{{ meta.title ? meta.title : current_page.id }}</h2>
      <!-- Icon Divider-->
      {% if pages["_meta"].meta.icon1 %}
        <a class="btn hero-btn bg-glaz border-rounded no-decoration" href="{{ "index"|link }}">Editable button with icon<i class="icon icon-{{ pages["_meta"].meta.icon1 }} ml-8"></i></a>
      {% endif %}
    </div>
        <div class="layout-maxed py-36">
            {# {% if meta.video %}
                {{ video(meta.video, meta.image, "content") }}
            {% elseif meta.image %}
                <img class="img-fluid rounded mb-5 d-block mx-auto" src="{{ meta.image|url }}" alt="{{ meta.image_alt }}" />
            {% endif %} #}
            {{ content }}
            {# {{ actions(meta.actions, "single_page") }} #}
        </div>
</section>