<div class="modal" id="actions-builder-modal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content" id="actions-builder-app">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h2 class="modal-title" v-text="actionGroup ? actionGroup.label : ''"></h2>
      </div>

      <!-- Modal Body -->
      <div class="modal-body">
        <!-- Choose form (only for bazar actions) -->
        <div v-if="needFormField" class="form-group">
          <label class="control-label">{{ _t('ACTION_BUILDER_CHOOSE_FORM') }}</label>
          <select :value="getSelectedFormId()" required class="form-control" @change="setSelectedFormId" ref="formSelection">
            <option v-for="(name, id) in formIds" :value="id" v-text="name"></option>
          </select>
          <span v-if="isBazarListeAction" class="text-muted">{{ _t('ACTION_BUILDER_SEVERAL_FORMS_HINT')|raw }}</span>
        </div>

        <!-- Choose Action -->
        <div class="form-group" v-show="Object.keys(this.actions).length > 1">
          <label class="control-label" v-text="isBazarListeAction ? '{{ _t('ACTION_BUILDER_CHOOSE_TEMPLATE') }}' : '{{ _t('ACTION_BUILDER_CHOOSE_ACTION') }}'"></label>
          <select v-model="selectedActionId" required class="form-control">
            <template v-for="(action, actionId) in actions">
              <option v-if="action && action.label" :key="actionId" :value="actionId" v-html="action.label"></option>
            </template>
          </select>
        </div>

        <!-- Action Configuration -->
        <div v-if="selectedAction && (!needFormField || selectedForms)" class="action-parameters-container">

          <div v-if="selectedAction.hint" class="alert alert-info" v-html="selectedAction.hint"></div>

          <!-- Iframe Preview -->
          <preview-action :wiki-code="wikiCodeForIframe" :height="actionGroup ? actionGroup.previewHeight : null"></preview-action>

          <div class="panels-config-container">
            <div v-for="panel in configPanels" class="config-panel" :class="panel.params.class" 
                 :style="{width: panel.params.width || (configPanels.length == 1 ? '50%' : '33%')}" v-show="checkVisibility(panel.params)">
              <h3 v-text="panel.params.title || '{{ _t('ACTION_BUILDER_PARAMETERS') }}'"></h3>
              <div class="config-panel-content">
                <template v-for="(config, propName) in panel.params.properties" :key="propName">
                  <div v-html="config.intro" v-show="checkVisibility(config)"></div>
                  <component :is="componentIdFrom(config)" :ref="refFrom(config)"
                             :value="values[propName]" v-on:input="updateValue(propName, $event)"
                             v-show="checkVisibility(config)"
                             :name="propName" :values="values"
                             :config="config" :selected-forms="selectedForms">
                  </component>
                </template>
              </div>
            </div>
          </div>

          <!-- Advanced Params Checkbox -->
          <input-checkbox v-if="isSomeAdvancedParams" :value="displayAdvancedParams" @input="displayAdvancedParams = $event"
                          :config="{label: '{{ _t('ACTION_BUILDER_ADVANCED_PARAMETERS') }}'}"
                          class="advanced-params">
          </input-checkbox>

          <div class="col-md-12 result-container">
            <h3>{{ _t('ACTION_BUILDER_WIKI_CODE_TITLE') }}</h3>
            <wiki-code-input :action-params="actionParams" :is-editing="isEditingExistingAction"
                             :editor="editor" :wiki-code="wikiCode"></wiki-code-input>
          </div>
        </div>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-default btn-block" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

{{ include_css('tools/templates/libs/vendor/font-picker/fontawesome-picker.min.css') }}
{{ include_javascript('tools/templates/libs/vendor/font-picker/fontawesome-picker.min.js') }}

{{ include_javascript('javascripts/vendor/spectrum-colorpicker2/spectrum.min.js') }}
{{ include_css('styles/vendor/spectrum-colorpicker2/spectrum.min.css') }}

{{ include_css('styles/vendor/leaflet/leaflet.css') }}
{{ include_javascript('javascripts/vendor/leaflet/leaflet.min.js') }}

{{ include_javascript(config.debug == 'yes' ? 'javascripts/vendor/vue/vue.js' : 'javascripts/vendor/vue/vue.min.js') }}

{{ include_javascript('javascripts/vendor/vue-select/vue-select.min.js') }}
{{ include_css('styles/vendor/vue-select/vue-select.css') }}

{{ include_javascript('tools/aceditor/presentation/javascripts/actions-builder.js', false, true) }}
{{ include_css('tools/aceditor/presentation/styles/actions-builder.css') }}
