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

{% block title %}
    Liste des activités | {{ parent() }}
{% endblock %}

{% block breadcrumb %}
    <div class="flex-between-center">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item text-sm text-dark active" aria-current="page">
                    Activités
                </li>
                <li class="breadcrumb-item text-sm text-dark active" aria-current="page">
                    Liste
                </li>
            </ol>
        </nav>
    </div>
{% endblock %}

{% block body %}
    <div class="row">
        <div class="col-12">
            <div class="card my-4">
                {{ include('admin/ui/card/_header.html.twig', {withLocal:true, card_header_title:'Liste des activités', card_header_right_route:'@Booking_activity_admin_new', card_header_right_label: 'Nouvelle activité'}) }}
                <div class="card-body p-2">
                    <div class="row">
                        <div class="col">
                            <ul class="list-group js-poi-list">
                                {% if app_site.latitude and app_site.longitude %}
                                    <li 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.svg') }}"
                                        data-shadow="{{ asset('assets/poi_shadow.svg') }}"
                                        data-address="{{ app_site.fullAddress }}">{{ app_site.title }}
                                    </li>
                                {% endif %}
                                {% for activity in activities %}
                                    <li class="list-group-item js-marker flex-between-center"
                                        data-id="{{ activity.id }}" data-lat="{{ activity.latitude }}"
                                        data-lon="{{ activity.longitude }}" data-name="{{ activity.title }}"
                                        data-address="{{ activity.address }}"
                                        data-href="{{ path('@Booking_activity_admin_edit', {'id':activity.id}) }}">
                                        <span>{{ activity.title }}</span>
                                        <span><a href="{{ path('@Booking_activity_admin_edit', {'id':activity.id}) }}"
                                                 class="btn btn-sm btn-primary">Modifier</a></span>
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>
                        {% if app_modules.map is defined and app_modules.map == true %}
                            <div class="col-md-6">
                                <div class="js-map" data-target=".js-poi-list" id="map" style="height:55vh"></div>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block stylesheets %}
    {{ encore_entry_link_tags('poi-map') }}
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('poi-map') }}
{% endblock %}