{{ include_javascript('javascripts/vendor/jquery-ui-sortable/jquery-ui.min.js') }}
{{ include_javascript('javascripts/vendor/formBuilder/form-builder.min.js') }}
{{ include_javascript('tools/bazar/presentation/javascripts/form-edit-template/form-edit-template.js', false, true) }}
{{ include_css('tools/bazar/presentation/styles/form-edit-template.css') }}

<form
  action=""
  method="post"
  name="formulaire"
  id="formulaire"
  class="form-horizontal"
>
  <div class="control-group form-group">
    <label class="control-label col-sm-3">
      {{ _t('BAZ_NOM_FORMULAIRE') }}
      <span class="symbole_obligatoire"></span>
    </label>
    <div class="controls col-sm-9">
      <input
        class="form-control input-xxlarge"
        name="bn_label_nature"
        type="text"
        value="{{ form.bn_label_nature }}"
        required
      />
    </div>
  </div>
  <div class="control-group form-group">
    <label class="control-label col-sm-3">
      {{ _t('BAZ_DESCRIPTION') }}
    </label>
    <div class="controls col-sm-9">
      <textarea
        class="form-control input-xxlarge"
        cols="20"
        rows="3"
        name="bn_description"
      >
        {{- form.bn_description -}}
      </textarea>
    </div>
  </div>

  <div class="control-group form-group">
    <label class="control-label col-sm-3 form-builder-label">
      {{ _t('BAZ_TEMPLATE') }}
      <span class="symbole_obligatoire"></span>
    </label>
    <div class="controls col-sm-9">
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active">
          <a href="#formbuilder" aria-controls="formbuilder" role="tab" data-toggle="tab">
            {{ _t('BAZ_FORM_GRAPHICAL_BUILDER') }}
          </a>
        </li>
        <li role="presentation">
          <a href="#code" aria-controls="code" role="tab" data-toggle="tab">
            {{ _t('BAZ_FORM_WIKI_CODE') }}
          </a>
        </li>
      </ul>

      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="formbuilder">
          <!-- container where the form bulder will be rendered -->
          <div id="form-builder-container"></div>
        </div>
        <div role="tabpanel" class="tab-pane" id="code">
          <textarea
            class="form-control input-xxlarge"
            id="form-builder-text"
            cols="20"
            rows="15"
            name="bn_template"
            required
          >
            {{- form.bn_template ?? ('texte***bf_titre***' ~ _t('BAZ_TITREANNONCE') ~ '*** *** *** *** ***text***1***') -}}
          </textarea>
        </div>
      </div>
    </div>
  </div>

  {% if onlyOneEntryOptionAvailable %}
    <div class="controls checkbox">
      <label for="bn_only_one_entry">
			    {% apply spaceless %}
            <input 
              id="bn_only_one_entry" 
              type="checkbox" 
              value="Y" 
              name="bn_only_one_entry"{{ form.bn_only_one_entry == "Y" ? ' checked' : ''}}
              onchange="javascript:if($(this).prop('checked')){$('#bn_only_one_entry_message-group').show();}else{$('#bn_only_one_entry_message-group').hide();};"
              />
            <span>{{ _t('BAZ_ONLY_ONE_ENTRY_FOR_THIS_FORM') }}</span>
			    {% endapply %}
        </label>
    </div>
    <div id="bn_only_one_entry_message-group" class="control-group form-group"{{ form.bn_only_one_entry == "Y" ? '': ' style="display:none;"' }}>
      <label class="control-label col-sm-3">
        {{ _t('BAZ_MESSAGE_IF_OTHER_ENTRY_EXIST') }}
      </label>
      <div class="controls col-sm-9">
        <input
          class="form-control input-xxlarge"
          name="bn_only_one_entry_message"
          type="text"
          value="{{ form.bn_only_one_entry_message }}"
          placeholder="{{ _t('BAZ_FORM_DEFAULT_MESSAGE_FOR_OTHER_ENTRY_IN_FORM') }}"
        />
      </div>
    </div>
  {% endif %}

  <div class="control-group form-group">
    <div class="controls col-sm-9 col-sm-offset-3">
      <div class="accordion-heading">
        <a
          class="plusinfos btn btn-xs btn-info"
          data-toggle="collapse"
          data-parent="#accordion4"
          href="#collapseFour"
        >
          {{ _t('ADVANCED_CONFIGURATION') }}
        </a>
      </div>
    </div>
  </div>

  <div class="accordion" id="accordion4">
    <div class="accordion-group">
      <div id="collapseFour" class="accordion-body collapse">
        <div class="accordion-inner">
          <div class="control-group form-group">
            <label class="control-label col-sm-3">
              {{ _t('BAZ_CONDITION') }}
            </label>
            <div class="controls col-sm-9">
              <textarea
                class="form-control input-xxlarge"
                cols="20"
                rows="3"
                name="bn_condition"
              >
                {{- form.bn_condition -}}
              </textarea>
            </div>
          </div>
          <div class="control-group form-group">
            <label class="control-label col-sm-3"
              >{{ _t('BAZ_SEM_CONTEXT') }}</label
            >
            <div class="controls col-sm-9">
              <textarea
                class="form-control input-xxlarge"
                cols="20"
                rows="3"
                name="bn_sem_context"
              >
                {{- form.bn_sem_context -}}
              </textarea>
            </div>
          </div>
          <div class="control-group form-group">
            <label class="control-label col-sm-3">
              {{ _t('BAZ_SEM_TYPE') }}
            </label>
            <div class="controls col-sm-9">
              <input
                class="form-control input-xxlarge"
                name="bn_sem_type"
                type="text"
                value="{{ form.bn_sem_type }}"
              />
            </div>
          </div>
          <div class="controls checkbox">
            <label>
              <input type="checkbox" name="bn_sem_use_template" value="1" {% if form.bn_sem_use_template %}checked{% endif %}>
              {{ _t('BAZ_SEM_USE_TEMPLATE_DESC') }}
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-9 col-sm-offset-3">
      <button type="submit" name="valider" class="btn btn-primary">
        {{ _t('BAZ_VALIDER') }}
      </button>
      <a class="btn btn-xs btn-default" href="{{ url({ params: { vue: 'formulaire' }}) }}">
        {{ _t('BAZ_ANNULER') }}
      </a>
    </div>
  </div>
  <div class="col-sm-9 col-sm-offset-3 symbole_obligatoire">
    {{ _t('BAZ_CHAMPS_REQUIS') }}
  </div>
  {% if form %}
  <input
    type="hidden"
    name="bn_id_nature"
    value="{{ form.bn_id_nature }}"
  />
  {% endif %}
</form>

<script>
  var groupsList = {{ groupsList|json_encode()|raw }};
  var formAndListIds = {{ formAndListIds|json_encode()|raw }};
</script>
