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

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

{% block font %}{% endblock font%}

{% block style %}
        {{ parent() }}
        <style>
            html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,canvas,embed,output,ruby,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-family:'Arial', sans-serif;font-size:100%;vertical-align:baseline}table{border-collapse:collapse;border-spacing:0}table,tr,td{vertical-align:top}
            .table-border {
                border: solid 0.5px #333333;
            }
            .w-5 {
                width: 5%;
            }
            .fs-32 {
                font-size: 32px;
            }
            .pad-r-15 {
                padding-right: 15px;
            }
            .h-150 {
                height: 150px;
            }
            .w-12 {
                width: 12%;
            }
            .group-color {
                color: {{ color }};
            }
            .group-background-color {
                background-color: {{ color }};
            }
            .m-t-0 {
                margin-top: 0 !important;
            }
        </style>
 {% endblock style %}

{% block header %}
    <table class="w-100">
        <tr>
            <td class="w-40"><h6 class="fs-40 lh-32 fw-400 fw-b ta-left group-color">Réf. : {{ vehicleF.getReference(vehicle) }}</h6></td>
            <td class="w-60 ta-right">
                {% include 'AppBundle:Documents:v2\\Include\\Global\\image.html.twig' with {
                    'image': group.idGroupParameter.logo,
                    'containerImgWidth' : 300,
                    'containerImgHeight' : 200,
                    'extendClass': ' m-t-0'
                }
                %}
            </td>
        </tr>
    </table>
    <table class="w-100">
        <tr><td class="h-20"></td></tr>
        <tr>
            <td class="w-100">
                <h1 class="fs-58 lh-40 fw-800 tt-u t-black ta-center">{{ groupF.getCorporateName(group)}}</h1>
            </td>
        </tr>
        <tr><td class="h-20"></td></tr>
        <tr>
            <td class="w-100">
                <h6 class="fs-32 lh-24 fw-800 t-black ta-center">Réf. Interne : {{ vehicleF.getInternalReference(vehicle) }}</h6>
            </td>
        </tr>
    </table>
    <tr><td class="h-40"></td></tr>
{% endblock %}

{% block main_title %}{% endblock main_title %}

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

{% block content %}
    <table class="w-100">
        <tr><td class="h-10"></td></tr>
        <tr>
            <td class="w-100 ta-center fs-40 lh-60 fw-b group-background-color t-white">
                {% set value = vehicle.brand  ~ ' ' ~ vehicle.model %}
                {{ globalF.truncateValue(value, {'truncate': 30}) }}
            </td>
        </tr>
        <tr>
            <td class="w-100 h-100">
                <table class="w-100">
                    <tr>
                        <td class="h-30"></td>
                    </tr>
                    <tr>
                        <td class="w-25 ta-right fs-26 fw-b">
                            Version :
                        </td>
                        <td class="w-25 fs-26 fw-b" colspan="3">
                            &nbsp;{{ vehicleF.getVersion(vehicle) }}
                        </td>
                    </tr>
                    <tr><td class="h-20"></td></tr>
                    <tr>
                        <td class="w-25 ta-right fs-26 fw-b">
                            Énergie :
                        </td>
                        <td class="w-25 fs-26 fw-b" colspan="3">
                            &nbsp;{{ vehicleF.getEnergy(vehicle) }}
                        </td>
                    </tr>
                    <tr><td class="h-20"></td></tr>
                    <tr>
                        <td class="w-25 ta-right fs-26 fw-b">
                            Couleur :
                        </td>
                        <td class="w-25 fs-26 fw-b">
                            &nbsp;{{ vehicleF.getColor(vehicle) }}
                        </td>
                        <td class="w-25 ta-right fs-26 fw-b">
                            CO2 :
                        </td>
                        <td class="w-25 fs-26 fw-b">
                            &nbsp;{{ vehicleF.getExtraUrbanKmConsumption(vehicle) }}
                        </td>
                    </tr>
                    <tr><td class="h-20"></td></tr>
                    <tr>
                        <td class="w-25 ta-right fs-26 fw-b">
                            N° série :
                        </td>
                        <td class="w-25 fs-26 fw-b" colspan="3">
                            &nbsp;{{ vehicleF.getVin(vehicle) }}
                        </td>
                    </tr>
                    <tr><td class="h-20"></td></tr>
                    <tr>
                        <td class="w-25 ta-right fs-26 fw-b">
                            P. Fisc. :
                        </td>
                        <td class="w-25 fs-26 fw-b">
                            &nbsp;{{ vehicleF.getTaxHorsePower(vehicle) }}
                        </td>
                        <td class="w-25 ta-right fs-26 fw-b">
                            KM :
                        </td>
                        <td class="w-25 fs-26 fw-b">
                            &nbsp;{{ vehicleF.getDistanceTraveled(vehicle) }}
                        </td>
                    </tr>
                    <tr><td class="h-20"></td></tr>
                    <tr>
                        <td class="w-25 ta-right fs-26 fw-b">
                            IMMAT :
                        </td>
                        <td class="w-25 fs-26 fw-b">
                            &nbsp;{{ vehicleF.getLicenseNumber(vehicle) }}
                        </td>
                        <td class="w-25 ta-right fs-26 fw-b">
                            1ère MEC :
                        </td>
                        <td class="w-25 fs-26 fw-b">
                            &nbsp;{{ vehicleF.getDateOfDistribution(vehicle, {'timezone': timezone}) }}
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <table class="w-100">
        <tr><td class="h-40"></td></tr>
        <tr>
            <td class="w-98 ta-center fs-32 lh-58 fw-b table-border ta-center pad-r-15 group-background-color t-white">Client</td>
        </tr>
        <tr>
            <td class="w-100 table-border h-150">
                <table class="w-100"></table>
            </td>
        </tr>
    </table>
    <table class="w-100">
        <tr><td class="h-40"></td></tr>
        <tr>
            <td class="w-98 ta-center fs-32 lh-58 fw-b table-border ta-center pad-r-15 group-background-color t-white">Observations</td>
        </tr>
        <tr>
            <td class="w-100 table-border h-150">
                <table class="w-100"></table>
            </td>
        </tr>
    </table>
{% endblock content %}

{% block footer %}
    <table class="w-100">
        <tr><td class="h-40"></td></tr>
        <tr>
            <td class="w-100"><h6 class="fs-40 lh-32 fw-400 fw-b ta-right group-color">N° VO : {{ vehicleF.getVo(vehicle) }}</h6></td>
        </tr>
        <tr><td class="h-20"></td></tr>
    </table>
{% endblock footer %}