{% import "forms-macro/inputs_form.html.twig" as forms %}
<div class="row rubrique container-device">
    <div class="rubrique_titre">
        <span>Conduit</span>
    </div>
    <div class="container-form-duct">
        <form id="choiceDuctForm">

            <div class="row" style="padding: 0 15px;">
                <div class="col-sm-3 col-lg-4 essential-data-field">
                    {{ forms.select(
                        'Nature du conduit',
                        "duct-type",
                        "duct-type",
                        [
                            {'id': 'maconne', 'label': 'Maçonné'},
                            {'id': 'metallique', 'label': 'Métallique'}
                        ],
                        "-- Sélectionnez votre choix --",
                        2,
                        data['typeDuct'],
                        true,
                        false,
                        false,
                        false,
                        "errorRequiredMessage") }}
                </div>
                <div class="col-sm-3 col-lg-4 essential-data-field">
                    {{ forms.select(
                        'Tubage',
                        "duct-tubage",
                        "duct-tubage",
                        [
                            {'id': 'tubage-non', 'label': 'Non tubé'},
                            {'id': 'tubage-oui', 'label': 'Tubé'}
                        ],
                        "-- Sélectionnez votre choix --",
                        2,
                        data['tube'],
                        true,
                        false,
                        false,
                        false,
                        "errorRequiredMessage") }}
                </div>
            </div>
            <div id="containerSelectMetallique" class="row row-displayable" style="max-height: 0 !important;padding: 0 15px">
                <div id="existingDuct" class="row row-displayable no-padding-mobile" style="padding: 0 15px;">
                    <div id="idMarqueDuctDiv" class="col-sm-3 col-lg-4 essential-data-field" style="display:none;">
                        {{ forms.select(
                            'Marque conduit',
                            "idMarqueDuct",
                            "idMarqueDuct",
                            null,
                            "-- Choisissez une marque --",
                            1,
                            null,
                            true,
                            false,
                            false,
                            false,
                            "errorRequiredMessage") }}
                    </div>
                    <div id="loaderMarqueDuct" class="col-sm-3 col-lg-4" style="display:block;text-align: center;width: 100%">
                        <img src="{{ asset('images/loader-service.gif') }}" alt="Loader" style="width: 126px;margin-left: -10%;">
                    </div>
                    <div id="idModeleDuctDiv" class="col-sm-3 col-lg-4 essential-data-field" style="display:none;">
                        {{ forms.select(
                            'Modèle conduit',
                            "idModeleDuct",
                            "idModeleDuct",
                            null,
                            "-- Choisissez un modèle --",
                            2,
                            null,
                            true,
                            false,
                            false,
                            false,
                            "errorRequiredMessage") }}
                    </div>
                </div>
                <div id="missingDuct" class="row row-displayable no-padding-mobile" style="padding: 0 15px;max-height: 0 !important;">
                    <div class="col-sm-3 col-lg-4 essential-data-field">
                        {{ forms.input(
                            'Marque conduit',
                            "text",
                            "brand-duct",
                            "brand-duct",
                            data['brand-duct'],
                            null,
                            null,
                            true,
                            false,
                            false,
                            false,
                            "errorRequiredMessage") }}
                    </div>
                    <div class="col-sm-3 col-lg-4 essential-data-field">
                        {{ forms.input(
                            'Modèle conduit',
                            "text",
                            "model-duct",
                            "model-duct",
                            data['model-duct'],
                            null,
                            null,
                            true,
                            false,
                            false,
                            false,
                            "errorRequiredMessage") }}
                    </div>
                </div>
                <div id="ductNotFound" class="row btn-not-found" style="display:none;padding: 0 15px 0 30px; margin-bottom: 5px;margin-top: 15px;">
                    <span class="col-sm-3 col-lg-4">Je ne trouve pas mon conduit (modèle, marque)</span>
                </div>
            </div>
            <div id="containerMaconne" class="row row-displayable" style="max-height: 0 !important;padding: 0 15px;">
                <div class="col-sm-3 col-lg-4 essential-data-field">
                    {{ forms.select(
                        'Matériau du conduit',
                        "duct-material",
                        "duct-material",
                        data['ductMaterialSelect'],
                        "-- Sélectionnez votre choix --",
                        2,
                        data['ductMaterial'],
                        true,
                        false,
                        false,
                        false,
                        "errorRequiredMessage") }}
                </div>
                <div class="col-sm-3 col-lg-4 essential-data-field">
                    {{ forms.select(
                        'Conduit thermiquement satisfaisant',
                        "duct-thermally-ok",
                        "duct-thermally-ok",
                        [
                            {'id': 'yes', 'label': 'Oui'},
                            {'id': 'no', 'label': 'Non'}
                        ],
                        "-- Sélectionnez votre choix --",
                        2,
                        data['duct-thermally-ok'],
                        true,
                        false,
                        false,
                        false,
                        "errorRequiredMessage") }}
                </div>
                <div class="col-sm-3 col-lg-4 essential-data-field">
                    {{ forms.input(
                        'Épaisseur paroi (mm)',
                        "number",
                        "wallthickness",
                        "wallthickness",
                        data['wallthickness'],
                        null,
                        null,
                        true,
                        false,
                        false,
                        false,
                        "errorRequiredMessage") }}
                </div>
            </div>
            <div id="containerSelectTubage" class="row row-displayable" style="max-height: 0 !important;padding: 0 15px;">
                <div id="existingTubage" class="row row-displayable no-padding-mobile" style="padding: 0 15px;">
                    <div id="idMarqueTubageDiv" class="col-sm-3 col-lg-4 essential-data-field" style="display:none;">
                        {{ forms.select(
                            'Marque tubage',
                            "idMarqueTubage",
                            "idMarqueTubage",
                            null,
                            "-- Choisissez une marque --",
                            1,
                            null,
                            true,
                            false,
                            false,
                            false,
                            "errorRequiredMessage") }}
                    </div>
                    <div id="loaderMarqueTubage" class="col-sm-3 col-lg-4" style="display:block;text-align: center;width: 100%">
                        <img src="{{ asset('images/loader-service.gif') }}" alt="Loader" style="width: 126px;margin-left: -10%;">
                    </div>
                    <div id="idModeleTubageDiv" class="col-sm-3 col-lg-4 essential-data-field" style="display:none;">
                        {{ forms.select(
                            'Modèle tubage',
                            "idModeleTubage",
                            "idModeleTubage",
                            null,
                            "-- Choisissez un modèle --",
                            2,
                            null,
                            true,
                            false,
                            false,
                            false,
                            "errorRequiredMessage") }}
                    </div>
                </div>
                <div id="missingTubage" class="row row-displayable no-padding-mobile" style="padding: 0 15px;max-height: 0 !important;">
                    <div class="col-sm-3 col-lg-4 essential-data-field">
                        {{ forms.input(
                            'Marque tubage',
                            "text",
                            "brand-tubage",
                            "brand-tubage",
                            data['brand-tubage'],
                            null,
                            null,
                            true,
                            false,
                            false,
                            false,
                            "errorRequiredMessage") }}
                    </div>
                    <div class="col-sm-3 col-lg-4 essential-data-field">
                        {{ forms.input(
                            'Modèle tubage',
                            "text",
                            "model-tubage",
                            "model-tubage",
                            data['model-tubage'],
                            null,
                            null,
                            true,
                            false,
                            false,
                            false,
                            "errorRequiredMessage") }}
                    </div>
                </div>
                <div class="row no-padding-mobile" style="width: 100%; padding: 0 15px;">
                    <div class="col-sm-3 col-lg-4 essential-data-field">
                        {{ forms.select(
                            'Résistance du tubage aux condensats',
                            "tubage",
                            "tubage",
                            [
                                {'id': 'W', 'label': 'Classe W  (Wet-humide)'},
                                {'id': 'D', 'label': 'Classe D (Dry-sec)'}
                            ],
                            "-- Sélectionnez votre choix --",
                            2,
                            data['tubage']) }}
                    </div>
                </div>
                <div id="tubageNotFound" class="row btn-not-found" style="display:none;padding: 0 15px 0 30px; margin-bottom: 5px;margin-top: 15px;">
                    <span class="col-sm-3 col-lg-4">Je ne trouve pas mon tubage (modèle, marque)</span>
                </div>
            </div>
        </form>
    </div>
</div>