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

{% block title %}{{ product.name}} - Ecommerce{% endblock %}

{% block body %}
<div>
    <h1>{{ product.name }}</h1>
    
    <div class="d-flex">
        <img style="width: 20rem;" src="{{ asset('build/images/' ~ product.image) }}" alt="{{ product.name }}">
        <table class="table">
            <tbody>
                <tr>
                    <th>Nom</th>
                    <td>{{ product.name }}</td>
                </tr>
                <tr>
                    <th>Prix</th>
                    <td>{{ product.price }} €</td>
                </tr>
                <tr>
                    <th>En stock</th>
                    <td>{{ product.stock }}</td>
                </tr>
                <tr>
                    <th>Description</th>
                    <td>{{ product.description }}</td>
                </tr>
                <tr>
                    <th><label for="quantity-select">Quantité :</label></th>
                    <td><select name="quantity-select" id="quantity-select" >
                            <option value="">--Choisissez une quantité--</option>
                            {% for i in 0..product.stock %}
                                <option value=i>{{ i }}</option>
                            {% endfor %}
                        </select>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="d-flex align-items-center justify-content-around">
    <form method="post" action="{{ path('app_add_cart', { idProduct : product.id }) }}">
						<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Ajouter au panier</button>
	</form>
        <a href="{{ path('app_catalog') }}"><button class="btn my-2 my-sm-0" type="submit">Retour au catalogue</button></a>
    </div>
</div>
{% endblock %}