{# CAREFUL : Some client might need to replicate this template #}
{% extends 'communication/fr/email/notification/base.html.twig' %}
{% block body %}
    {% set new = context.object.new %}
    {% set old = context.object.old %}
    {% set ask = context.object.ask %}
    {% set sender = context.object.sender %}
    {% set recipient = context.user %}
    {% set outwardOrigin = context.origin %}
    {% set outwardDestination = context.destination %}

    <table style="width:100%;font-family:{{ api_env('EMAILS_FONT') }}, sans-serif;">
        <tr>
            <td>
                <table>
                    <tr>
                        <td>
                            <p style="color:{{ api_env('EMAILS_COLOR_SECONDARY') }};font-size:30px">
                                <b>Covoiturage modifié</b></p>
                            <hr>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table style="width:100%;">
                    <tr>
                        <td style="width:70%">
                            <p>Bonjour<b
                                        style="color:{{ api_env('EMAILS_COLOR_PRIMARY') }}"> {{ recipient.givenName|capitalize }} {{ recipient.shortFamilyName|capitalize }}</b>
                            </p>
                            <p>Votre covoiturage avec<b
                                        style="color:{{ api_env('EMAILS_COLOR_PRIMARY') }}"> {{ sender.givenName|capitalize }} {{ sender.shortFamilyName|capitalize }}</b> a été modifié
                            </p>
                        </td>
                        <td style="width:30%">
                            <img style="border-radius:50px" src="{{ api_env('EMAILS_PLATFORM_URL') }}{{ sender.avatars[0] }}" alt="Avatar"/>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table style="width:70%;background-color:{{ api_env('EMAILS_COLOR_PRIMARY_LIGHT') }};margin-top:5px;margin-bottom:5px;margin-left:5px">
                    <tr>
                        <td style="width:10%;text-align:left">
                            <img src="{{ api_env('EMAILS_PLATFORM_URL') }}{{ api_env('EMAILS_IMAGES_BASE_URL') }}{{ api_env('EMAILS_WAY_LOGO') }}"
                                 alt="trajet"/>
                        </td>
                        <td style="width:90%;text-align:left">
                            <p>
                                <b style="color:{{ api_env('EMAILS_COLOR_PRIMARY') }}">{{ outwardOrigin.address.displayLabel[0] }}</b>
                            </p>
                            <p>
                                <b style="color:{{ api_env('EMAILS_COLOR_PRIMARY') }}"> {{ outwardDestination.address.displayLabel[0] }}</b>
                            </p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <p style="color:{{ api_env('EMAILS_COLOR_SECONDARY') }};font-size:20px">
                    Voici le détail des informations modifiées :
                </p>
                <table style="width:100%;">
                    <tr>
                        <td><p>Champ</p></td>
                        <td><p>Ancien</p></td>
                        <td><p>Nouveau</p></td>
                    </tr>
                    {% if old.bike != new.bike %}
                        <tr>
                            <td><p>Vélo</p></td>
                            <td><p style="color: red">{% if old.bike == true %}Oui{% else %}Non{% endif %}</p></td>
                            <td><p style="color: green">{% if new.bike == true %}Oui{% else %}Non{% endif %}</p></td>
                        </tr>
                    {% endif %}
                    {% if old.backSeats != new.backSeats %}
                        <tr>
                            <td><p>2 à l'arrière</p></td>
                            <td><p style="color: red">{% if old.backSeats == true %}Oui{% else %}Non{% endif %}</p></td>
                            <td><p style="color: green">{% if new.backSeats == true %}Oui{% else %}Non{% endif %}</p></td>
                        </tr>
                    {% endif %}
                    {% if old.luggage != new.luggage %}
                        <tr>
                            <td><p>Bagages volumineux</p></td>
                            <td><p style="color: red">{% if old.luggage == true %}Oui{% else %}Non{% endif %}</p></td>
                            <td><p style="color: green">{% if new.luggage == true %}Oui{% else %}Non{% endif %}</p></td>
                        </tr>
                    {% endif %}
                    {% if old.seatsDriver != new.seatsDriver %}
                        <tr>
                            <td><p>Sièges disponibles</p></td>
                            <td><p style="color: red">{% if old.seatsDriver == true %}Oui{% else %}Non{% endif %}</p></td>
                            <td><p style="color: green">{% if new.seatsDriver == true %}Oui{% else %}Non{% endif %}</p></td>
                        </tr>
                    {% endif %}
                    {% if old.comment != new.comment %}
                        <tr>
                            <td><p>Commentaire</p></td>
                            <td><p style="color: red">{{ old.comment }}</p></td>
                            <td><p style="color: green">{{ new.comment }}</p></td>
                        </tr>
                    {% endif %}

                </table>
            </td>
        </tr>

        </hr>
    </table>
{% endblock %}