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

{% block title %}Les produits{% endblock %}
{% form_theme form 'bootstrap_4_horizontal_layout.html.twig' %}
{% block title_page %}Les produits{% endblock %}

{% block container_start %}

    {% if is_granted("ROLE_SEARCH_PRODUCT") %}
        {{form_start(form)}}
        <div class="card">
            <div class="card-body">
                <div class="row">

                    <div class="col-1"></div>

                    <div class="col-3">
                        {{ form_row(form.name, { 'attr': {'placeholder': "Nom"} }) }}
                    </div>
                    <div class="col-3">
                        {{ form_row(form.description, { 'attr': {'placeholder': "Description"} }) }}
                    </div>
                    <div class="col-2">
                        {{ form_row(form.reference, { 'attr': {'placeholder': "Référence"} }) }}
                    </div>
                    <div class="col-2">
                        <button class='btn btn-primary'>Rechercher</button>
                    </div>

                </div>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->
        {{form_end(form)}}
    {% endif %}


    <div class="card">
        <div class="card-header">
            {% if is_granted("ROLE_CREATE_PRODUCT") %}
                <div class="card-tools">
                    <div class="input-group input-group-sm" style="width: 150px;">
                        <div class="float-right bouton_choix_haut">
                            <a class="btn btn-success pull-right " href="{{ path('product_follow_new') }}" role="button">Ajouter</a>
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>
        <!-- /.card-header -->
        <div class="card-body table-responsive p-0">
            <table class="table table-sm">
                <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col"></th>
                    <th scope="col">Création</th>
                    <th scope="col">MAJ</th>
                    <th scope="col">Référence</th>
                    <th scope="col">Préfixe</th>
                    <th scope="col">Nom</th>
                    <th scope="col">Description</th>
                    <th></th>
                </tr>
                </thead>
                <tbody id="list-sites">
                {% set i = 1 %}
                {% for product in products %}

                    <tr>
                        <th scope="row">{{ product.id }}</th>
                        <th scope="row">
                            {% if product.filename %}
                                <img src="{{ vich_uploader_asset(product, 'imageFile') | imagine_filter('img_list') }}" alt="image-product" style="height: 30px; width: auto;" >
                            {% else %}
                                <img src="{{ asset('dist/img/image-non-disponible.png')| imagine_filter('img_list') }}" alt="Image-non-disponible" class="brand-image img-circle elevation-3" style="height: 30px; width: auto;">
                            {% endif %}
                        </th>
                        <th>{{ product.createdAt|date("d/m/Y") }}</th>
                        <th>{{ product.updatedAt|date("d/m/Y") }}</th>
                        <th>{{ product.reference}}</th>
                        <th>{{ product.prefixReference}}</th>
                        <th>{{ product.name }}</th>
                        <th>{{ product.description }}</th>
                        <th>
                            {% if is_granted("ROLE_VIEW_PRODUCT") %}
                                <a href="{{ path('product_view', {'id': product.id}) }}" style="color:black; margin-right:10px;"><i class="far fa-eye"></i></a>
                            {% endif %}
                            {% if is_granted("ROLE_EDIT_PRODUCT") %}
                                <a href="{{ path('product_edit', {'id': product.id}) }}" style="color:black; margin-right:10px;"><i class="far fa-edit"></i></a>
                            {% endif %}
                        </th>
                    </tr>
                    {% set i = i + 1 %}
                {% endfor %}

                </tbody>
            </table>
        </div>
        <!-- /.card-body -->
        <div class="card-footer navigation">
            {{ knp_pagination_render(products, null, {}, {
                'align': 'right',
            }) }}
        </div>
        <!-- /.card-footer -->
    </div>
    <!-- /.card -->


{% endblock %}