{% extends 'base/layout.twig' %}

{% block main_content %}

  <validation-observer
    tag="div"
    ref="validationObserver"
    v-slot="{ handleSubmit, invalid }"
    @submit.prevent="onValidationObserverSubmit()">
    <form
      ref="form"
      @submit.prevent="handleSubmit(onSubmit)"
      :action="action"
      method="post">

      <the-header
        :title="heading_title"
        {% if help_link %}:help="help_link"{% endif %}
        :breadcrumbs='breadcrumbs'
        :tabs="tabs"
        {% block attributes_the_header %}{% endblock %}
        @update-tabs="onChangeContentTab">
        {% block header_actions %}
          <base-button
            :href="back"
            apperance="outline">
            { button_cancel }
          </base-button>
          <base-button
            type="submit"
            :disabled="disableForm || disableSubmitButton"
            :loading="btnSubmitLoading">
            { button_save }
          </base-button>
        {% endblock %}
        <template #notification>
          <base-alert
            v-show="alert.type"
            :apperance="alert.type"
            @close="alert = {}">
            <span v-html="alert.message"></span>
          </base-alert>
        </template>
      </the-header>

      {% block content %}{% endblock %}

    </form>
  </validation-observer>
  
  {% block contentOutForm %}{% endblock %}

{% endblock %}
