{% extends "layout.html" %}

{% set page = request.path[:-5] %}
{% set carte = deck_name(page) %}

{% block banner %}
<div class="banner_container col-12">
    <img src="{% block banner_img %}{{ img_crop(carte) }}{% endblock %}"
        alt="Bannière" class="opacity-75"
        style="width:100%;height:276px;object-fit:cover;object-position:50% 15%;" >
    <div class="centered">
        <h1 class="fs-1 text-capitalize">{{ carte }}</h1>
    </div>
</div>
{% endblock %}

{% block article %}
<article class="col-8 mx-auto mt-4">
    <div class="d-flex text-direction-row align-item-center justify-content-around">
        <div class="col-8 pe-2">
            <p>{% block ogdesc %}{% block first_paragraph %}{% endblock %}{% endblock %}</p>
            <p>{% block second_paragraph %}{% endblock %}</p>
            <p>{% block third_paragraph %}{% endblock %}</p>
        </div>
        <div class="col-4 d-flex flex-column">
            {% block commander %}<img src="{{ img_card(carte, firstprint=False) }}" alt="{{ carte }}" width="100%" />{% endblock %}
            {% block liste %}<a class="btn btn-secondary mt-4" role="button" target="_blank"
                href="{% block lien %}{% endblock %}">Decklist</a>{% endblock %}
        </div>
    </div>
    <div style="clear:both;"></div>
    <div class="w-100 border-bottom border-secondary border-opacity-50 border-2 mt-3"></div>
</article>

{% block friendsforever %}{% endblock %}
{% block combos %}{% endblock %}
{% block decktech %}{% endblock %}

<div class="col-12 bg-header py-4 mt-1 mb-2">
    <div class="col-8 ms-auto me-auto">
        <h2>Voir les parties de ce deck</h2>
    </div>
</div>
<article class="col-8 mx-auto">
    {% block matchs %}{% endblock %}
    <div style="clear:both;"></div>
    <div class="w-100 border-bottom border-secondary border-opacity-50 border-2 mt-4"></div>
</article>

<div class="col-12 bg-header py-4 mt-1 mb-2">
    <div class="col-8 ms-auto me-auto">
        <h2>Retrouver les pilotes de ce deck</h2>
    </div>
</div>
<article class="col-8 mx-auto mb-4 d-flex flex-wrap justify-content-around">
    {% block pilotes %}{% endblock %}
    <div style="clear:both;"></div>
</article>
{% endblock %}
