{% extends '@CpCreationVitiCore/admin/base.html.twig' %}

{% block content %}
    <div class="panel panel-default">
        <div class="panel-heading">
            Depôts
            <div class="pull-right">
                <div class="btn-group">
                    <a href="{{ path('admin_depot_category_new') }}" type="button" class="btn btn-default btn-xs">
                        Ajouter
                    </a>
                </div>
            </div>
        </div>
        <table class="table table-striped">
            <thead>
            <tr>
                <th>#</th>
                <th>Nom</th>
                <th>Couleur</th>
                <th>Icône</th>
                <th>Position</th>
                <th>Slug</th>
                <th></th>
            </tr>
            </thead>
            <tbody>
                {% for item in items %}
                    <tr>
                        <td>{{ loop.index }}</td>
                        <td>{{ item.name }}</td>
                        <td>
                            {% if item.color %}
                                <span style="display:inline-block; width:18px; height:18px; border-radius:999px; border:1px solid #ddd; background:{{ item.color }}; vertical-align:middle;"></span>
                                <span style="margin-left:8px;">{{ item.color }}</span>
                            {% else %}
                                <span class="text-muted">-</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if item.image %}
                                <img src="{{ asset(item.image.path) | imagine_filter('relative_widen_30_filter') }}" alt="{{ item.image.title ?: item.name }}" style="max-width:30px; max-height:30px;">
                            {% else %}
                                <span class="text-muted">-</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if loop.first == false %}
                                <a href="{{ path('admin_depot_category_move_up', {id : item.id}) }}"
                                   class="btn btn-default btn-xs" data-toggle="tooltip" title="Remonter la catégorie"><i
                                            class="fa fa-2x fa-arrow-up" aria-hidden="true"></i></a>
                            {% endif %}
                            {% if loop.last == false %}
                                <a href="{{ path('admin_depot_category_move_down', {id : item.id}) }}"
                                   class=" btn btn-default btn-xs" data-toggle="tooltip" title="Descendre la catégorie"><i
                                            class="fa fa-2x fa-arrow-down" aria-hidden="true"></i></a>
                            {% endif %}
                        </td>
                        <td>{{ item.slug }}</td>
                        <td>
                            <a href="{{ path('admin_depot_category_edit', { id: item.id}) }}" class="btn btn-info btn-xs"
                               data-title="Editer la catégorie"><i
                                        class="fas fa-edit fa-2x" aria-hidden="true"></i></a>
                                <a href="{{ path('admin_depot_category_delete', { id: item.id }) }}"
                                   class="confirm-deletable btn btn-danger btn-xs"
                                   data-title="Supprimer la categorie {{ item.name }}"><i class="fa fa-2x fa-trash"
                                                                                        aria-hidden="true"></i></a>
                        </td>
                    </tr>
                {% endfor %}

            </tbody>
        </table>
    </div>
{% endblock %}
