{% extends 'layout/site.html.twig' %}

{% block title %}{{ room.name }} | {{ 'site.name'|trans }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    {{ encore_entry_link_tags('escaperoom-detail') }}
    <style>
        #escaperoom-detail-map {
            height: 260px;
            width: 100%;
            border-radius: 8px;
            z-index: 0;
        }
    </style>
{% endblock %}

{% block body %}
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb small">
            <li class="breadcrumb-item"><a href="{{ path('website_escaperooms') }}">Escape room map</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ room.name }}</li>
        </ol>
    </nav>

    <div class="row g-4">
        <div class="col-lg-7">
            <h1 class="h3 fw-bold mb-1">{{ room.name }}</h1>
            {% if room.venue %}<p class="text-secondary mb-2">{{ room.venue }}</p>{% endif %}

            <p class="mb-1">
                {% if rating.count > 0 %}
                    <span class="fw-semibold">{{ rating.avg }} ★</span>
                    <span class="text-secondary">· {{ rating.count }} review{{ rating.count != 1 ? 's' : '' }}</span>
                {% else %}
                    <span class="text-secondary">No reviews yet</span>
                {% endif %}
            </p>

            {% if room.displayAddress %}
                <p class="mb-1">{{ room.displayAddress }}</p>
            {% endif %}
            <p class="mb-3 small">
                {% if room.website %}<a href="{{ room.website }}" target="_blank" rel="noopener nofollow">Website</a> · {% endif %}
                {% if room.phone %}{{ room.phone }} · {% endif %}
                <a href="https://www.openstreetmap.org/?mlat={{ room.latitude }}&mlon={{ room.longitude }}#map=17/{{ room.latitude }}/{{ room.longitude }}"
                   target="_blank" rel="noopener">Open in OpenStreetMap</a>
            </p>

            <hr>

            <h2 class="h5 mb-3">Reviews</h2>

            {% if app.user %}
                <div class="card shadow-sm mb-4">
                    <div class="card-body">
                        <h3 class="h6 mb-3">Leave a review</h3>
                        {{ form_start(reviewForm, {action: path('website_escaperoom_review', {id: room.id})}) }}
                            <div class="mb-2">
                                {{ form_label(reviewForm.rating) }}
                                {{ form_widget(reviewForm.rating, {attr: {class: 'form-select'}}) }}
                                {{ form_errors(reviewForm.rating) }}
                            </div>
                            <div class="mb-2">
                                {{ form_label(reviewForm.title) }}
                                {{ form_widget(reviewForm.title, {attr: {class: 'form-control'}}) }}
                                {{ form_errors(reviewForm.title) }}
                            </div>
                            <div class="mb-3">
                                {{ form_label(reviewForm.body) }}
                                {{ form_widget(reviewForm.body, {attr: {class: 'form-control'}}) }}
                                {{ form_errors(reviewForm.body) }}
                            </div>
                            <button type="submit" class="btn btn-primary btn-sm">Post review</button>
                        {{ form_end(reviewForm) }}
                    </div>
                </div>
            {% else %}
                <p class="small"><a href="{{ path('app_login') }}">Log in</a> to leave a review.</p>
            {% endif %}

            {% for review in reviews %}
                <article class="mb-3 pb-3 border-bottom">
                    <div class="d-flex justify-content-between">
                        <strong>{{ review.title }}</strong>
                        <span>
                            {%- for i in 1..5 -%}
                                <span class="{{ i <= review.rating ? 'text-warning' : 'text-secondary' }}">★</span>
                            {%- endfor -%}
                        </span>
                    </div>
                    <div class="small text-secondary mb-1">
                        {{ review.author ? review.author.username : 'Anonymous' }} · {{ review.createdAt|date('Y-m-d') }}
                    </div>
                    <p class="mb-0">{{ review.body|nl2br }}</p>
                </article>
            {% else %}
                <p class="text-secondary">Be the first to review this room.</p>
            {% endfor %}
        </div>

        <div class="col-lg-5">
            <div id="escaperoom-detail-map"
                 data-lat="{{ room.latitude }}"
                 data-lng="{{ room.longitude }}"
                 class="mb-3"></div>
            <div class="card shadow-sm">
                <div class="card-body small">
                    <div class="text-secondary">Coordinates</div>
                    <div class="mb-2">{{ room.latitude }}, {{ room.longitude }}</div>
                    <div class="text-secondary">Listing source</div>
                    <div>{{ room.source.label }}</div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('escaperoom-detail') }}
{% endblock %}