{{ header }}
<header class="background-white bottom-margin-large">
  <div class="container-fluid">
    <div class="row no-space-xs">
      <div class="col-xs-12">
        <div class="content-box vertical-padding-large flex between-xs middle-xs">
          <div>
            <span class="text-x-large text-dark">{{ heading_title }}</span>
            <div class="adm-breadcrumb">
              {% for breadcrumb in breadcrumbs %}
              <i class="fas fa-angle-right text-x-small text-gray horizontal-padding-small"></i>
              <a class="text-x-small text-gray text-decoration-none"
                href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>
              {% endfor %}
            </div>
          </div>
          <div class="flex flex-row middle-xs">
            <a href="{{ cancel }}" class="btn-default btn-medium btn-outline right-margin-small">
              <span>Cancelar</span>
            </a>
            <button type="button" class="btn-default btn-medium btn-primary js-submit-main-form">
              <span>Salvar</span>
            </button>
          </div>
          <div class="full-width">
            {% if error_warning %}<div class="warning top-margin-medium">{{ error_warning }}</div>{% endif %}
            {% if success %}<div class="success top-margin-medium">{{ success }}</div>{% endif %}
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
<div class="container-fluid">
  <form action="{{ action }}" method="post" class="js-main-form">
    <div class="row">
      <div class="col-xs-12 {% if test_email_active %}col-md-8{% endif %}">
        <div class="content-box padding-large background-white shadow-small">
          <input type="hidden" name="tipo_layout" value="{{ tipo_layout }}" id="tipo_layout">

          <label class="field field-medium bottom-margin-x-large">
            <label class="field-label required"> {{ entry_descricao }}</label>
            <input class="field-entry" type="text" name="descricao" value="{{ descricao }}" maxlength="240" />
            {% if error_descricao %}<span class="error">{{ error_descricao }}</span>{% endif %}
          </label>

          <label class="field field-medium bottom-margin-x-large">
            <label class="field-label">{{ entry_conteudo_layout }}</label>
            {% if editor_description_active %}
            <span class="field-description">{{ entry_conteudo_layout_description }}</span>
            {% endif %}
            <textarea
              id="conteudo_layout"
              name="conteudo_layout"
              class="field-entry"
              data-ckeditor="{{ ckeditor_active }}"
              {% if editor_maxlength_active %}
              maxlength="{{ editor_maxlength }}"
              {% endif %}
              rows="20"
            >{{ conteudo_layout }}</textarea>

            {% if editor_maxlength_active %} <span class="field-description js-field-maxlength"></span> {% endif %}
            {% if error_conteudo_layout %}<span class="error">{{ error_conteudo_layout }}</span>{% endif %}
          </label>

          {% if Type_LayoutPersonalizadoVarButtons %}
            <span class="visible-block text-small text-bold text-dark bottom-margin-small">{{ text_inserir }}</span>
            <div class="flex">
              {% for key, value in Type_LayoutPersonalizadoVarButtons %}
                <button type="button" class="btn-default btn-small right-margin-small bottom-margin-small js-variables" data-variable-name="{{ key }}">
                  <span>{{ value }}</span>
                </button>
              {% endfor %}
            </div>
          {% endif %}

        </div>
      </div>
      {% if test_email_active %}
        <div class="col-xs-12 col-md-4">
          <div class="content-box padding-large background-white shadow-small">
            <label class="field">
              <span class="field-label">{{ entry_email_teste }}</span>
              <span class="field-description">{{ entry_email_teste_description }}</span>
              <div class="js-tag-container padding-small border-gray rounded-x-small">
                <input class="full-width border-transparent background-white text-dark">
              </div>
            </label>

            <button type="button" class="btn-default btn-medium btn-primary top-margin-medium js-email-test">
              <span>{{ entry_teste }}</span>
            </button>

            <div class="js-feedback-message"></div>
          </div>
        </div>
      {% endif %}
    </div>
  </form>
</div>

{{ footer }}
<script>
  window.testEmailActive = '{{ test_email_active }}';
</script>