{% extends 'partials/base.html.twig' %}

{% block content %}
    <div id="reader" class="content" data-barba="container" data-barba-namespace="reader">
        <div id="header-project">
        {% switch page.parent.title %}
          {% case 'Publique' %}
            <h2 class="info-project-publique">
          {% case 'Sociale' %}
            <h2 class="info-project-sociale">
          {% case 'Culturelle' %}
            <h2 class="info-project-culturelle">
        {% endswitch %}
            <span data-text="{{ page.title }}">{{ page.title }}</span></h2>
        </div>
        <a href="{{ page.parent.parent.url }}"><div id="close-project" class="picto" data-src="{{ url('theme://images/pictos/cross.svg') }}" aria-hidden="true"></div></a>
        <figure id="cover-image-mobile">
          <img src="{{ url('theme://images/loader/rolling.svg') }}" data-src="{{ page.media.images|first.url }}" alt="{{ page.title }}" class="lazy loader">
        </figure>
        {% switch page.parent.title %}
          {% case 'Publique' %}
            <div id="info-project" class="info-project-publique">
          {% case 'Sociale' %}
            <div id="info-project" class="info-project-sociale">
          {% case 'Culturelle' %}
            <div id="info-project" class="info-project-culturelle">
        {% endswitch %}
          <h2 id="main-project-title">{{ page.title }}</h2>
          <div>
              {% for tag in page.taxonomy.tag %}
                {{ tag }},
              {% endfor %}
              {{ page.date|date("Y") }}
          </div>
        </div>
        <figure id="cover-image">
          <img src="{{ url('theme://images/loader/rolling.svg') }}" data-src="{{ page.media.images|first.url }}" alt="{{ page.title }}" class="lazy loader">
        </figure>
        <hr>
        <div id="project-description">
            {{ page.content|raw }}
        </div>

        <div id="project-images-grid">
          {% for image in page.media.images %}
              {% if image != page.media.images | first %}
                <figure>
                  <img src="{{ url('theme://images/loader/rolling.svg') }}" data-src="{{ image.url }}" alt="{{ page.title }}" class="lazy loader project-image">
                </figure>
              {% endif %}
          {% endfor %}

        </div>
        {% block related_pages %}
          {% include 'partials/relatedpages.html.twig' %}
        {% endblock %}
        {% block carrousel %}
          {% include 'partials/carrousel.html.twig' %}
        {% endblock %}
    </div>
{% endblock %}