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

{% set title = 'app.title.vehicle_file'|trans %}

{% block stylesheets %}
    <style>
        .nav-link.active {
            background-color: #17a2b8 !important;
        }
        a.nav-link {
            color: #17a2b8;
        }
    </style>
{% endblock %}

{% block body %}
    <h1>
        <a href="{{ path('app_vehicle_list') }}" class="btn btn-sm btn-info"><span class="fas fa-fw fa-chevron-left"></span></a>
        {{ title }}
    </h1>


    <ul class="nav nav-pills" id="vehicleTabs" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="informations-tab" data-toggle="tab" href="#informations" role="tab" aria-controls="home" aria-selected="true">{{ 'app.label.informations'|trans }}</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="photos-tab" data-toggle="tab" href="#photos" role="tab" aria-controls="profile" aria-selected="false">{{ 'app.text.photos'|trans }}</a>
        </li>
    </ul>
    {# Informations #}
    <div class="tab-content" id="vehicleTabsContent">

    <table class="table table-borderedtab-pane fade show active" id="informations" role="tabpanel" aria-labelledby="informations-tab">
        <tbody>

        <tr>
            <th class="active" colspan="3" style="border-right: none;">
                <img src="{{ absolute_url(asset('img/brands/' ~ vehicle.brandName|lower ~ '.png' )) }}" width="55px"/> {{ vehicle.brandName }} {{ vehicle.modelName }} {{ vehicle.versionName }}
            </th>
            <th class="text-right" style="border-left: none;">
                <a href="{{ path('app_vehicle_renault_poster', {'id': vehicle.id}) }}" class="btn btn-sm btn-info"><span class="fas fa-fw fa-globe"></span><img src="{{ absolute_url(asset('img/brands/renault.png' )) }}" width="35px"/>{{ 'app.action.renaultPoster'|trans }}</a>
                <a href="{{ path('app_vehicle_kiosk', {'id': vehicle.id}) }}" class="btn btn-sm btn-info"><span class="fas fa-fw fa-globe"></span> {{ 'app.action.kiosk'|trans }}</a>
                <a href="{{ path('app_vehicle_edit', {'id': vehicle.id}) }}" class="btn btn-sm btn-warning"><span class="fas fa-fw fa-edit"></span> {{ 'app.action.edit'|trans }}</a>
                <a href="{{ path('convert2imgviapdf_vehicule', {'id': vehicle.id}) }}" class="btn btn-sm btn-primary"><span class="fas fa-fw fa-edit"></span> {{ 'app.action.convert2img'|trans }}</a>
                <a href="{{ path('convert_vehicule', {'id': vehicle.id}) }}" class="btn btn-sm btn-secondary"><span class="fas fa-fw fa-edit"></span> {{ 'app.action.convert2c'|trans }}</a>
                <a href="{{ path('createimg_vehicule', {'id': vehicle.id}) }}" class="btn btn-sm btn-danger"><span class="fas fa-fw fa-edit"></span> {{ 'app.action.createimg'|trans }}</a>
            </th>
        </tr>

        <tr class="table-info text-center">
            <th colspan="4">{{ 'app.label.identification'|trans }}</th>
        </tr>
        <tr>
            <th class="active">N° dossier</th>
            <td>{{ vehicle.fileNumber }}</td>
            <th class="active">{{ 'app.label.type'|trans }}</th>
            <td>{{ vehicle.type }}</td>
        </tr>
        <tr>
            <th class="active">{{ 'app.label.vin'|trans }}</th>
            <td>{{ vehicle.vin }}</td>
            <th class="active">{{ 'app.label.licensePlate'|trans }}</th>
            <td>{{ vehicle.licensePlate }}</td>
        </tr>

        <tr class="table-info text-center">
            <td colspan="4"><img src="{{ absolute_url(asset('tabletteImg/' ~ vehicle.id ~ '.png' )) }}"></td>
        </tr>
        </tbody>
    </table>
    </div>


{% endblock %}