{% extends 'base.html.twig' %}

{% block title %}{{ 'app.card.details'|trans }} - {{ card.name }} - {{ expansion.name }} - {{ 'app.title'|trans }}{% endblock %}
{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('styles/expansionCardListDetail.css') }}">
{% endblock %}

{% block body %}
    <div class="card-header-section">
        <div class="badges-container">
            <a href="{{ path('card.expansionlist', {id: card.id })}}" class="card-badge text-decoration-none">
                <i class="bi bi-file-minus-fill me-2"></i><span class="cardName">{{ card.name }}</span>
            </a>
            <a href="{{ path('expansion.cardlist', {id: expansion.id })}}" class="card-badge text-decoration-none">
                <i class="bi bi-box-seam-fill me-2"></i><span class="expansionName">{{ expansion.name }}</span>
            </a>
        </div>
    </div>
    <div class="row align-items-center mb-3">
            <div class="col-12 col-md-auto text-center d-print-none">
                <div class="position-relative d-inline-block my-4">
                    <img src="{{ cardArt }}" alt="{{ card.name }}" class="img-fluid bigmtgcard" onclick="flipCard()" id="cardImage" data-front="{{ cardArt }}" data-back="{{ cardArtBack|default('') }}" data-showing="front">
                    {% if cardArtBack %}
                        <button class="btn btn-sm btn-outline-primary position-absolute btn-light rounded-circle" onclick="flipCard()" id="flipBtn" >
                            <i class="bi bi-arrow-clockwise h4"></i>
                        </button>
                    {% endif %}
                </div>
            </div>
        <div class="col">
            {{ render_chart(chart,{'class': 'price-chart'}) }}
        </div>
    </div>

    <div class="d-flex flex-wrap align-items-center justify-content-start gap-2 mb-4 d-none d-md-flex">
        {{ component('button', {link: "https://www.cardmarket.com/en/Magic/Products?idProduct="~cardId, text: 'app.card.buy_normal'|trans}) }}
        {{ component('button', {link: "https://www.cardmarket.com/en/Magic/Products?isFoil=Y&idProduct="~cardId, text: 'app.card.buy_foil'|trans}) }}
        {{ component('button', {btnType: "btn-info", link: scryfalluri, text: "Scryfall"}) }}
        {{ component('button', {btnType: "btn-danger", link: gathereruri, text: "Gatherer"}) }}
    </div>
    <div class="d-flex flex-column align-items-center gap-2 d-md-none mb-4">
        <div class="d-flex flex-column gap-2">
            {{ component('button', {link: "https://www.cardmarket.com/en/Magic/Products?idProduct="~cardId, text: 'app.card.buy_normal'|trans, class: 'w-100'}) }}
            {{ component('button', {link: "https://www.cardmarket.com/en/Magic/Products?isFoil=Y&idProduct="~cardId, text: 'app.card.buy_foil'|trans, class: 'w-100'}) }}
        </div>
        <div class="d-flex justify-content-center gap-2 w-100">
            {{ component('button', {btnType: "btn-info", link: scryfalluri, text: "Scryfall", class: 'flex-fill'}) }}
            {{ component('button', {btnType: "btn-danger", link: gathereruri, text: "Gatherer", class: 'flex-fill'}) }}
        </div>
    </div>

    {{ component('table', {headers: headerstable, rows: prices, addPaginationRender: addPaginationRender, exporterPath: exporterPath, exporterParams: exporterParams}) }}

    
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {% if cardArtBack %}
    <script src="{{ asset('js/cardFlip.js') }}"></script>
    {% endif %}
{% endblock %}