{%- extends 'park/base.html.twig' -%}
{% block importmap %}{{ importmap(['app','business-show']) }}{% endblock %}
{%- set pageTitle -%}<b>L'Entreprise</b><br/><small class="fw-normal">{{ park.prefixedName }}</small>{% endset %}
{%- set hasActivityArea = business.description is not empty -%}
{%- set hasDescription = business.description is not empty -%}
{%- set hasWebsite = business.website is not empty -%}
{%- set hasContactPhone = business.contactPhone is not empty -%}
{%- set hasContactEmail = business.contactEmail is not empty -%}
{%- block body -%}
    <div class="container">
        <div class="businessShow-header my-3">
            <div class="row ">
                <div class="col-sm-auto">
                    <a href="{{ path('park_business_list') }}" class="btn btn-sm btn-outline-light rounded-pill">{{ ux_icon('bi:chevron-left', {height:'12',width:'12', class:'me-1'}) }} Retour liste entreprises</a>
                </div>
            </div>
        </div>
        <section class="businessShow">
            <div class="businessShow-details mb-2 mb-xl-3">
                <div class="row mb-lg-4">
                    <div class="col-lg-7">
                        <div class="row gx-2 gx-lg-3 align-items-md-center">
                            {% if business.logo and business.logo.name %}
                                <div class="col-auto">
                                    <div class="businessShow-details-logo">
                                        <figure class="mb-0 ratio ratio-1x1">
                                            <img src="{{ asset(business.logo.name)|imagine_filter('all') }}" class="businessShow-details-logo-figure img-fluid object-fit-contain" alt="{{ business.name|striptags|raw }}">
                                        </figure>
                                    </div>
                                </div>
                            {% endif %}
                            <div class="col">
                                <h3 class="businessShow-details-title">{{ business.name|striptags|raw }}</h3>
                                {% if hasActivityArea %}
                                    <div class="businessShow-details-category">{{ business.activityArea ? business.activityArea.name }}</div>
                                {% endif %}
                                {% if hasWebsite %}
                                    <a href="{{ business.website }}" target="_blank" class="businessShow-details-website">Voir le site internet</a>
                                {% endif %}
                                {% if hasContactPhone or hasContactEmail %}
                                    <div class="d-sm-none mt-2">
                                        {% if hasContactPhone %}
                                            <div class="businessShow-details-listMobile">
                                                <a href="tel:{{ business.contactPhone|format_phone_int }}" class="stretched-link businessShow-details-listMobile-link">{{ ux_icon('bi:telephone-fill', {class:'text-tertiary', 'aria-label': 'Business Phone'}) }}</a>
                                            </div>
                                        {% endif %}
                                        {% if hasContactEmail %}
                                            <div class="businessShow-details-listMobile">
                                                <a href="mailto:{{ business.contactEmail }}" class="stretched-link businessShow-details-listMobile-link">{{ ux_icon('bi:envelope-at-fill', {class:'text-tertiary', 'aria-label': 'Business Address'}) }}</a>
                                            </div>
                                        {% endif %}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% if business.subscriptionLevel.post or business.subscriptionLevel.realEstate or business.subscriptionLevel.jobOffer %}
                        <div class="col-lg-5 d-none d-lg-block">
                            <div class="businessShow-details-link">
                                <div class="row g-0">
                                    {% if business.subscriptionLevel.post %}
                                        <div class="col-4">
                                            <div class="businessShow-details-link-item">
                                                <div class="businessShow-details-link-item-icon">{{ ux_icon('bi:newspaper', {height:'24',width:'24', class:'text-tertiary', 'aria-label': 'Business Address'}) }}</div>
                                                <a href="{{ path('park_postlist',{'business':business.name}) }}" class="stretched-link businessShow-details-link-item-title">Actualités {{ ux_icon('bi:chevron-right', {height:'12',width:'12'}) }}</a>
                                            </div>
                                        </div>
                                    {% endif %}
                                    {% if business.subscriptionLevel.realEstate %}
                                        <div class="col-4">
                                            <div class="businessShow-details-link-item">
                                                <div class="businessShow-details-link-item-icon">{{ ux_icon('bi:buildings', {height:'24',width:'24', class:'text-tertiary', 'aria-label': 'Business Address'}) }}</div>
                                                <a href="{{ path('park_real_estate_list',{'business':business.name}) }}" class="stretched-link businessShow-details-link-item-title">Immobilier {{ ux_icon('bi:chevron-right', {height:'12',width:'12'}) }}</a>
                                            </div>
                                        </div>
                                    {% endif %}
                                    {% if business.subscriptionLevel.jobOffer %}
                                        <div class="col-4">
                                            <div class="businessShow-details-link-item">
                                                <div class="businessShow-details-link-item-icon">{{ ux_icon('bi:megaphone', {height:'24',width:'24', class:'text-tertiary', 'aria-label': 'Business Address'}) }}</div>
                                                <a href="{{ path('park_job_offer_list',{'business':business.name}) }}" class="stretched-link businessShow-details-link-item-title">Emploi {{ ux_icon('bi:chevron-right', {height:'12',width:'12'}) }}</a>
                                            </div>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    {% endif %}
                </div>
                <hr class="my-3 my-lg-4">
                <div class="row gx-2 gx-xl-3 mb-lg-2 mb-xl-3">
                    <div class="col-lg-12">
                        <div class="row gx-2 gx-xl-3">
                            <div class="col-xl-6 mb-2 mb-xl-3">
                                <div class="businessShow-details-address">
                                    <div class="row gx-2">
                                        <div class="col-auto">
                                            {{ ux_icon('bi:geo-alt-fill', {class:'text-tertiary', 'aria-label': 'Business Address'}) }}
                                        </div>
                                        <div class="col">{{ business.fullAddress }}</div>
                                    </div>
                                </div>
                            </div>
                            {% if hasContactEmail %}
                                <div class="col-sm-7 col-xl-4 mb-2 mb-xl-3 d-none d-sm-block">
                                    <div class="businessShow-details-mail position-relative">
                                        <div class="row gx-2">
                                            <div class="col-auto">
                                                {{ ux_icon('bi:envelope-at-fill', {class:'text-tertiary', 'aria-label': 'Business Address'}) }}
                                            </div>
                                            <div class="col">
                                                <a href="mailto:{{ business.contactEmail }}" class="stretched-link">{{ business.contactEmail }}</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endif %}
                            {% if hasContactPhone %}
                                <div class="col-sm-5 col-xl-2 mb-2 mb-xl-3 d-none d-sm-block">
                                    <div class="businessShow-details-phone position-relative">
                                        <div class="row gx-2">
                                            <div class="col-auto">
                                                {{ ux_icon('bi:telephone-fill', {class:'text-tertiary', 'aria-label': 'Business Phone'}) }}
                                            </div>
                                            <div class="col">
                                                <a href="tel:{{ business.contactPhone|format_phone_int }}" class="stretched-link">{{ business.contactPhone|format_phone_spaced }}</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                    <div class="col-lg-6 mb-2 mb-lg-0">
                        <div class="businessShow-details-map position-relative">
                            {{ ux_map(map, { style: 'height: 100%;border-radius: 8px;','data-controller': 'leaflet-map', }) }}
                            <button class="btn btn-primary btn-sm position-absolute rounded-pill fw-bold" style="top: 20px; right:20px;z-index: 1001" type="button"
                                    data-bs-toggle="offcanvas" data-bs-target="#deepLinksOffcancas"
                                    aria-controls="deepLinksOffcancas">
                                {{ ux_icon('mdi:map-marker-path', {height:'20',width:'20', class:'me-2', 'aria-label': 'Map'}) }}
                                Itinéraire
                                {{ ux_icon('bi:chevron-right', {height:'14',width:'14', class:'ms-2', 'aria-label': 'Map chevron'}) }}
                            </button>
                        </div>
                    </div>
                    {% if hasDescription %}
                        <div class="col-lg-6">
                            <div class="businessShow-details-text">{{ business.description|raw }}</div>
                        </div>
                    {% endif %}
                </div>
            </div>
            <div class="businessShow-gallery mb-4">
                <div class="row">
                    {% for image in business.images %}
                        <div class="col-6 col-md-4 col-xl-3">
                            <div class="businessShow-gallery-wrapper position-relative">
                                <figure class="ratio ratio-1x1 mb-0">
                                    <img src="{{ asset(image.name)|imagine_filter('all') }}" class="img-fluid object-fit-cover" alt="">
                                </figure>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
            {% if business.subscriptionLevel.post or business.subscriptionLevel.realEstate or business.subscriptionLevel.jobOffer %}
                <div class="businessShow-details-link d-lg-none">
                    <div class="row g-0">
                        {% if business.subscriptionLevel.post %}
                            <div class="col-4">
                                <div class="businessShow-details-link-item">
                                    <div class="businessShow-details-link-item-icon">{{ ux_icon('bi:newspaper', {height:'24',width:'24', class:'text-tertiary', 'aria-label': 'Business Address'}) }}</div>
                                    <a href="{{ path('park_postlist',{'business':business.name}) }}" class="stretched-link businessShow-details-link-item-title">Actualités</a>
                                </div>
                            </div>
                        {% endif %}
                        {% if business.subscriptionLevel.realEstate %}
                            <div class="col-4">
                                <div class="businessShow-details-link-item">
                                    <div class="businessShow-details-link-item-icon">{{ ux_icon('bi:buildings', {height:'24',width:'24', class:'text-tertiary', 'aria-label': 'Business Address'}) }}</div>
                                    <a href="{{ path('park_real_estate_list',{'business':business.name}) }}" class="stretched-link businessShow-details-link-item-title">Immobiliers</a>
                                </div>
                            </div>
                        {% endif %}
                        {% if business.subscriptionLevel.jobOffer %}
                            <div class="col-4">
                                <div class="businessShow-details-link-item">
                                    <div class="businessShow-details-link-item-icon">{{ ux_icon('bi:megaphone', {height:'24',width:'24', class:'text-tertiary', 'aria-label': 'Business Address'}) }}</div>
                                    <a href="{{ path('park_job_offer_list',{'business':business.name}) }}" class="stretched-link businessShow-details-link-item-title">Offres d'emploi</a>
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </div>
            {% endif %}
        </section>

        <div class="offcanvas offcanvas-bottom" tabindex="-1" id="deepLinksOffcancas" aria-labelledby="deepLinksOffcancas">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title text-center flex-grow-1" id="offcanvasBottomLabel">Lancer l'itinéraire via</h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
                {% set latLonEncoded = (business.latitude~","~business.longitude)|url_encode %}
                <div class="container">
                    <div class="row">
                        <div class="col-4 text-center">
                            <a href="https://www.waze.com/ul?ll={{ latLonEncoded }}&navigate=yes" target="_blank" class="d-block offcanvasItinerary-item">
                                <span class="d-block text-center mb-2">{{ ux_icon('fa-brands:waze',{width:'32',height:'32'}) }}</span>
                                Waze
                            </a>
                        </div>
                        <div class="col-4 text-center">
                            <a href="https://www.google.com/maps/dir/?api=1&destination={{ latLonEncoded }}&navigate=yes" target="_blank" class="d-block offcanvasItinerary-item">
                                <span class="d-block text-center mb-2">{{ ux_icon('fa-brands:google',{width:'32',height:'32'}) }}</span>
                                Maps
                            </a>
                        </div>
                        <div class="col-4 text-center">
                            <a href="http://maps.apple.com/?daddr={{ latLonEncoded }}" target="_blank" class="d-block offcanvasItinerary-item">
                                <span class="d-block text-center mb-2">{{ ux_icon('fa-brands:apple',{width:'32',height:'32'}) }}</span>
                                Apple
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{%- endblock -%}