{% extends 'AppBundle:Documents:v2\\standard_layout.html.twig' %}

{% import 'AppBundle:Documents:v2\\Import\\group.html.twig' as groupF %}
{% import 'AppBundle:Documents:v2\\Import\\vehicle.html.twig' as vehicleF %}

{% block signature %}{% endblock signature %}
{% block footer %}{% endblock footer %}

{% block header %}
     <table class="w-100 b-black">
        <tr><td class="h-20"></td></tr>
        <tr>
            <td class="w-4"></td>
            <td style="width: 12%;">
                {{ groupF.getLogo(group, {}) }}
            </td>
            <td class="w-80 ta-right">
                <p class="lh-18 fw-700 t-white" style="font-size: 20px;">{{ vehicleF.getVo(vehicle, {'previousValue': 'n° :'}) }} - {{ vehicleF.getLicenseNumber(vehicle, {}) }} - {{ vehicleF.getPriceSeller(vehicle, {'beforeValue': 'Ref :', 'afterValue': '', 'localizeCurrency': false})|trim|slice(0, 3) }}</p>
            </td>
            <td class="w-4"></td>
        </tr>
    </table>
{% endblock header %}

{% block main_title %}
    <table class="w-100 b-black">
        <tr><td class="h-20"></td></tr>
        <tr>
            <td class="w-100 ta-center">
                <h1 class="fs-60 lh-40 fw-700 tt-u" style="color: #ed2121;">{{ vehicleF.getBrand(vehicle, {'truncate': 20}) }} {{ vehicleF.getModel(vehicle, {'truncate': 40}) }}</h1>
                <table><tr><td class="h-10"></td></tr></table>
                <h1 class="lh-40 fw-700 tt-u" style="font-size: 36px; color: #ed2121;">{{ vehicleF.getVersion(vehicle, {'truncate': 40}) }}</h1>
            </td>
        </tr>
        <tr><td class="h-20"></td></tr>
    </table>
{% endblock main_title %}

