{%- 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 hasLogo = business.logo and business.logo.name -%}
{%- set hasDetailedPage = business.subscriptionLevel.detailedPage -%}
{%- set hasActivityArea = hasDetailedPage and business.description is not empty -%}
{%- set hasDescription = hasDetailedPage and business.description is not empty -%}
{%- set hasWebsite = hasDetailedPage and business.website is not empty -%}
{%- set hasContactPhone = hasDetailedPage and business.contactPhone is not empty -%}
{%- set hasContactEmail = hasDetailedPage and business.contactEmail is not empty -%}
{%- set hasAddress = business.fullAddress is not empty -%}
{%- set hasImages = hasDetailedPage and not business.images.empty -%}
{%- set hasPost = business.subscriptionLevel.post -%}
{%- set hasRealEstate = business.subscriptionLevel.realEstate -%}
{%- set hasJobOffer = business.subscriptionLevel.jobOffer -%}
{%- 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 hasLogo %}
                                <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 hasPost or hasRealEstate or hasJobOffer %}
                        <div class="col-lg-5 d-none d-lg-block">
                            <div class="businessShow-details-link">
                                <div class="row g-0">
                                    {% if hasPost %}
                                        <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 hasRealEstate %}
                                        <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 hasJobOffer %}
                                        <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">
                {% if hasAddress or hasContactEmail or hasContactPhone or map or hasDescription %}
                    <div class="row gx-2 gx-xl-3 mb-lg-2 mb-xl-3">
                        {% if hasAddress or hasContactEmail or hasContactPhone %}
                            <div class="col-lg-12">
                                <div class="row gx-2 gx-xl-3">
                                    {% if hasAddress %}
                                        <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>
                                    {% endif %}
                                    {% 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>
                        {% endif %}
                        {% if map %}
                            <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>
                        {% endif %}
                        {% if hasDescription %}
                            <div class="col-lg-6">
                                <div class="businessShow-details-text">{{ business.description|raw }}</div>
                            </div>
                        {% endif %}
                    </div>
                {% endif %}
            </div>
            {% if hasImages %}
                <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>
            {% endif %}
            {% if hasPost or hasRealEstate or hasJobOffer %}
                <div class="businessShow-details-link d-lg-none">
                    <div class="row g-0">
                        {% if hasPost %}
                            <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 hasRealEstate %}
                            <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 hasJobOffer %}
                            <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 -%}