{% extends "base.html" %}

{% if article.lang %}
{% block lang %}{{ article.lang }}{% endblock %}
{% endif %}

{% block head %}
  {{ super() }}
  {% if article.description %}
    <meta name="description" content="{{ article.description }}" />
  {% endif %}

  {% for tag in article.tags %}
    <meta name="tags" content="{{ tag }}" />
  {% endfor %}

{% endblock %}

{% block title %}{{ article.title }} | Balsamine {% endblock %}

{% block content %}
<article class="show-detail content" data-color="{{ article.color }}">
  <header class="show-detail__header" style='background:  {{ article.color }} , top / 25px;'>
      <!-- <header class="show-detail__header" style='background: linear-gradient({{ article.date|strftime('%d') }}deg, {{ article.color }} 0%, transparent 30%) top / 100%, url("/images/damier.png") top / 25px;'> -->
    <h1 class="show-detail__title">{{ article.title }}</h1>
      {# author var #}
      {% if article.piece_authors %}
            <h2 class="show-detail__author">{% for author in article.piece_authors %}{% if loop.index > 1 %}/&#8203;{% endif %}{{ author }}{% endfor %}</h2>
      {% else %}
            <h2 class="show-detail__author">{{ article.piece_author }}</h2>
      {% endif %}

    {# event type var #}
    {% if article.event_type %}
    {{article.event_type}}
    {% endif %}

    <time>
      <ul>
      {% for date in article.dates %}
        <li>
        {% if date.end_date %}
          {# When there is a start and an end date #}
          {% include "partials/article__daterange.html" %}
        {% else %}
          {# When there is a single date #}
          {% include "partials/article__singledate.html" %}
        {% endif %}
        {% if date.time %}
          {% with time = date.time %}
            {% include "partials/article__time.html" %}
          {% endwith %}
        {% endif %}
        </li>
      {% endfor %}
      </ul>
    </time>

    {# Article / show time #}
    {% with time = article.time %}
    {% include "partials/article__time.html" %}
    {% endwith %}

    <br>

    {% if article.price %}
      <br><p class="detail-prix">{{article.price}}</p>
    {% endif %}

      {% if article.subhead %}
          <p class="show-detail__subhead">{{ article.subhead }}</p>
      {% endif %}

      {% if article.length %}
        {% if article.in_default_lang %}
          <span class="length">durée: {{article.length}}</span>
        {% else %}
          <span class="length">length: {{article.length}}</span>
        {% endif %}
      {% endif %}

      {% if article.age %}
        {% if article.in_default_lang %}
          <p class="age">âge: {{article.age|safe}}</p>
        {% else %}
          <p class="age">age: {{article.age|safe}}</p>
        {% endif %}
      {% endif %}

      {% if article.partner_logo %}
      <div class="partner_logos">
        {% if article.partner_logo is string %}
          <img class="partner_logo" src="{{ article.partner_logo }}">
        {% else %}
          {% for logo in article.partner_logo %}
            <img class="partner_logo" src="{{ logo }}">
          {% endfor %}
        {% endif %}
      </div>
      {% endif %}

      {# reservation var #}
      {% if article.reservation_link %}
        <a class="reservation-link" href="{{article.reservation_link}}" style="background-color: {{article.color}} ">{% if article.lang == 'en' %}Make reservation{% else %}Réserver{% endif %}</a>
        <!-- <a class="reservation-link" href="{{article.reservation_link}}" style="background:  linear-gradient(to top right, {{article.color}} 0%, transparent 70%);">{% if article.lang == 'en' %}Make reservation{% else %}Réserver{% endif %}</a> -->
      {% endif %}
      {% if article.translations %}
        {% import 'translations.html' as translations with context %}
        {{ translations.translations_for(article) }}
      {% endif %}

      {% if article.key_image_detail_body %}
        <p class="show-detail__image"><img {% if article.key_image_detail_body|processable_image %}class="image-process-responsive"{% endif %} src="/images/{{ article.key_image_detail_body }}" alt="Main image for {{ article.title }}"></p>
      {% endif %}



  </header>

  <div class="show-detail__body">
      <div class="photo"> </div>
      {{ article.content }}
  </div>

</article>

{% endblock %}