{% set hotelCardImageHeight = hotelCards|length + 0.5 %}
{% set hotelsImageHeight = hotels|length + 0.5 %}
<style>
    .hotels-info-card {
        width: calc((var(--page-width) - 60px) / {{ hotelCards|length }})
    }

    .hotels-info-cards img {
        width: calc((var(--page-width) - 66px) / {{ hotelCards|length }});
        height: calc((var(--page-width) - 66px) /{{ hotelCardImageHeight }});
    }

    .activity-img {
        width: calc((var(--page-width) - 66px) / {{ hotels|length }});
        height: calc((var(--page-width) - 66px) /{{ hotelsImageHeight }});
    }

    a > div {
        height: calc((100% - (var(--page-width) - 66px) /{{ hotelsImageHeight }}) - 10px);
    }
</style>
<div class="page-container">
    <div class="title-section">
        <h1>Hotels mit regionalem Charakter!</h1>
        <p class="subtitle">Hotels in den Regionen Harz, Halle /Leipzig &amp; Magdeburg - hier immer zum garantiert
            besten Preis !</p>
        <div class="search-hotel">
            {% include 'home/search-form.html.twig' %}
        </div>
    </div>
    <div class="divider"></div>
    <div class="hotels-info">
        <h2>Wählen Sie Ihr Hotel</h2>
        <div class="hotels-info-box">
            <div class="hotels-info-cards">
                {% if hotelCards is defined %}
                    {% for card in hotelCards|slice(0, 4) %}
                        <div class="hotels-info-card">
                            <img src="{{ asset(card.image) }}" alt="">
                            <p class="title">{{ card.title }}</p>
                            <p>{{ card.description }}</p>
                        </div>
                    {% endfor %}
                {% endif %}
            </div>
        </div>
    </div>
    <div class="best-activities">
        <h2>Beliebte Urlaubsangebote</h2>
        <ul class="best-activities-list">
            {% if hotels is defined %}
                {% for hotel in hotels|slice(0, 4) %}
                    <li class="activity-card">
                        <a href="find_hotel_by_id.html">
                            <img src="{{ asset(hotel[0].imageUrl) }}" class="activity-img">
                            <div>
                                <p class="title">{{ hotel[0].name }}</p>
                                <div class="stars">
                                    <div class="red-stars" style="width: calc(110px * {{ hotel.rating / 5 }});">
                                        {% for _ in 1..(hotel.rating|round) %}
                                            <svg width="22" height="20" viewBox="0 0 22 20" fill="none"
                                                 xmlns="http://www.w3.org/2000/svg">
                                                <path d="M11 0L13.4697 7.60081H21.4616L14.996 12.2984L17.4656 19.8992L11 15.2016L4.53436 19.8992L7.00402 12.2984L0.538379 7.60081H8.53035L11 0Z"
                                                      fill="#E31E24"></path>
                                            </svg>
                                        {% endfor %}
                                    </div>
                                    <div class="gray-stars">
                                        {% for _ in 1..5 %}
                                            <svg width="22" height="20" viewBox="0 0 22 20" fill="none"
                                                 xmlns="http://www.w3.org/2000/svg">
                                                <path d="M11 0L13.4697 7.60081H21.4616L14.996 12.2984L17.4656 19.8992L11 15.2016L4.53436 19.8992L7.00402 12.2984L0.538379 7.60081H8.53035L11 0Z"
                                                      fill="#C4C4C4"></path>
                                            </svg>
                                        {% endfor %}
                                    </div>
                                    <span>{{ hotel.rating }} von 5</span>
                                </div>
                                <div class="booking-term">
                                    {{ hotel.bookingTerm }}
                                </div>
                                <p class="booking-offer">{{ hotel.bookingOffer }}</p>
                                <p class="price">pro Person ab <span>{{ hotel.price }}</span></p>
                            </div>
                        </a>
                    </li>
                {% endfor %}
            {% endif %}
        </ul>
    </div>
    <div class="map">
        {% include 'hotel/map.html.twig' %}
    </div>
    <div class="count-section">
        <h2>Auf einen Blick</h2>
        <div class="section-container">
            {% for count in counts %}
                <div class="count-col">
                    <div>
                        <img src="{{ asset(count.img_src) }}" alt="Image">
                        <p class="value" count="{{ count.count }}"><span style="vertical-align: inherit;"><span
                                        style="vertical-align: inherit;">{{ count.count }}</span></span></p>
                    </div>
                    <font style="vertical-align: inherit;"><font
                                style="vertical-align: inherit;">{{ count.label }}</font></font><br>
                </div>
            {% endfor %}
        </div>
    </div>
    <div class="regions">
        <h2>Beliebte Reiseziele</h2>
        <ul class="regions-list">
            {% for region in regions %}
                <li class="region-card">
                    <a href="find_region_by_id.html">
                        <div>
                            <img src="{{ asset(region.imageUrl) }}" alt="Image">
                        </div>
                        <p>{{ region.name }}</p>
                    </a>
                </li>
            {% endfor %}
        </ul>
    </div>
</div>