{# ###### CONFIGURE GLOBAL STEP ###### #}
<div id="configurationStepBlock" style="display: block;margin-bottom: 0;">
    <div class="col-sm-6 col-md-6 col-lg-6" style="
    padding-left: 0;margin-bottom: 2%">
        <fieldset class="sous-rubrique">
            <legend class="sous-rubrique-titre" style="padding-top: 0;">Étape</legend>
            <form id="formBaseInfo">
                {# ###### CONFIGURE STEP BLOCK ###### #}
                {{ include('rule_engine/config/config_question.html.twig') }}
            </form>

            <div id="formShowPostTForm"
                 class="col-sm-12 col-md-12 col-lg-12 row optButton"
                 style="display: none;margin-bottom: 2%;">
                <hr style="margin-left: 2%;">
                {# Validateur block #}
                {{ include('rule_engine/config/config_post_treatment.html.twig') }}
            </div>
        </fieldset>
    </div>
    <div id="col-6-responseBlock" class="col-sm-6 col-md-6 col-lg-6" style="padding:0;margin-bottom: 2%">
        <fieldset id="baseListResponseBlock" class="sous-rubrique" style="display: block">
            <legend class="sous-rubrique-titre" style="padding-top: 0;">Liste des réponses</legend>
            {# ###### CONFIGURE RESPONSE SUMMARY BLOCK ###### #}
            {{ include('rule_engine/config/config_summary_response.html.twig') }}
        </fieldset>
        {# ###### CONFIGURE RESPONSE FORM BLOCK ###### #}
        <fieldset id="baseResponseBlock" class="sous-rubrique" style="display:block;margin-top: 2%">
            <legend class="sous-rubrique-titre" style="padding-top: 0;">Réponses</legend>
            <form id="formResponse" style="display: block">
                <div>
                    <div id="nextStepRefForUniqRow" class="row" style="padding-left: 15px;">
                        <div class="col-sm-5 col-md-5 col-lg-5" style="margin-right: -2%;margin-top: 1%">
                            <label for="nextStepReference" class="control-label" style="font-size: 1.4em;">Référence
                                de la prochaine étape<span
                                        class="asterix">*</span></label>
                            <select required="required" id="nextStepReference" name="nextStepReference"
                                    class="form-control">
                                <option value="null">-- Sélectionnez votre choix --</option>
                            </select>
                            <span id="nextStepReferenceRequired" class="errorMessage" style="display: none">
                                        Le champ est obligatoire
                                    </span>
                        </div>
                        <div class="col-sm-1 col-md-1 col-lg-1" style="margin-top: 30px;">
                            <button title="Créer une nouvelle étape vide" id="addBlankStepBtn"
                                    onclick="addNewBlankStep()" type="button" class="boutonAction">+
                            </button>
                        </div>
                        <div class="col-sm-6 col-md-6 col-lg-6" style="margin-top: 26px;">
                            <i><small>Cette référence sera utilisée comme identifiant pour
                                    basculer vers la question suivante</small></i>
                        </div>
                        <hr style="margin-left: 1%;margin-top: 10%;width: 96%;">
                    </div>
                    <div id="normalValueRow" class="row" style="padding: 0 15px;">
                        <div class="col-sm-6 col-md-6 col-lg-6" style="margin-top: 5px;">
                            <label for="normalValue" class="control-label">Libellé<span
                                        class="asterix">*</span></label>
                            <input required="required" type="text" id="normalValue" name="normalValue"
                                   class="form-control">
                            <span id="normalValueRequired" class="errorMessage" style="display: none">
                                Le champ est obligatoire
                            </span>
                        </div>
                        <div class="col-sm-6 col-md-6 col-lg-6" style="margin-top: 5px;">
                            <label for="shortValue" class="control-label">Libellé court<span
                                        class="asterix">*</span></label>
                            <input required="required" type="text" id="shortValue" name="shortValue"
                                   class="form-control">
                            <span id="shortValueRequired" class="errorMessage" style="display: none">
                                    Le champ est obligatoire
                                </span>
                        </div>

                    </div>
                    <div class="row" style="margin-top: 1%;padding: 0 15px;">
                        <div class="col-sm-6 col-md-6 col-lg-6" style="margin-top: 5px;">
                            <label for="helpResponseLabel" class="control-label">Libellé aide</label>
                            <input type="text" id="helpResponseLabel" name="helpResponseLabel" class="form-control">
                        </div>
                    </div>
                    <div id="containerIsNumberInputValue" class="row"
                         style="margin-top: 1%;margin-bottom: 2%;padding-left: 15px;">
                        <div class="col-sm-12 col-md-12 col-lg-12" style="margin-top: 5px;">
                            <input type="checkbox" id="isNumberInputValue" name="isNumberInputValue"
                                   style="transform: scale(1.2);cursor: pointer;">
                            <label for="isNumberInputValue" id="isNumberInputValue"
                                   class="control-label control-checkbox-label">
                                Est-ce que la réponse attendue doit être un nombre positif ?
                            </label>
                        </div>
                    </div>
                    <div class="row" style="margin-top: 1%;margin-bottom: 2%;padding-left: 15px;">
                        <div class="col-sm-12 col-md-12 col-lg-12" style="margin-top: 5px;">
                            <input type="checkbox" id="isDefaultValue" name="isDefaultValue"
                                   style="transform: scale(1.2);cursor: pointer;">
                            <label for="isDefaultValue" id="isDefaultValueLabel"
                                   class="control-label control-checkbox-label">
                                Est-ce la réponse par défaut de cette question ?
                            </label>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-12" style="margin-top: -5px;margin-left: 26px;">
                            <small style="color:#7F7F7F !important;font-size: smaller;font-style: italic;">
                                Attention : lors d'une question à réponse unique, vous ne pouvez pas appliquer
                                plusieurs réponses par défaut
                            </small>
                        </div>
                    </div>
                    <div class="row"
                         style="margin-bottom:1%;margin-top: 1%;margin-left: 0;display:none;padding-left: 15px;"
                         id="conditionnalDefaultRow">
                        <label class="control-label" for="conditionalDefault">
                            Condition à appliquer pour la mise en défaut de cette réponse
                        </label>
                        <input type="text" id="conditionalDefault" name="conditionalDefault" class="form-control"
                               style="width: 98%;">
                        <i><small>Si aucune condition n'est renseignée alors cette réponse sera par défaut quoiqu'il
                                arrive</small></i>
                    </div>
                    <div class="row"
                         style="margin-bottom:3%;margin-top: 1%;margin-left: 0;display:none;padding-left: 15px;padding-right: 4%;"
                         id="defaultTextValueRow">
                        <label class="control-label" for="defaultTextValue">
                            Formule à appliquer pour récupérer la valeur par défaut ou renseigner une valeur brute
                        </label>
                        <input type="text" id="defaultTextValue" name="defaultTextValue" class="form-control">
                    </div>
                    <div class="row" style="padding-left: 15px;">
                        <div class="col-sm-12 col-md-12 col-lg-12">
                            <input type="checkbox" id="hasAdditionalInfo" name="hasAdditionalInfo"
                                   style="transform: scale(1.2);cursor: pointer;">
                            <label for="hasAdditionalInfo" id="isDefaultValueLabel"
                                   class="control-label control-checkbox-label">
                                Souhaitez vous demander des informations supplémentaires pour cette réponse
                            </label>
                        </div>
                    </div>
                    <div class="row" style="margin-left: 0;display:none;padding-left: 15px;" id="additionalInfoRow">
                        <div class="col-sm-12 col-md-12 col-lg-12" style="margin-top: 5px;">
                            <label class="control-label" for="additionalLabel01">
                                #1 Libellé de l'information complémentaire (Ex : Largeur / Longueur / diamètre...)
                            </label>
                            <input style="width: 48%" type="text" id="additionalLabel01" name="additionalLabel01"
                                   class="form-control">
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-12" style="margin-top: 5px;">
                            <input type="checkbox" id="label01IsNumberInputValue" name="label01IsNumberInputValue"
                                   style="transform: scale(1.2);cursor: pointer;">
                            <label for="label01IsNumberInputValue"
                                   class="control-label control-checkbox-label">
                                Est-ce que l'information complémentaire #1 attendue doit être un nombre positif ?
                            </label>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-12" style="margin-top: 5px;">
                            <label class="control-label" for="additionalLabel02">
                                #2 Libellé de l'information complémentaire (Ex : Largeur / Longueur / diamètre...)
                            </label>
                            <input style="width: 48%" type="text" id="additionalLabel02" name="additionalLabel02"
                                   class="form-control">
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-12" style="margin-top: 5px;">
                            <input type="checkbox" id="label02IsNumberInputValue" name="label02IsNumberInputValue"
                                   style="transform: scale(1.2);cursor: pointer;">
                            <label for="label02IsNumberInputValue"
                                   class="control-label control-checkbox-label">
                                Est-ce que l'information complémentaire #2 attendue doit être un nombre positif ?
                            </label>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-12" style="margin-top: 5px;">
                            <label class="control-label" for="additionalLabel03">
                                #3 Libellé de l'information complémentaire (Ex : Largeur / Longueur / diamètre...)
                            </label>
                            <input style="width: 48%" type="text" id="additionalLabel03" name="additionalLabel03"
                                   class="form-control">
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-12" style="margin-top: 5px;">
                            <input type="checkbox" id="label03IsNumberInputValue" name="label03IsNumberInputValue"
                                   style="transform: scale(1.2);cursor: pointer;">
                            <label for="label03IsNumberInputValue"
                                   class="control-label control-checkbox-label">
                                Est-ce que l'information complémentaire #3 attendue doit être un nombre positif ?
                            </label>
                        </div>
                    </div>
                    <input type="hidden" id="displayOrder" name="displayOrder">
                    <div class="row" style="text-align:center;margin-top: 1%;">
                        <div class="col-sm-12 col-md-12 col-lg-12" style="margin-bottom: 1%;margin-top: 2%;">
                            <button id="addResponseInfoSubmitBtn" type="button"
                                    style="width:250px;display: block;"
                                    class="btn boutonAction float-right font-weight-600">{{ button_label|default('Ajouter cette réponse') }}</button>
                        </div>
                    </div>
                </div>
            </form>
            <div id="formShowValidatorForm"
                 class="col-sm-12 col-md-12 col-lg-12 row optButton"
                 style="display: none;margin-bottom: 2%;">
                <hr style="margin-left: 2%;">
                {# Validateur block #}
                {{ include('rule_engine/config/config_validator.html.twig') }}
            </div>
        </fieldset>
    </div>
    <div class="row" style="text-align: center;margin-top: 3%;">
        <div class="col-sm-12 col-md-12 col-lg-12">
            <button id="addGlobalStepBtn" type="button"
                    style="width: 300px;display: none"
                    class="btn boutonAction font-weight-600">{{ button_label|default('Terminer cette étape') }}</button>
        </div>
    </div>
</div>
<script src="{{ asset('install-bois/rule-engine/configureStep.js') ~ "?rnd=" ~ random() }}"></script>