{% import "forms-macro/inputs_form.html.twig" as forms %}
<div class="row rubrique container-device">
    <div class="rubrique_titre">
        <span>Appareil de l'étude</span>
    </div>
    <div class="container-form-device">
        <form id="choiceDeviceForm">
            <div id="existingDevice" class="row row-displayable" style="padding: 0 15px 0 30px;">
                <div id="idMarqueDiv" class="col-sm-3 col-lg-4" style="display:none;padding: 0 15px 0 0;">
                    {{ forms.select(
                        'Marque',
                        "idMarque",
                        "idMarque",
                        null,
                        "-- Choisissez une marque --",
                        1,
                        null,
                        true,
                        false,
                        false,
                        false,
                        "errorRequiredMessage") }}
                </div>
                <div id="loaderMarque" 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="idModeleDiv" class="col-sm-3 col-lg-4" style="display:none;padding: 0 15px 0 0;">
                    {{ forms.select(
                        'Modèle',
                        "idModele",
                        "idModele",
                        null,
                        "-- Choisissez un modèle --",
                        2,
                        null,
                        true,
                        false,
                        false,
                        false,
                        "errorRequiredMessage") }}
                </div>
                {% if "ramonage" in serviceCreatedOnProject.serviceRE.slug %}
                    <div id="idSerieNumberDiv" class="col-sm-3 col-lg-4" style="display:none;padding: 0 15px 0 0;">
                        {{ forms.input(
                            'Numéro de série',
                            "text",
                            "serie-number",
                            "serie-number",
                            serviceCreatedOnProject.serviceDataValueKey('serie-number')) }}
                    </div>
                {% endif %}
                <div id="infosDevice" style="display:none;font-size: 14px;margin-bottom: 10px;" class="col-sm-3 col-lg-5">
                    <h5 style="font-weight: bold;font-size: 16px;color: #FC971F;margin: 0;"><span id="infoMarque"></span> <span id="infoModele"></span> : les informations techniques</h5>
                    <span id="infoTypeAppareil"></span>&nbsp;<span id="infoCombustible"></span><br/>
                    <span style="font-weight: bold">Puissance nominale : </span><span id="infoPn"></span><br/>
                    <span style="font-weight: bold">Puissance réduite : </span><span id="infoPr"></span><br/>
                </div>
            </div>
            <div id="missingDevice" class="row row-displayable" style="padding: 0 15px 0 30px;max-height: 0 !important;">
                <div class="row">
                    <div class="col-sm-3 col-lg-4 essential-data-field">
                        {{ forms.input(
                            'Marque',
                            "text",
                            "brand",
                            "brand",
                            serviceCreatedOnProject.serviceDataValueKey('brand'),
                            null,
                            null,
                            true,
                            false,
                            false,
                            false,
                            "errorRequiredMessage") }}
                    </div>
                    <div class="col-sm-3 col-lg-4 essential-data-field">
                        {{ forms.input(
                            'Modèle',
                            "text",
                            "model",
                            "model",
                            serviceCreatedOnProject.serviceDataValueKey('model'),
                            null,
                            null,
                            true,
                            false,
                            false,
                            false,
                            "errorRequiredMessage") }}
                    </div>
                    <div class="col-sm-3 col-lg-4 essential-data-field">
                        {{ forms.input(
                            'Puissance nominale (kW)',
                            "number",
                            "pn",
                            "pn",
                            serviceCreatedOnProject.serviceDataValueKey('pn'),
                            null,
                            null,
                            false,
                            null,
                            false,
                            false,
                            null,
                            1) }}
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-3 col-lg-4 essential-data-field">
                        {{ forms.input(
                            'Puissance réduite (kW)',
                            "number",
                            "pr",
                            "pr",
                            serviceCreatedOnProject.serviceDataValueKey('pr'),
                            null,
                            null,
                            false,
                            null,
                            false,
                            false,
                            null,
                            1) }}
                    </div>
                    <div class="col-sm-3 col-lg-4 essential-data-field">
                        {{ forms.select(
                            'Combustible',
                            "combustible",
                            "combustible",
                            [
                                {'id': 'CO_GR','label': 'Granulés'},
                                {'id': 'CO_BU', 'label': 'Bûches'},
                                {'id': 'other', 'label': 'Autre'}
                            ],
                            "-- Sélectionnez votre choix --",
                            2,
                            serviceCreatedOnProject.serviceDataValueKey('combustible'),
                            true,
                            false,
                            false,
                            false,
                            "errorRequiredMessage") }}
                    </div>
                    <div id="otherCombustibleField" class="col-sm-3 col-lg-4" style="display:none;padding: 0 15px 0 0;">
                        {{ forms.input(
                            'Autre combustible',
                            "text",
                            "other-combustible",
                            "other-combustible",
                            serviceCreatedOnProject.serviceDataValueKey('other-combustible'),
                            null,
                            null,
                            true,
                            false,
                            false,
                            false,
                            "errorRequiredMessage") }}
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-3 col-lg-4 essential-data-field">
                        {{ forms.select(
                            'Type',
                            "type-device",
                            "type-device",
                            [
                                {'id': 'TY_PO','label': 'Poêle'},
                                {'id': 'TY_IF', 'label': 'Insert'},
                                {'id': 'TY_CU', 'label': 'Cuisinière'},
                                {'id': 'TY_DF', 'label': 'Double foyer'},
                                {'id': 'TY_AF', 'label': 'Foyer ouvert'},
                                {'id': 'TY_CH', 'label': 'Chaudière'}
                            ],
                            "-- Sélectionnez votre choix --",
                            2,
                            serviceCreatedOnProject.serviceDataValueKey('type-device'),
                            true,
                            false,
                            false,
                            false,
                            "errorRequiredMessage") }}
                    </div>
                    {% if "ramonage" in serviceCreatedOnProject.serviceRE.slug %}
                        <div class="col-sm-3 col-lg-4 essential-data-field">
                            {{ forms.input(
                                'Numéro de série',
                                "text",
                                "serie-number",
                                "serie-number",
                                serviceCreatedOnProject.serviceDataValueKey('serie-number')) }}
                        </div>
                    {% endif %}
                </div>
            </div>
            <div id="deviceNotFound" 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 appareil (modèle, marque)</span>
            </div>
        </form>
    </div>
</div>