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

{% block title %}
    {{ page_title }}
{% endblock %}

{% block nav %}
    {% embed 'nav.html.twig' %}{% endembed %}
{% endblock %}

{% block body %}
    <div class="container">
        <div class="row justify-content-center mt-5">
            <div class="col-lg-6 col-md-8 col-sm-10 col-12 px-4"> <!-- Ajout de px-4 pour un padding plus large -->
                <div class="card shadow-sm card-propose">
                    <div class="card-body">
                        <h2 class="card-title text-center">Ajouter un Nouveau Produit</h2>

                        {{ form_start(form) }}

                        <!-- Champ 'Marchandise' -->
                        <div class="form-group mb-3">
                            {{ form_row(form.goods) }}
                        </div>

                        <!-- Champ 'Description' -->
                        <div class="form-group mb-3">
                            {{ form_row(form.description) }}
                        </div>

                        <!-- Champ 'Prix à l'unité' -->
                        <div class="form-group mb-3">
                            {{ form_row(form.price) }}
                        </div>

                        <!-- Champ 'Quantité' -->
                        <div class="form-group mb-3">
                            {{ form_row(form.quantity) }}
                        </div>

                        <!-- Choix du type de marchandise -->
                        <div class="form-group mb-3">
                            {{ form_row(form.gafType) }}
                        </div>

                        <!-- Champ 'Image du Produit' -->
                        <div class="form-group mb-3">
                            {{ form_row(form.imagePath) }}
                        </div>

                        <!-- Aperçu de l'image -->
                        <div class="form-group mb-3">
                            <div class="good" id="filePreviewDiv" hidden>
                                <img id="filePreview" class="img-fluid rounded" src="">
                            </div>
                        </div>

                        <!-- Bouton de soumission -->
                        <div class="form-group text-center">
                            {{ form_row(form.Enregistrer) }}
                        </div>

                        {{ form_end(form) }}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block bodyScript %}
    {{ encore_entry_script_tags('fileHandler') }}
{% endblock %}