{% extends "./base.twig" %}
{% block title %}Association{% endblock %}
{% block head %}
  <link rel="stylesheet" href="/assets/organization.css" />
{% endblock %}
{% block content %}  
<div class="header">
  <div class="container header-container">
    <a href="/" class="return">
      <div class="return-icon">
        <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
          <path fill="currentColor" d="M256 504C119 504 8 393 8 256S119 8 256 8s248 111 248 248-111 248-248 248zM142.1 273l135.5 135.5c9.4 9.4 24.6 9.4 33.9 0l17-17c9.4-9.4 9.4-24.6 0-33.9L226.9 256l101.6-101.6c9.4-9.4 9.4-24.6 0-33.9l-17-17c-9.4-9.4-24.6-9.4-33.9 0L142.1 239c-9.4 9.4-9.4 24.6 0 34z"></path>
        </svg>
      </div>
      <div class="return-title">Revenir à la liste</div>
    </a>
    <div class="header-title">
      Forum des associations
    </div>
  </div>
</div>
<div class="cover-background" style="background-image: url({{ data.cover.location }})"></div>
<div class="cover">
  <div class="cover-content container">
    <div class="cover-image" style="background-image: url({{ data.thumbnail.location }});">
    </div>
    <div class="cover-title-container">
      <h1 class="cover-title">
        {{ data.name }}
      </h1>
      {# <h4 class="cover-sub-title">
        Sous titre
      </h4> #}
    </div>
  </div>
</div>
<div class="container">
  {% if data.gallery|length > 0 %}
  <div class="media-mosaic mosaic-{{ data.gallery|length }}">
    {% for media in data.gallery %}
    <div class="media-container" onclick="openModal('{{ media.location }}', {{ media.isVideo }})">
      <div
        class="media {% if media.isVideo %}media-video-bg{% endif %}"
        {% if not media.isVideo %}style="background-image: url({{ media.location }})"{% endif %}></div>
      {% if media.isVideo %}
      <div class="media-overlay">
        <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
          <path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm115.7 272l-176 101c-15.8 8.8-35.7-2.5-35.7-21V152c0-18.4 19.8-29.8 35.7-21l176 107c16.4 9.2 16.4 32.9 0 42z"></path>
        </svg>
      </div>
      {% endif %}
    </div>
    {% endfor %}
  </div>
  <div class="media-modal-container" id="media-modal">
    <div class="media-modal">
      <div class="media-modal-content" id="media-modal-content">
        
      </div>
      <div class="media-close" onclick="closeModal()">
        <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
          <path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"></path>
        </svg>
      </div>
    </div>
  </div>
  {% endif %}

  {% if data.descriptionLong|length > 0 %}
  <section>
    <div class="section-title">
      <h2>Présentation</h2>
      <div class="section-divider"></div>
    </div>
    <div class="description">
      {{ data.descriptionLong|raw }}
    </div>
  </section>
  {% endif %}

  {% if data.schedule|length > 0 %}
  <section>
    <div class="section-title">
      <h2>Crénaux</h2>
      <div class="section-divider"></div>
    </div>
    <div class="schedule">
      {% for item in data.schedule %}
      <div class="schedule-category">
        <div class="schedule-category-header" title="Déroulez">
          <div class="schedule-category-name">
            {{ item.name }}
          </div>
          <svg
            class="schedule-category-collapse-icon"
            aria-hidden="true"
            focusable="false"
            role="img"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 512 512">
            <path fill="currentColor" d="M8 256C8 119 119 8 256 8s248 111 248 248-111 248-248 248S8 393 8 256zm231-113.9L103.5 277.6c-9.4 9.4-9.4 24.6 0 33.9l17 17c9.4 9.4 24.6 9.4 33.9 0L256 226.9l101.6 101.6c9.4 9.4 24.6 9.4 33.9 0l17-17c9.4-9.4 9.4-24.6 0-33.9L273 142.1c-9.4-9.4-24.6-9.4-34 0z"></path>
          </svg>
        </div>
        <div class="schedule-category-table">
          <div class="schedule-category-days-container">
            {% for when in item.when %}
            <div class="schedule-category-day-container">
              <div class="schedule-category-day">
                {{ when.day }}
              </div>
              <div class="schedule-category-hours">
                {{ when.from }} <span class="separator">-</span> {{ when.to }}
              </div>
            </div>
            {% endfor %}
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </section>
  {% endif %}

  {% if data.pricing|length > 0 %}
  <section>
    <div class="section-title">
      <h2>Tarifs</h2>
      <div class="section-divider"></div>
    </div>
    <div class="pricing">
      {% for item in data.pricing %}
      <div class="pricing-card">
        <div class="pricing-label">
          {{ item.priceLabel }}
        </div>
        <div class="pricing-name">
          {{ item.name }}
        </div>
        <div class="pricing-description">
          {{ item.description }}
        </div>
      </div>
      {% endfor %}
    </div>
  </section>
  {% endif %}

  {% if data.contacts is defined %}
  <section>
    <div class="section-title">
      <h2>Contact</h2>
      <div class="section-divider"></div>
    </div>
    <div class="contact">
      {% if data.contacts.person|length > 0 %}
      <div class="contact-item person">
        <div class="contact-icon">
          <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
            <path fill="currentColor" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"></path>
          </svg>
        </div>
        <div class="contact-content">
          {{ data.contacts.person }}
        </div>
      </div>
      {% endif %}
      {% if data.contacts.email|length > 0 %}
      <div class="contact-item email">
        <div class="contact-icon">
          <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <path fill="currentColor" d="M256 8C118.941 8 8 118.919 8 256c0 137.059 110.919 248 248 248 48.154 0 95.342-14.14 135.408-40.223 12.005-7.815 14.625-24.288 5.552-35.372l-10.177-12.433c-7.671-9.371-21.179-11.667-31.373-5.129C325.92 429.757 291.314 440 256 440c-101.458 0-184-82.542-184-184S154.542 72 256 72c100.139 0 184 57.619 184 160 0 38.786-21.093 79.742-58.17 83.693-17.349-.454-16.91-12.857-13.476-30.024l23.433-121.11C394.653 149.75 383.308 136 368.225 136h-44.981a13.518 13.518 0 0 0-13.432 11.993l-.01.092c-14.697-17.901-40.448-21.775-59.971-21.775-74.58 0-137.831 62.234-137.831 151.46 0 65.303 36.785 105.87 96 105.87 26.984 0 57.369-15.637 74.991-38.333 9.522 34.104 40.613 34.103 70.71 34.103C462.609 379.41 504 307.798 504 232 504 95.653 394.023 8 256 8zm-21.68 304.43c-22.249 0-36.07-15.623-36.07-40.771 0-44.993 30.779-72.729 58.63-72.729 22.292 0 35.601 15.241 35.601 40.77 0 45.061-33.875 72.73-58.161 72.73z"></path>
          </svg>
        </div>
        <div class="contact-content">
          <a href="mailto:{{ data.contacts.email }}">{{ data.contacts.email }}</a>
        </div>
      </div>
      {% endif %}
      {% if data.contacts.address|length > 0 %}
      <div class="contact-item address">
        <div class="contact-icon">
          <svg aria-hidden="true"focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
            <path fill="currentColor" d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"></path>
          </svg>
        </div>
        <div class="contact-content">
          {% for line in data.contacts.address %}
            <span>{{ line }}</span><br>
          {% endfor %}
        </div>
      </div>
      {% endif %}
      {% if data.contacts.phone|length > 0 %}
      <div class="contact-item phone">
        <div class="contact-icon">
          <svg aria-hidden="true"focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <path fill="currentColor" d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z"></path>
          </svg>
        </div>
        <div class="contact-content">
          <a href="telto:{{ data.contacts.phoneInt }}">{{ data.contacts.phoneSplit }}</a>
        </div>
      </div>
      {% endif %}
      {% if data.contacts.website|length > 0 %}
      <div class="contact-item website">
        <div class="contact-icon">
          <svg aria-hidden="true"focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
            <path fill="currentColor" d="M336.5 160C322 70.7 287.8 8 248 8s-74 62.7-88.5 152h177zM152 256c0 22.2 1.2 43.5 3.3 64h185.3c2.1-20.5 3.3-41.8 3.3-64s-1.2-43.5-3.3-64H155.3c-2.1 20.5-3.3 41.8-3.3 64zm324.7-96c-28.6-67.9-86.5-120.4-158-141.6 24.4 33.8 41.2 84.7 50 141.6h108zM177.2 18.4C105.8 39.6 47.8 92.1 19.3 160h108c8.7-56.9 25.5-107.8 49.9-141.6zM487.4 192H372.7c2.1 21 3.3 42.5 3.3 64s-1.2 43-3.3 64h114.6c5.5-20.5 8.6-41.8 8.6-64s-3.1-43.5-8.5-64zM120 256c0-21.5 1.2-43 3.3-64H8.6C3.2 212.5 0 233.8 0 256s3.2 43.5 8.6 64h114.6c-2-21-3.2-42.5-3.2-64zm39.5 96c14.5 89.3 48.7 152 88.5 152s74-62.7 88.5-152h-177zm159.3 141.6c71.4-21.2 129.4-73.7 158-141.6h-108c-8.8 56.9-25.6 107.8-50 141.6zM19.3 352c28.6 67.9 86.5 120.4 158 141.6-24.4-33.8-41.2-84.7-50-141.6h-108z"></path>
          </svg>
        </div>
        <div class="contact-content">
          <a href="{{ data.contacts.website }}">
            {{ data.contacts.website }}
            <svg class="external-link" aria-hidden="true"focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
              <path fill="currentColor" d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"></path>
            </svg>
          </a>
        </div>
      </div>
      {% endif %}
      {% if data.contacts.facebook|length > 0 %}
      <div class="contact-item facebook">
        <div class="contact-icon">
          <svg aria-hidden="true"focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
            <path fill="currentColor" d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path>
          </svg>
        </div>
        <div class="contact-content">
          <a href="{{ data.contacts.facebook }}">
            {{ data.contacts.facebook }}
            <svg class="external-link" aria-hidden="true"focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
              <path fill="currentColor" d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"></path>
            </svg>
          </a>
        </div>
      </div>
      {% endif %}
      {% if data.contacts.instagram|length > 0 %}
      <div class="contact-item instagram">
        <div class="contact-icon">
          <svg aria-hidden="true"focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
            <path fill="currentColor" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path>
          </svg>
        </div>
        <div class="contact-content">
          <a href="{{ data.contacts.instagram }}">
            {{ data.contacts.instagram }}
            <svg class="external-link" aria-hidden="true"focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
              <path fill="currentColor" d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"></path>
            </svg>
          </a>
        </div>
      </div>
      {% endif %}
      {% if data.contacts.twitter|length > 0 %}
      <div class="contact-item twitter">
        <div class="contact-icon">
          <svg aria-hidden="true"focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
          </svg>
        </div>
        <div class="contact-content">
          <a href="{{ data.contacts.twitter }}">
            {{ data.contacts.twitter }}
            <svg class="external-link" aria-hidden="true"focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
              <path fill="currentColor" d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"></path>
            </svg>
          </a>
        </div>
      </div>
      {% endif %}
    </div>
  </section>
  {% endif %}
</div>
<div class="footer">
  <div></div>
  <div></div>
  <div></div>
</div>
{% endblock %}

{% block scripts %}
<script src="/assets/js/organization.js"></script>
{% endblock %}