{% block content %}

    <table class="w-100">
        <tr>
            <td class="w-6"></td>
            <td class="w-88">
                <table class="w-100">
                    <tr><td class="h-20"></td></tr>
                    <tr>
                        <td class="w-30 ta-center">
                            <p class="lh-18 fw-400 t-black" style="font-size: 18px;">Date de première<br>mise en circulation</p>
                            <table><tr><td class="h-10"></td></tr></table>
                            <h6 class="lh-60 fw-700 t-black h-60" style="font-size: 36px; background-color: #cccccc;">{{ vehicleF.getDateOfDistribution(vehicle, {'timezone': timezone}) }}</h6>
                        </td>
                        <td style="width: 5%;"></td>
                        <td class="w-30 ta-center">
                            <p class="lh-18 fw-400 t-black" style="font-size: 18px;">Kilométrage<br>({{ vehicleF.getDistanceTraveledWarranty(vehicle, {}) }})</p>
                            <table><tr><td class="h-10"></td></tr></table>
                            <h6 class="lh-60 fw-700 t-black h-60" style="font-size: 36px; background-color: #cccccc;">{{ vehicleF.getDistanceTraveled(vehicle, {}) }}</h6>
                        </td>
                        <td style="width: 5%;"></td>
                        <td class="w-30 ta-center">
                            <p class="lh-18 fw-400 t-black" style="font-size: 18px;">&nbsp;<br>Energie</p>
                            <table><tr><td class="h-10"></td></tr></table>
                            {% set energy = vehicleF.getEnergy(vehicle, {}) %}
                            {% set energyFontSize = 36 %}
                            {% if energy|trim|length > 20 %}
                                {% set energyFontSize = 12 %}
                            {% elseif energy|trim|length > 15 %}
                                {% set energyFontSize = 24 %}
                            {% endif %}
                            <h6 class="lh-60 fw-700 t-black h-60" style="font-size: {{ energyFontSize }}px; background-color: #cccccc;">{{ energy }}</h6>
                        </td>
                    </tr>
                </table>
                   
                <table class="w-100">
                    <tr><td class="h-20"></td></tr>
                    <tr class="w-100">
                        <td style="width: 6%;"></td>
                        <td class="w-40">
                            <h6 class="fs-26 lh-32 fw-400 t-black"><span class="fw-700">Boîte : </span>{{ vehicleF.getGearbox(vehicle, {}) }}</h6>
                            <h6 class="fs-26 lh-32 fw-400 t-black"><span class="fw-700">Puissance : </span>{{ vehicleF.getTaxHorsePower(vehicle, {}) }} ({{ vehicleF.getHorsePower(vehicle, {}) }})</h6>
                        </td>
                        <td style="width: 8%;"></td>
                        <td class="w-40">
                            <h6 class="fs-26 lh-32 fw-400 t-black"><span class="fw-700">Couleur : </span>{{ vehicleF.getColor(vehicle, {}) }}</h6>
                            <h6 class="fs-26 lh-32 fw-400 t-black"><span class="fw-700">Nombre de places : </span>{{ vehicleF.getSeats(vehicle, {}) }}</h6>
                        </td>
                        <td style="width: 6%;"></td>
                    </tr>
                </table>
                
                <!-- equipement title -->
                
                <table class="w-100">
                    <tr><td class="h-30"></td></tr>
                    <tr>
                        <td><h5 class="fs-26 lh-14 fw-700" style="color: #ed2121;">Equipement&nbsp;et&nbsp;Options</h5></td>
                        <td class="w-2"></td>
                        <td class="w-100">
                            <table class="w-100">
                                <tr><td class="w-100 h-6"></td></tr>
                                <tr><td class="w-100" style="border-top:solid 2px #ed2121;"></td></tr>
                            </table>
                        </td>
                    </tr>
                </table>
                 
                <!-- equipement -->
                
                <table class="w-100">
                    <tr><td class="h-20"></td></tr>
                    <tr>
                        <td class="w-100 ta-center">
                            {% set maxElt = 10 %}
                            {{ vehicleF.getEquipmentOptionalList(vehicle, {
                                'truncate': 60,
                                'maxElt': maxElt,
                                'previousValue': '<p class="fs-26 fw-700 t-black" style="line-height: 28px;">',
                                'afterValue': '</p>'
                            }) }}

                            {{ vehicleF.getEquipmentStandardList(vehicle, {
                                'truncate': 60,
                                'maxElt': (maxElt - vehicleF.getNbEquipmentOptional(vehicle)|trim),
                                'previousValue': '<p class="fs-26 fw-700 t-black" style="line-height: 28px;">',
                                'afterValue': '</p>'
                            }) }}
                        </td>
                    </tr>
                </table>

                <!-- garantie -->

                    <table class="w-100">
                        <tr><td class="h-30"></td></tr>
                        <tr>
                            <td class="w-100 ta-center">
                                <h1 class="lh-60 fw-700 t-white b-black" style="height: 60px; font-size: 24px;">Garantie : {{ vehicleF.getWarranty(vehicle, {'truncate': 40}) }}</h1>
                                {% block warrantyExtension %}
                                    <h1 class="lh-32 fw-700 t-white b-black" style="height: 60px; font-size: 40px;">Extension possible jusqu'à 6 ans *</h1>
                                {% endblock %}
                            </td>
                        </tr>
                    </table>

            </td>
            <td class="w-6"></td>
        </tr>
    </table>
   
    <!-- conso -->

    {% if vehicleF.getExtraUrbanKmConsumption(vehicle, {}) is not empty %}
        <table class="w-100">
            <tr><td class="h-20"></td></tr>
            <tr>
                <td class="w-100">
                    <table class="w-100">
                        <tr>
                            <td class="h-40 w-2" style="background-color: #cccccc;"></td>
                            <td class="h-40 w-58" style="background-color: #cccccc;"></td>
                            <td class="h-40 w-4" style="background-color: #cccccc;"><h6 class="fs-26 lh-40 fw-800 t-black">{{ vehicleF.getExtraUrbanKmConsumptionLetter(vehicle, {}) }}</h6></td><td class="h-40 arrow-left-grey"></td>
                            <td class="h-40 arrow-right-grey"></td><td class="h-40 w-4" style="background-color: #cccccc;"><h6 class="fs-26 lh-40 fw-800 t-black">{{ vehicleF.getExtraUrbanKmConsumptionLetter(vehicle, {}) }}</h6></td>
                            <td class="h-40" style="width: 28%; background-color: #cccccc;"></td>
                        </tr>
                        <tr><td class="h-6"></td></tr>
                    </table>
                </td>
            </tr>
        </table>
    {% endif %}
                
    <table class="w-100">
        <tr>
            <td class="w-6"></td>
            <td class="w-88">
                <table class="w-100">
                    <tr><td class="h-10"></td></tr>
                    <tr class="w-100">
                        <td style="width: 6%;"></td>
                        <td style="width: 49%;">
                            <h6 class="fw-700 t-black" style="font-size: 22px; line-height: 24px;"><span class="fw-400">Taux de CO² : </span>{{ vehicleF.getExtraUrbanKmConsumption(vehicle, {}) }}</h6>
                            <h6 class="fw-700 t-black" style="font-size: 22px; line-height: 24px;"><span class="fw-400">Consommation mixte : </span>{{ vehicleF.getMixteConsumption(vehicle, {}) }}</h6>
                        </td>
                        <td style="width: 39%;">
                            <h6 class="fw-700 t-black" style="font-size: 20px;"><span class="fw-400">Urbaine : </span>{{ vehicleF.getUrbanConsumption(vehicle, {}) }}</h6>
                            <h6 class="fw-700 t-black" style="font-size: 20px;"><span class="fw-400">Extra Urbaine : </span>{{ vehicleF.getExtraUrbanConsumption(vehicle, {}) }}</h6>
                        </td>
                        <td style="width: 6%;"></td>
                    </tr>
                </table>
                
                <!-- price -->
                 
                <table class="w-100">
                    <tr><td class="h-20"></td></tr>
                    <tr>
                        <td class="w-10"></td>
                        <td class="w-80 b-black" style="height: 120px;"><h3 class="fs-90 fw-700 ta-center t-white" style="line-height: 100px;">{{ vehicleF.getPricePublic(vehicle, {}) }}</h3></td>
                        <td class="w-10"></td>
                    </tr>
                </table>
                 {% block shopCondition %}
                    <table class="w-100">
                        <tr><td class="h-20"></td></tr>
                        <tr><td class="w-100"><h3 class="fs-14 lh-14 fw-700 ta-center t-black">*Voir conditions en magasin</h3></td></tr>
                        <tr><td class="h-20"></td></tr>
                    </table>
                {% endblock %}
            </td>
            <td class="w-6"></td>
        </tr>
    </table>
{% endblock content %}