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

{% block stylesheets %}
{% endblock %}

{% block body %}
    <h3>Historique du locataire au: {{tenant.property}}</h3>
    {% if tenant.yearsInRent|length %}

    <p class="text-info">Montant du loyer de {{ tenant.getFullName }}: {{ tenant.price }} €</p>
    <table class="table table-size-td">
        <thead>
        <tr class="background-color-db">
            <td></td>
            <td>Janv</td>
            <td>Fév</td>
            <td>Mars</td>
            <td>Avr</td>
            <td>Mai</td>
            <td>Juin</td>
            <td>Juil</td>
            <td>Août</td>
            <td>Sept</td>
            <td>Oct</td>
            <td>Nov</td>
            <td>Déc</td>
        </tr>
        </thead>
        <tbody>
            {% for year in tenant.yearsInRent %}
                <tr>
                    <td class="background-color-db">{{year}}</td>
                    {% for rent in tenant.sortRentsByDate(year) %}
                        {% if rent != '' %}
                            <td class="text-center">
                                {% if rent.amount < tenant.price %}
                                    <span class="color-danger">{{ rent.amount }} €</span>
                                {% else %}
                                    {{ rent.amount }} €
                                {% endif %}
                                {% if app.user.isOwner == true %}
                                    <div class="position-relative">
                                        <div class="hover-show inline m-r-10">
                                            <a href="{{ path('monitoring-rent-modify', {id: rent.id}) }}">
                                                <img src="{{ asset('images/Icon/edit.png') }}" alt="Modifier" class="w-25">
                                            </a>
                                            <div class="position-absolute t-10 l-8">
                                                <div class="show-me">
                                                    <span>Modifier le loyer</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="hover-show inline">
                                            <a href="{{ path('monitoring-rent-delete', {id: rent.id}) }}">
                                                <img src="{{ asset('images/Icon/delete.png') }}" alt="Supprimer" class="w-25">
                                            </a>
                                            <div class="position-absolute t-20 l-45">
                                                <div class="show-me">
                                                    <span>Supprimer le loyer</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                {% endif %}
                            </td>
                        {% else %}
                            <td></td>
                        {% endif %}
                    {% endfor %}
                </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
        <p class="alert alert-danger">Aucun locataire n'a été trouvé</p>
    {% endif %}
{% endblock %}