{% if isDemo %}
    {{ include('watermark/_watermark.html.twig') }}
{% endif %}
<div class="col-sm-12 col-md-12 col-lg-12" style="margin-bottom: 2%">
    {% if serviceCreatedOnProject.serviceRE.logoFilepath == null %}
        <img style="margin-left: 2%;margin-top: 20px;" alt="Logo du service" id="logoService"
             class="logoServiceConfig"
             src="{{ asset('install-bois/icon/service/default_settings_icon.png') }}">
    {% else %}
        <img style="margin-left: 2%;margin-top: 20px;" alt="Logo du service" id="logoService"
             class="logoServiceConfig"
             src="{{ asset(serviceCreatedOnProject.serviceRE.logoFilepath) }}">
    {% endif %}
    <h2 style="margin-bottom: -30px;display: flex;align-items: flex-start;justify-content: flex-start;align-content: center;">
        {{ serviceCreatedOnProject.serviceRE.label }}
        <div id="loaderService" style="display:none;">
            <img src="{{ asset('images/loader-service.gif') }}" alt="Loader" style="width: 90px;margin-top: -30px;">
        </div>
    </h2>
    <h3 class="title-results" style="margin-top: 30px">
        Synthèse du service
    </h3>
</div>

{% set address = project.defaultAddress %}
<div class="container-fluid">
    <div class="row parent-container-summary">
        <div class="container-summary">
            <h4 class="subtitle-summary">INSTALLATION</h4>
            <div class="block-summary">
                {{ include('summary/_block/_installation.html.twig') }}
            </div>
        </div>
        <div style="margin-top: 20px;">
            <div id="sectionDevice" class="section-dropdown">
                <h3 class="subtitle-summary">APPAREIL</h3>
                <button id="btnDisplayDevice">
                    <h4 class="button-show-hide">voir</h4>
                    <div class="triangle-dropdown"></div>
                </button>
            </div>
            <div id="contentDevice" class="container-summary section-dropdown-content">
                <br>
                {{ include('summary/_block/_device.html.twig') }}
            </div>
        </div>
        <div style="margin-top: 20px;">
            <div id="sectionAirSupply" class="section-dropdown">
                <h3 class="subtitle-summary">AMENÉE D'AIR COMBURANT</h3>
                <button id="btnDisplayAirSupply">
                    <h4 class="button-show-hide">voir</h4>
                    <div class="triangle-dropdown"></div>
                </button>
            </div>
            <div id="contentAirSupply" class="container-summary section-dropdown-content">
                <br>
                {{ include('summary/aac_cdc/_air_supply.html.twig') }}
            </div>
        </div>
        <div style="margin-top: 20px;">
            <div id="sectionConnectingDuct" class="section-dropdown">
                <h3 class="subtitle-summary">CONDUIT DE
                    RACCORDEMENT {{ project.techDataValueForService('idModeleConnectingDuctSecond') and project.techDataValueForService('idModeleConnectingDuct') ? 'DEUX SECTIONS' : '' }}</h3>
                <button id="btnDisplayConnectingDuct">
                    <h4 class="button-show-hide">voir</h4>
                    <div class="triangle-dropdown"></div>
                </button>
            </div>
            <div id="contentConnectingDuct" class="container-summary section-dropdown-content">
                <br>
                {% if project.techDataValueForService('idModeleConnectingDuctSecond') %}
                    {{ include('summary/aac_cdc/_connecting_duct.html.twig') }}
                {% else %}
                    <span>Pas de conduit de raccordement</span>
                {% endif %}
            </div>
        </div>
        <div style="margin-top: 20px;">
            <div id="sectionSmokeDuct" class="section-dropdown">
                <h3 class="subtitle-summary">CONDUIT DE FUMÉE</h3>
                <button id="btnDisplaySmokeDuct">
                    <h4 class="button-show-hide">voir</h4>
                    <div class="triangle-dropdown"></div>
                </button>
            </div>
            <div id="contentSmokeDuct" class="container-summary section-dropdown-content">
                <br>
                {{ include('summary/aac_cdc/_smoke_duct.html.twig') }}
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $('#sectionDetail').on('click', () => {
        showHideSection($('#contentDetail').css('max-height') !== '0px' ? 'hide' : 'show', 'Detail');
    });
    $('#sectionDevice').on('click', () => {
        showHideSection($('#contentDevice').css('max-height') !== '0px' ? 'hide' : 'show', 'Device');
    });
    $('#sectionAirSupply').on('click', () => {
        showHideSection($('#contentAirSupply').css('max-height') !== '0px' ? 'hide' : 'show', 'AirSupply');
    });
    $('#sectionConnectingDuct').on('click', () => {
        showHideSection($('#contentConnectingDuct').css('max-height') !== '0px' ? 'hide' : 'show', 'ConnectingDuct');
    });
    $('#sectionSmokeDuct').on('click', () => {
        showHideSection($('#contentSmokeDuct').css('max-height') !== '0px' ? 'hide' : 'show', 'SmokeDuct');
    });

    function showHideSection(type, element) {
        let content = $('#content' + element);
        let section = $('#section' + element);
        $('#btnDisplay' + element + ' > .triangle-dropdown').css('transform', 'rotate(' + (type === 'hide' ? '0' : '180') + 'deg)');
        $('#btnDisplay' + element + ' > .button-show-hide').text(type === 'hide' ? 'voir' : 'réduire');
        section.css('background-color', (type === 'hide' ? 'transparent' : '#FED7A8'));
        section.css('border', (type === 'hide' ? '2px solid #fc971f' : 'none'));
        content.css('max-height', type === 'hide' ? 0 : content.prop('scrollHeight'));
    }
</script>