{{ header }}
<div class="background-white bottom-margin-large"
data-info='{ "languages": {{ languageForJS|json_encode() }}, "layouts": {{ layouts|json_encode() }}, "modules": {{ modules|json_encode() }} }'
>
  <div class="container-fluid">
    <div class="row no-space-xs middle-xs">
      <div class="col-xs-12 col-sm col-md">
        <div class="content-box vertical-padding-large">
          <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 href="{{ breadcrumb.href }}" class="text-x-small text-gray text-decoration-none">{{ breadcrumb.text }}</a>
            {% endfor %}
          </div>
        </div>
      </div>
      <div class="col-xs-12 col-sm-width-auto col-md-width-auto">
        <div class="content-box vertical-padding-x-large flex flex-row middle-xs">
          <a href="{{ cancel }}" class="btn-default btn-medium btn-outline right-margin-small">
						<span>{{ button_cancel }}</span>
					</a>
					<button type="button" class="btn-default btn-medium btn-primary js-submit-main-form">
						<span>{{ button_save }}</span>
					</button>
        </div>
      </div>
      {% if error_warning %}
        <div class="warning full-width">{{ error_warning }}</div>
      {% endif %}
      <div class="col-xs-12">
        <div class="flex js-tabs" id="tab-info"></div>
      </div>
    </div>
  </div>
