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

{% block title %}{{ pageTitle }} - {{ parent() }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/hotel.css') }}" type="text/css">
{% endblock %}

{% block header %}
    {% include 'header.html.twig' %}
{% endblock %}

{% block body %}
    <div class="page-container">
        <div class="section-with-filter">
            {% include 'hotel/filter.html.twig' %}

            <div class="hotel-list">
                <p class="hotels-amount">{{ hotels|length }} Unterkünfte gefunden</p>
                <div class="hotels-list">
                    {% for hotel in hotels %}
                        <div class="hotel-card">
                            <div class="hotel-image">
                                <a href="{{ hotel.url }}">
                                    <img src="{{ asset (hotel.imageUrl) }}">
                                </a>
                            </div>
                            <div class="hotel-description">
                                <div class="hotel-info">
                                    <div class="info-col-1">
                                        <p class="title"><a href="{{ hotel.url }}">{{ hotel.name }}</a></p>
                                        <div class="stars">
                                            {% for i in 1..5 %}
                                                {% if i <= hotel.rating %}
                                                    <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>
                                                {% else %}
                                                    <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>
                                                {% endif %}
                                            {% endfor %}
                                            <span>{{ hotel.rating }} von 5</span>
                                        </div>
                                        {% if hotel.additionalOptions is defined %}
                                            {% for option in hotel.additionalOptions %}
                                                {% for key, value in option %}
                                                    <p class="extra-options">
                                                        <strong>{{ key }}:</strong> {{ value }}
                                                    </p>
                                                {% endfor %}
                                            {% endfor %}
                                        {% endif %}
                                    </div>
                                    <div class="info-col-2">
                                        <p class="verbal-rating">{{ hotel.verbalRating }}</p>
                                        <p class="amount-recomendation">{{ hotel.reviews }} Bewertungen</p>
                                    </div>
                                </div>
                                <div class="free-rooms">
                                    <p class="room-amount">{{ hotel.rooms }} Zimmer zur Buchung verfügbar</p>
                                    <div>
                                        <p class="room-type"><img
                                                    src="{{ asset('images/icon-room.svg') }}">{{ hotel.roomType }}</p>
                                        <p class="price-from mobile">für {{ hotel.price }} €</p>
                                    </div>
                                </div>
                                <div class="book-room">
                                    <a href="{{ hotel.bookingUrl }}" class="btn green-btn">Verfügbarkeit anzeigen</a>
                                    <div class="price-from">
                                        für {{ hotel.price }} €
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block footer %}
    {% include 'footer.html.twig' %}
{% endblock %}