{% extends "base.html.twig" %}
{% block title %}HousingRental - Accueil{% endblock %}
{% block content %}
    <h6>Meilleur site de location au monde</h6>
    <h3>Trouvez la propriété de vos rêves pour vos vacances parmi les catégories suivantes</h3>
    <div class="categoryCards">
        {% for category in categories %}
            <a href="{{ path('default_category', { 'alias': category.alias }) }}">
                {% if loop.index == 1 %}
                    <img src="{{ asset('assets/images/backgrounds/appartement.jpg') }}" alt="Photo d'appartement">
                {% elseif loop.index == 2 %}
                    <img src="{{ asset('assets/images/backgrounds/maison.jpg') }}" alt="Photo de maison">
                {% elseif loop.index == 3 %}
                    <img src="{{ asset('assets/images/backgrounds/evenement.jpg') }}" alt="Photo de bar">
                {% endif %}
                <div class="filter"></div>
                <div>
                    <h5>{{ category.name }}</h5>
                    {% if category.houses | length > 1 %}
                        <p>{{ category.houses|length }} propriétés</p>
                    {% else %}
                        <p>{{ category.houses|length }} propriété</p>
                    {% endif %}
                </div>
            </a>
        {% endfor %}
    </div>
    <div class="whyUs">
        <div class="whyUsSlider" data-image="image1"></div>
        <div>
            <div>
                <h2>Pourquoi nous ?</h2>
                <p>Des propriétés au design atypique aux propriétés de rêve avec piscine, isolées ou en centre ville, les meilleures propriétés sont ici !</p>
                <div>
                    <div>
                        <a class="whyUsLink" href="#">
                            <i class="fas fa-globe-asia"></i>
                        </a>
                        <p>Des propriétés partout dans le monde</p>
                    </div>
                    <div>
                        <a class="whyUsLink" href="#">
                            <i class="fas fa-headset"></i>
                        </a>
                        <p>Support 7j/7 & 24h/24</p>
                    </div>
                    <div>
                        <a class="whyUsLink" href="#">
                            <i class="fas fa-money-bill-wave"></i>
                        </a>
                        <p>Prix de rêve pour des vacances de rêve</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <h6>Aperçu de nos offres</h6>
    <h3>Une sélection de propriétés les plus récentes</h3>
    <div class="cardsContainer">
        <div class="container">
            {% for property in lastHouses %}
                {% include 'components/_card.html.twig' %}
            {% endfor %}
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('assets/javascripts/pages/home.js') }}"></script>
{% endblock %}