{% 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>Véhicules</span></li>
        </ul>
        <!-- END BREADCRUMB -->
    </div>

    <br/>

    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption">
                <i class="fa fa-car fa-lg font-green"></i>
                <span class="caption-subject bold uppercase">Véhicules</span>
                <span class="caption-helper">Rechercher et lister</span>
            </div>
            <div class="actions hidden-print">
                {% if app.user.aDroit('vehicule_ajout') %}
                <a href="{{ path('vehicule_new') }}" class="btn white hidden-print" id="btn_ajout_vehicule"><i class="fa fa-plus"></i> Nouveau véhicule</a>
                {% endif %}
                <button class="btn white" onClick="javascript:window.print();"><i class="fa fa-print"></i> Imprimer</button>
                <button class="btn white" onClick="exportTableToExcel('vehicules', 'VEHICULES')"><i class="fa fa-download"></i> Exporter</button>
            </div>
        </div>
        <div class="portlet-body">
            <!-- Filters toolbar -->
            <div class="ka-toolbar hidden-print">
                <div class="toolbar-left" style="flex:1 1 520px; min-width:320px;">
                    <div class="input-icon" style="width:100%;">
                        <i class="fa fa-search font-red"></i>
                        <input type="text" class="form-control" name="motcles" id="motcles" autocomplete="off" placeholder="Rechercher par N° châssis, immatr., client…">
                    </div>
                </div>
            </div>

            <hr class="ka-section-sep" />

            <div class="table-responsive">
                <table class="table table-striped table-hover ka-table-tight" id="vehicules">
                    <thead>
                        <tr>
                            <th>PHOTO</th>
                            <th>N° CHÂSSIS</th>
                            <th>MARQUE / MODÈLE</th>
                            <th>IMMATR.</th>
                            <th>CLIENT</th>
                            <th class="text-right hidden-print">ACTIONS</th>
                        </tr>
                    </thead>
                    <tbody id="vehicules-liste"></tbody>
                </table>
                <!-- Empty state -->
                <div id="vehicules-empty-hint" class="ka-empty-state" style="display:none">
                    <div style="font-size:36px;color:#9aa0a6;line-height:1;margin-bottom:6px;"><i class="fa fa-car" aria-hidden="true"></i></div>
                    <h4 style="margin-top:0;">Aucun véhicule trouvé</h4>
                    <p class="ka-muted">Modifiez votre recherche pour trouver un véhicule.</p>
                    {% if app.user.aDroit('vehicule_ajout') %}
                    <a href="{{ path('vehicule_new') }}" class="btn btn-sm green"><i class="fa fa-plus"></i> Nouveau véhicule</a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('assets/global/scripts/vehicules.js') ~ '?' ~ random() }}" type="text/javascript"></script>
{% endblock %}