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

{% block body %}

    <!-- BEGIN PAGE BAR -->
    <div class="page-bar">
        
        <!-- BEGIN BREADCRUMB -->
        <ul class="page-breadcrumb">
            <li>
                <a href="{{ path('homepage') }}">Accueil</a>
                <i class="fa fa-circle"></i>
            </li>
            <li>
                <span>Marques</span>
            </li>
        </ul>
        <!-- END BREADCRUMB -->
    </div>

    <br/>

    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption">
                <i class="fa fa-file-text-o fa-lg font-green"></i>
                <span class="caption-subject bold uppercase">Marques</span>
                <span class="caption-helper hidden-print">Lister</span></div>

                <div class="actions hidden-print">
                    <a href="{{ path('marque_new') }}" class="btn white"><i class="fa fa-plus"></i> Ajouter</a>
                </div>
        </div>
        <div class="portlet-body">
            {% if marques|length > 0 %}
            <div class="table-responsive">

                <table class="table table-striped table-hover ka-table-tight">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Logo</th>
                            <th>Marque</th>
                            <th>Modèles</th>
                            <th class="hidden-print">ACTIONS</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for marque in marques %}
                        <tr>
                            <td><a href="{{ path('marque_show', { 'id': marque.id }) }}">{{ marque.id }}</a></td>
                            <td>
                                {% if marque.logo %}
                                    <img src="{{ asset('uploads/marques/logos/' ~ marque.logo) }}" alt="{{ marque.name }}" style="max-width: 60px; max-height: 40px; object-fit: contain;">
                                {% else %}
                                    <span class="text-muted"><i class="fa fa-image"></i></span>
                                {% endif %}
                            </td>
                            <td>{{ marque.name }}</td>
                            <td>{{ marque.modeles|length }}</td>
                            <td class='text-right hidden-print'>
                              <div class="btn-group pull-right">
                                <button class="btn btn-xs default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Actions <i class="fa fa-angle-down"></i></button>
                                <ul class="dropdown-menu pull-right">
                                  <li><a href="{{ path('marque_show', { 'id': marque.id }) }}"><i class="fa fa-mail-forward"></i> Afficher</a></li>
                                  <li><a href="{{ path('marque_edit', { 'id': marque.id }) }}"><i class="fa fa-edit"></i> Modifier</a></li>
                                  <li><a href="{{ path('marque_delete', { 'id': marque.id }) }}"><i class="fa fa-close"></i> Supprimer</a></li>
                                </ul>
                              </div>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
			</table>
		</div>
        <div class="text-center">{{ knp_pagination_render(marques) }}</div>
            {% else %}
            <div class="ka-empty-state" id="marques-empty-hint">
                <div style="font-size:36px;color:#9aa0a6;line-height:1;margin-bottom:6px;"><i class="fa fa-file-o"></i></div>
                <h4 style="margin-top:0;">Aucune marque trouvée</h4>
                <a href="{{ path('marque_new') }}" class="btn btn-sm green"><i class="fa fa-plus"></i> Ajouter</a>
            </div>
            {% endif %}
	</div>
</div>

{% endblock %}