{% extends "layout.html" %}

{% set page = request.path %}
{% set match = match_name(page) %}
{% set image = "img/"+page[1:]+".jpg" %}
{% set og_image = url_for('static', filename=image) %}

{% block banner %}
<div class="barrins-codex-banner">
    <div class="barrins-codex-banner-img">
        {{ url_for('static', filename=image) }}
    </div>
</div>
{% endblock %}

{% block article %}
<article class="col-8 mx-auto mt-4">
    <div class="d-flex flex-column align-item-center justify-content-around">
        <!-- Analyse -->
        <div class="col-12 pe-2">
            <p>{% block ogdesc %}{% block analyse %}🚧 Analyse en cours de rédaction 🚧{% endblock %}{% endblock %}</p>
        </div>
        {{ separateur() }}
        <!-- Vidéo -->
        <div class="py-2">
            <div class="ratio ratio-16x9 col-12 mt-2">
              <iframe title="Decktech publiée par les Chroniques du Commander" src="{{ youtube }}?rel=0" allowfullscreen>
              </iframe>
            </div>
            <div class="col-12 text-center">
                <p><i>
                    Match joué le {{ date }} par {{ joueur1 }} et {{ joueur2 }}
                </i></p>
            </div>
        </div>
        {{ separateur() }}
        <!-- Liens -->
        <div class="row py-3 d-flex flex-wrap justify-content-around">
            <div class="col-10 col-md-3 align-self-center">
                {% block pilote1 %}{% endblock %}
            </div>
            <div class="col-10 col-md-3 align-self-center">
                {% block deck1 %}{% endblock %}
            </div>
            <div class="col-10 col-md-3 align-self-center">
                {% block deck2 %}{% endblock %}
            </div>
            <div class="col-10 col-md-3 align-self-center">
                {% block pilote2 %}{% endblock %}
            </div>
        </div>
    </div>
</article>
{% endblock %}
