{{ header }}
<div class="background-white bottom-margin-large">
  <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>
      <div class="col-xs-12 notification-container">
        {% if error_warning %}
          <div class="warning">{{ error_warning }}</div>
        {% elseif success %}
          <div class="success">{{ success }}</div>
        {% endif %}
      </div>
    </div>
  </div>
</div>
<div class="container-fluid">
  <form action="{{ action }}" method="post" class="js-main-form">
    <div class="row no-space-xs">
      <div class="col-xs-12 col-md-6">
        <div class="content-box background-white shadow-small padding-large">

          <div id="root"> 
            <base-manual title="{{text_info}}">
              <div>{{text_manual}}</div>
            </base-manual>
          </div>
 
          <div class="clear_sale_total_config">
            <label class="field field-medium">
              <span class="text-small text-dark text-bold visible-block">{{ text_callback }}</span>
              <span id="urlCallback" class="text-small text-gray visible-block bottom-margin-small text-word-wrap">{{ url_callback }}</span>
              <button id="btnCallback" type="button" class="btn-default btn-outline btn-small">{{ text_copy }}</button>
            </label>
          </div>

          <label class="field field-medium top-padding-large">
            <span class="field-label">{{ entry_tipointegracao }}</span>
            <select class="field-entry clearsale_tipo_integracao" name="clearsale_tipo_integracao">
              {% for key, tipo_integracao in Type_ClearSaleIntegracao.getEnumList() %}
                <option value="{{ key }}" {{ ftr_geral.isSelected(key, clearsale_tipo_integracao) }} >{{ tipo_integracao }}</option>
              {% endfor %}
            </select>
          </label>

          <label class="field field-medium top-padding-large clear_sale_start_config">
            <span class="field-label">{{ entry_codintegracao }}</span>
            <input class="field-entry" type="text" name="clearsale_codintegracao"  value="{{ clearsale_codintegracao }}"/>
            {% if error_codintegracao is defined %}
                <span class="text-error text-x-small">{{ error_codintegracao }}</span>
            {% endif %}
          </label>

          <div class="clear_sale_total_config">
            <label class="field field-medium top-padding-large">
              <span class="field-label">{{ entry_login }}</span>
              <input class="field-entry" type="text" name="clearsale_login"  value="{{ clearsale_login }}"/>
              {% if error_login is defined %}
                  <span class="text-error text-x-small">{{ error_login }}</span>
              {% endif %}
            </label>
            <label class="field field-medium top-padding-large">
              <span class="field-label">{{ entry_senha }}</span>
              <input class="field-entry" type="text" name="clearsale_senha"  value="{{ clearsale_senha }}"/>
              {% if error_senha is defined %}
                  <span class="text-error text-x-small">{{ error_senha }}</span>
              {% endif %}
            </label>
            <div class="top-padding-medium">
              <button
                id="btn-validate"
                class="btn-default btn-medium btn-primary"
                data-url="{{ url_validate_credentials }}"
              >
                <span>{{ text_validate_credentials }}</span>
              </button>
            </div>
            <label class="field field-medium top-padding-large">
              <span class="field-label">{{ entry_fingerprint }}</span>
              <input class="field-entry" type="text" name="clearsale_fingerprint"  value="{{ clearsale_fingerprint }}"/>
              {% if error_fingerprint is defined %}
                  <span class="text-error text-x-small">{{ error_fingerprint }}</span>
              {% endif %}
            </label>
            <label class="field field-medium top-margin-large">
              <span class="field-label">{{ entry_custom_sla }}</span>
              <span class="text-x-small text-gray">{{ entry_custom_sla_obs }}</span>
              <input class="field-entry mask-number" type="text" name="clearsale_custom_sla" value="{{ clearsale_custom_sla }}" />
            </label>
            <label class="field field-medium top-margin-large">
              <span class="field-label">{{ entry_captura }}</span>
              <span class="text-x-small text-gray">{{ entry_captura_obs }}</span>
              <select class="field-entry" name="clearsale_captura_automatica">
                {% for key, status in Type_Status.getEnumList() %}
                  <option value="{{ key }}" {{ ftr_geral.isSelected(key, clearsale_captura_automatica) }} >{{ status }}</option>
                {% endfor %}
              </select>
            </label>
          </div>

          <label class="field field-medium top-padding-large">
            <span class="field-label">{{ entry_homologacao }}</span>
            <select class="field-entry" name="clearsale_homologacao">
              {% for key, status in Type_Status.getEnumList() %}
                <option value="{{ key }}" {{ ftr_geral.isSelected(key, clearsale_homologacao) }} >{{ status }}</option>
              {% endfor %}
            </select>
          </label>
          <label class="field field-medium top-padding-large">
            <span class="field-label">{{ entry_status }}</span>
            <select class="field-entry" name="clearsale_status">
              {% for key, status in Type_Status.getEnumList() %}
                <option value="{{ key }}" {{ ftr_geral.isSelected(key, clearsale_status) }} >{{ status }}</option>
              {% endfor %}
            </select>
          </label>
        </div>
      </div>
    </div>
  </form>
</div>
{{ footer }}

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