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

{% import 'macros/breadcrumbs.html.twig' as breadcrumbs %}
{% set crumbs = [
    { 'title': 'Accueil'|trans, 'url': path('home_index') },
    { 'title': 'Les activités locales'|trans, 'url': path('@Booking_activity_list') },
    { 'title': activity.title, 'url': null }
] %}

{% block title %}{{ activity.title }}{% endblock %}

{% block body %}
    <div class="">
        <div class="container">
            {{ breadcrumbs.breadcrumb(crumbs) }}
        </div>
        <div class="section_light top_snow">
            <section class="container activity-section">
                <div class="activity-section-full">
                    <div class="activity-container">
                        <article class="row g-4">
                            <div class="col-lg">
                                <div class="card border-0 shadow-sm mb-4">
                                    <div class="card-body">
                                        <h1 class="card-title h3 mb-3">{{ activity.title }}</h1>
                                        {% if activity_season %}
                                            <div class="mb-4">
                                                {{ include('@CMS/common/editorjs/_block.html.twig', {blocks:activity_season.description|cmsBlocks}) }}
                                            </div>
                                        {% endif %}
                                        <ul class="list-unstyled">
                                            {% if activity.website %}
                                                <li class="mb-1">
                                                    <i class="bi bi-globe me-1 text-primary"></i>
                                                    <a href="{{ activity.website }}" target="_blank" rel="noopener"
                                                       class="text-decoration-underline">
                                                        {{ activity.website|replace({'https://': '', 'http://': ''}) }}
                                                    </a>
                                                </li>
                                            {% endif %}
                                            {% if activity.phone %}
                                                <li class="mb-1">
                                                    <i class="bi bi-telephone me-1 text-primary"></i>
                                                    <a href="tel:{{ activity.phone|phoneFormat }}" rel="noopener" class="text-decoration-underline">
                                                        {{ activity.phone|phonePretty }}
                                                    </a>
                                                </li>
                                            {% endif %}
                                            <li class="mb-1">
                                                <i class="bi bi-geo-alt me-1 text-primary"></i>
                                                <address class="d-inline">
                                                    {{ activity.address }}<br>
                                                    {{ activity.zipCode }} {{ activity.city }}
                                                </address>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            {% if activity_medias %}
                                <div class="col-lg-6">
                                    {{ include('@Booking/front/activity/medias/_show_grid_slide.html.twig') }}
                                    {% if app_modules.map is defined and app_modules.map == true %}
                                        <div class="js-poi-list">
                                            {% if app_site.latitude and app_site.longitude %}
                                                <div class="d-none js-marker" data-id="site"
                                                     data-lat="{{ app_site.latitude }}"
                                                     data-lon="{{ app_site.longitude }}" data-name="{{ app_site.title }}"
                                                     data-icon="{{ asset('assets/poi.png') }}"
                                                     data-shadow="{{ asset('assets/poi_shadow.png') }}"
                                                     data-address="{{ app_site.fullAddress }}">{{ app_site.title }}
                                                </div>
                                            {% endif %}
                                            <div class="d-none js-marker" data-id="site" data-show_popup="true"
                                                 data-lat="{{ activity.latitude }}"
                                                 data-lon="{{ activity.longitude }}" data-name="{{ activity.title }}"
                                                 data-address="{{ activity.fullAddress }}">{{ activity.title }}
                                            </div>
                                        </div>
                                        <div class="js-map" data-target=".js-poi-list" id="map" style="height:55vh"></div>
                                    {% endif %}
                                </div>
                            {% endif %}
                        </article>
                    </div>
                </div>
            </section>
        </div>
    </div>
{% endblock %}

{% block stylesheets %}
    {% if app_modules.map is defined and app_modules.map == true %}
        {{ encore_entry_link_tags('poi-map') }}
    {% endif %}
{% endblock %}

{% block javascripts %}
    {% if app_modules.map is defined and app_modules.map == true %}
        {{ encore_entry_script_tags('poi-map') }}
    {% endif %}
{% endblock %}