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

{% block content %}
  {% set class_suffix = page.parent.title|lower %}
  <div id="reader" class="content" data-barba="container" data-barba-namespace="reader">
      <div id="header-project">
        <h2 class="info-project-{{ class_suffix }}">
          <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" class="{{ class_suffix }}">
        <img src="{{ url('theme://images/loader/rolling.svg') }}" data-src="{{ page.media.images|first.url }}" alt="{{ page.title }}" class="lazy loader">
      </figure>
      <div id="info-project" class="info-project-{{ class_suffix }}">
        <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" class="{{ class_suffix }}">
        <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 class="{{ class_suffix }}">
                <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 carousel %}
        {% include 'partials/carousel.html.twig' %}
      {% endblock %}
  </div>
{% endblock %}