{% extends 'base.html.twig' %}
{% block title %}HousingRental - Back Office{% endblock %}
{% block stylesheets %}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('assets/stylesheets/admin/admin.css') }}">
{% endblock %}
{% block content %}
    <div class="backOfficeContainer">
        <nav class="subNav">
            <div class="cache"></div>
            <ul>
                <li>
                    <a id="showUsers" href="#">Utilisateurs</a>
                </li>
                <li>
                    <a id="showProperties" href="#">Locations</a>
                </li>
            </ul>
        </nav>
        <div class="tableContainer">
            <table id="usersList" border-collapse="collapse">
                <tbody>
                    <tr>
                        <th>Id</th>
                        <th>Prénom</th>
                        <th>Nom</th>
                        <th>Email</th>
                        <th>Téléphone</th>
                        <th>Pays</th>
                        <th>Code Postal</th>
                        <th>Suppression</th>
                    </tr>
                    {% if users is defined %}
                        {% for user in users %}
                            <tr>
                                <td>{{ user.id }}</td>
                                <td>{{ user.firstname }}</td>
                                <td>{{ user.lastname }}</td>
                                <td title="{{ user.email }}">{{ user.email | slice(0, 12) }}...</td>
                                <td>{{ user.phone }}</td>
                                <td>{{ user.country }}</td>
                                <td>{{ user.zipcode }}</td>
                                <td class="delete">
                                    <a data-user="{{ user.firstname }} {{ user.lastname }}" href="{{ path('admin_deleteUser', { 'id': user.id }) }}">
                                        <i class="fas fa-trash-alt"></i>
                                    </a>
                                </td>
                            </tr>
                        {% endfor %}
                    {% endif %}
                </tbody>
            </table>
            <table id="propertiesList" border-collapse="collapse">
                <tbody>
                    <tr>
                        <th>Id</th>
                        <th>Propriétaire</th>
                        <th>Catégorie</th>
                        <th>Pays</th>
                        <th>Ville</th>
                        <th>Prix</th>
                        <th>Suppression</th>
                    </tr>
                    {% if houses is defined %}
                        {% for house in houses %}
                            <tr>
                                <td>{{ house.id }}</td>
                                <td>{{ house.user.id }}</td>
                                <td>{{ house.category.name }}</td>
                                <td>{{ house.country }}</td>
                                <td>{{ house.city }}</td>
                                <td>{{ house.price }}</td>
                                <td class="delete">
                                    <a data-house="{{ house.name }}" href="{{ path('admin_deleteRental', { 'id': house.id }) }}">
                                        <i class="fas fa-trash-alt"></i>
                                    </a>
                                </td>
                            </tr>
                        {% endfor %}
                    {% endif %}
                </tbody>
            </table>
        </div>
    </div>
    <div class="confirmAction">
        <p>Êtes-vous sûr de vouloir supprimer <span id="elementToBeDeleted"></span> ?</p>
        <div class="modalButtons">
            <button id="confirm">Oui</button>
            <button id="cancel">Non</button>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('assets/javascripts/admin/admin.js') }}"></script>
{% endblock %}