{% extends 'admin/layout.html.twig' %}

{% block body %}

<h2 class="text-2xl font-bold">Chanfreins</h2> 

<section class="edgeshape-list mt-12">
    <h3 class="text-xl font-bold">Liste des chanfreins</h3>
    <table class="table-auto mt-12">
        <thead>
            <th class="px-12 text-left border-b border-gray-300">Image</th>
                <th class="px-12 text-left border-b border-gray-300">Nom</th>
                <th class="px-12 text-left border-b border-gray-300">Prix(Euros)</th>
                <th class="px-12 text-left border-b border-gray-300">Action</th>
            </tr>
        </thead>
        <tbody>
            {% for edgeShape in edgeShapes %}
                
                    <tr>
                        <th class="px-12 py-2 border-b border-gray-300"><img src="{{ asset('uploads/images/' ~ edgeShape.imageFileName) }}" alt="edgeShapeImage" width=50 ></th>
                        <th class="px-12 py-2 font-light text-sm text-left border-b border-gray-300">{{ edgeShape.name }}</th>
                        <th class="px-12 py-2 font-light text-sm text-left border-b border-gray-300">{{ edgeShape.price | format_currency('EUR') }}</th> 
                        <th class="px-12 py-2 border-b border-gray-300" >
                        <a href="{{ path('edgeshape_delete', {'id': edgeShape.id}) }}"><span class="material-symbols-outlined hover:text-red-400">delete</span></a></th>                       
                    </tr>
                
            {% endfor %}
        </tbody>
    </table>

    {# display navigation #}
    <div class="navigation">
        {{ knp_pagination_render(edgeShapes) }}
    </div>

</section>

<hr class="w-1/2 my-20 mx-auto"/>
<h3 class="text-xl font-bold">Mise à jour</h3>

<div class="grid grid-cols-2 my-10">
    <!-- add- edgeshape -->
    <section class="add-edgeshape border border-gray-200 p-4 rounded">
        <h4 class="text-lg font-bold">Ajouter un type de chanfrein</h4>

        {{ form_start(form) }}
        <div class="form-group my-2">
            <div class="w-[20%] inline-block">{{ form_label(form.imageFile) }}</div>
                {{ form_widget(form.imageFile) }}
            <div class="text-xs text-red-400">
                {{ form_errors(form.imageFile) }}
            </div>
        </div>
        <div class="form-group my-2">
            <div class="w-[20%] inline-block">{{ form_label(form.name) }}</div>
            {{ form_widget(form.name, {'attr':{'class': 'w-full md:w-48 h-10 text-xs border-slate-200 rounded bg-slate-100'}}) }}
            <div class="text-xs text-red-400">
                {{ form_errors(form.name) }}
            </div>
        </div>
        <div class="form-group my-2">
            <div class="w-[20%] inline-block">{{ form_label(form.price) }}</div>
            {{ form_widget(form.price, {'attr':{'class': 'w-full md:w-48 h-10 text-xs border-slate-200 rounded bg-slate-100'}}) }}
            <div class="text-xs text-red-400">
                {{ form_errors(form.price) }}
            </div>
        </div>

        <button type="submit" class="mt-5 px-2 py-1 bg-gray-400 hover:bg-gray-500 text-white shadow">Valider</button>
        {{ form_end(form) }}

    </section>
    <!-- add- edgeshape -->

    <section>
    </section>

</div>

{% endblock %}