</div>
<form action="{{ action }}" method="post" class="js-main-form">
  <div id="tabs_container" class="container-fluid" data-tabs-id="tab-info">
    <div class="row hidden" data-tab="{{ text_conf_gerais }}">
      <div class="col-xs-12 col-md-6">
        <div class="content-box bottom-padding-large">
          <span class="text-x-large text-dark">{{ text_conf_gerais }}</span>
        </div>
        <div class="content-box background-white adm-shodow-light padding-large">
          <div class="row no-space-xs">

            <div id="root" class="field field-medium"> 
              <base-manual title="{{text_info}}">
                <div>{{text_manual}}</div>
              </base-manual>
            </div>

            <label class="field field-medium">
              <span class="field-label">{{ entry_order_status }}</span>
              <select class="field-entry" name="futuragrade_status">
                {% for key, status in Type_Status.getEnumList() %}
                  <option value="{{ key }}" {{ ftr_geral.isSelected(key, futuragrade_status) }}>{{ status }}</option>
                {% endfor %}
              </select>
            </label>
            <label class="field field-medium top-padding-large">
              <span class="field-label">{{ text_tipo_ex_cor }}</span>
              <select class="field-entry" name="futuragrade_ex_tipo">
                <option value="1" {{ futuragrade_ex_tipo ? 'selected' : '' }}>{{ text_tipo_ex_Img }}</option>
                <option value="0" {{ not futuragrade_ex_tipo ? 'selected' : '' }}>{{ text_tipo_ex_button }}</option>
              </select>
            </label>
            <label class="field field-medium top-padding-large">
              <span class="field-label">{{ text_quantidade_exibida }}</span>
              <select class="field-entry" name="futuragrade_quantidade_exibicao">
                <option value="0" {{ (futuragrade_quantidade_exibicao == 0) ? 'selected' : '' }}>{{ text_mostrar_todos }}</option>
                {% for i in 1.. 20 %}
                  <option value="{{ i }}" {{ (futuragrade_quantidade_exibicao == i) ? 'selected' : '' }}>{{ i }}</option>
                {% endfor %}
              </select>
            </label>
            <label class="field field-medium top-padding-large">
              <span class="field-label">{{ text_img_size }}</span>
              <div class="field-entry-group">
                <input class="field-entry mask-number" type="text" name="futuragrade_img_witdh" value="{{ futuragrade_img_witdh }}" size="3" />
                <input class="field-entry mask-number" type="text" name="futuragrade_img_height" value="{{ futuragrade_img_height }}" size="3" />
              </div>
            </label>
            <label class="field field-medium top-padding-large">
              <span class="field-label">{{ entry_order_filtro }}</span>
              <select class="field-entry" name="futuragrade_order_filtro">
                {% for key, status in Type_Status.getEnumList() %}
                  <option value="{{ key }}" {{ ftr_geral.isSelected(key, futuragrade_order_filtro) }}>{{ status }}</option>
                {% endfor %}
              </select>
            </label>
            <label class="field field-medium top-padding-large">
              <span class="field-label">{{ entry_link_opcao }}</span>
              <select class="field-entry" name="futuragrade_opcao_cor">
                {% for key, status in Type_Status.getEnumList() %}
                  <option value="{{ key }}" {{ ftr_geral.isSelected(key, futuragrade_opcao_cor) }}>{{ status }}</option>
                {% endfor %}
              </select>
            </label>
            <label class="field field-medium top-padding-large">
              <span class="field-label">{{ entry_list_product }}</span>
              <span class="field-description">{{ entry_list_product_obs }}</span>
              <select class="field-entry" name="futuragrade_list_product">
                {% for key, status in Type_Status.getEnumList() %}
                  <option value="{{ key }}" {{ ftr_geral.isSelected(key, futuragrade_list_product) }}>{{ status }}</option>
                {% endfor %}
              </select>
            </label>
          </div>
        </div>
      </div>
    </div>

    <div class="row hidden" data-tab="{{ text_conf_filtros }}">
      <div class="col-xs-12 col-md-8">
        <div class="bottom-padding-large flex between-xs middle-xs">
          <span class="text-x-large text-dark">{{ text_conf_filtros }}</span>
          <button id="add_module" class="btn-default btn-primary btn-medium" type="button">
            <span>{{ button_add_module }}</span>
          </button>
        </div>

        <div id="module_list"></div>

      </div>
      <div class="col-xs-12 col-md-4">
        <div class="content-box background-white adm-shodow-light padding-large">
          <div class="row no-space-xs">
            <label class="field field-medium">
              <span class="field-label">{{ text_exibe_cor }}</span>
              <select class="field-entry" name="futuragrade_exibef_cor">
                {% for key, value in Type_DsimDnao.getEnumList() %}
                  <option value="{{ key }}" {{ ftr_geral.isSelected(key, futuragrade_exibef_cor) }}>
                    {{ value }}
                  </option>
                {% endfor %}
              </select>
            </label>
            <label class="field field-medium top-padding-large">
              <span class="field-label">{{ text_exibe_size }}</span>
              <select class="field-entry" name="futuragrade_exibef_size">
                {% for key, value in Type_DsimDnao.getEnumList() %}
                  <option value="{{ key }}" {{ ftr_geral.isSelected(key, futuragrade_exibef_size) }}>
                    {{ value }}
                  </option>
                {% endfor %}
              </select>
            </label>
            <label class="field field-medium top-padding-large">
              <span class="field-label">{{ text_exibe_specification }}</span>
              <select class="field-entry" name="futuragrade_exibef_specification">
                {% for key, value in Type_DsimDnao.getEnumList() %}
                  <option value="{{ key }}" {{ ftr_geral.isSelected(key, futuragrade_exibef_specification) }}>
                    {{ value }}
                  </option>
                {% endfor %}
              </select>
            </label>
            <label class="field field-medium top-padding-large">
              <span class="field-label">{{ text_title_specification }}</span>
              <span class="field-description">{{ text_alert_title_specification }}</span>
              <input class="field-entry" type="text" name="futuragrade_title_specification" value="{{ futuragrade_title_specification }}" maxlength="18">
            </label>
            <label class="field field-medium top-padding-large">
              <span class="field-label">{{ text_abrev_specification }}</span>
              <span class="field-description">{{ text_alert_abrev_title_specification }}</span>
              <input class="field-entry" type="text" name="futuragrade_abrev_title_specification" value="{{ futuragrade_abrev_title_specification }}" maxlength="4">
            </label>
          </div>
        </div>

      </div>
    </div>

  </div>
</form>
{{ footer }}

<script>
  const DATA = {{ data|json_encode() }};
</script>
