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

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

{% block body %}
    <h1><a href="{{ path('card.expansionlist', {id: card.id })}}">{{ card.name }}</a> - <a href="{{ path('expansion.cardlist', {id: expansion.id })}}">{{ expansion.name }}</a></h1>
    <div class="row align-items-center">
        <div class="col-auto text-center">
        <img src="{{ cardArt }}" alt="{{ card.name }}" class="img-fluid mb-3 card">
        </div>
        <div class="col">
            {{ render_chart(chart,{'class': 'price-chart'}) }}
        </div>
    </div>
    {{ component('table', {headers: headerstable, rows: prices, addPaginationRender: addPaginationRender}) }}

{% endblock %}