{% extends "base.html" %}

 {% block header %}
 
 <header>
  <section class='hero has-text-centered is-info has-bg-img'>
      <div class="hero-head mx-5">
        <div class="level mt-4">
          <div class="level-left">
            
            
          </div>
          <div class="level-right mt-3 is-hidden-touch">
            <div class="level-item">
              
              <div class="tags colums is-vcentered">
              {% for tag in page.taxonomies.Categorie %}
                       {% set tag_permalink = get_taxonomy_url(kind="Categorie", name=tag) %}
                <span class="tag is-info is-light is-large mr-4"><a href="{{tag_permalink}}">{{tag}}</a></span>
                {% endfor %}
              </div>              
            </div>
        </div>

      </div>
      <div class="hero-body  container has-text-centered">
        <p class="title is-size-1-desktop is-size-3-mobile is-uppercase">{{ page.title }}</p>
        
      </div>
      
      
      <div class="hero-foot mb-5 mx-5 content">
        <div class="level">
          <div class="level-left">
            <div class="level-item has-text-left">
              <time datetime="2023-01-20T00:00:00Z">
                <p class="mb-2 subtitle is-size-5-desktop is-size-7-mobile">📅&nbsp;&nbsp;Article publié le <strong>{{page.date | date(format="%d %B %Y", locale="fr_FR")}}</strong></p>
              </time>
            </div>
          </div>
          <div class="level-right">
            <div class="level-item has-text-right">
              <div>
                <p class="mb-2 subtitle is-size-5-desktop is-size-7-mobile">🕑&nbsp;&nbsp;Environ <strong>{{ page.reading_time }} minutes</strong> de lecture
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      
    </div>
  </section>
</header>
{% endblock %}


{% block content %}

{% if page.extra.info %}
<div class="notification {{page.extra.info_type}} is-light">
{{ page.extra.info }}
</div>
{% endif %}

<div class="content">
{{ page.content | safe }}
</div>

<aside class="container level my-5">
        <div class="level-left">
          {% if page.higher %}
          <div class="level-item">
            <a class="button is-link is-light is-medium has-text-weight-bold" href="{{ page.higher.permalink }}">{{ page.higher.title }}</a>
          </div>
           {% endif %}
        </div>
        <div class="level-right">
         {% if page.lower %}
          <div class="level-item">
            <a class="button is-link is-light is-medium has-text-weight-bold" href="{{ page.lower.permalink }}">{{ page.lower.title }}</a>
          </div>
           {% endif %}
        </div>
</aside>
{% endblock content %}