{{ 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 href="{{ breadcrumb.href }}" class="text-x-small text-gray text-decoration-none">{{ breadcrumb.text }}</a>
              {% endfor %}
            </div>
          </div>
          <div class="flex flex-row middle-xs">
            <a
              href="http://manual.futurasistemas.com.br/manual-do-sistema/como-configurar-o-paypal-express-checkout/"
              class="text-info visible-inline-block cursor-pointer text-decoration-none vertical-padding-small right-margin-large"
              target="_blank"
            >
              <span>{{ button_help }}</span>
            </a>
            <a href="{{ cancel }}" class="btn-default btn-medium btn-outline right-margin-small">
              <span>{{ button_cancel }}</span>
            </a>
            <button class="btn-default btn-medium btn-primary js-submit-main-form">
              <span>{{ button_save }}</span>
            </button>
          </div>
        </div>
        {% if error.error_warning is defined %}
          <div class="warning full-width">{{ error.error_warning }}</div>
        {% endif %}
      </div>
      <div class="col-xs-12">
        <div class="flex js-tabs" id="tab-info"></div>
      </div>
    </div>
  </div>
</header>
<form action="{{ action }}" method="post" class="js-main-form">
  <div class="container-fluid" data-tabs-id="tab-info">

    <div id="tab-api-details" class="row hidden" data-tab="{{ tab_general }}">
      <div class="col-xs-12">
        <div class="content-box">
          <span class="text-x-large text-dark">{{ tab_general }}</span>
        </div>
      </div>
      <div class="col-xs-12 col-md-8">
        <div class="content-box background-white shadow-small padding-large">

          <label class="field field-medium bottom-margin-large">
            <span class="field-label required">{{ entry_paypal_client_id }}</span>
            <input class="field-entry" type="text" name="paypal_client_id" value="{{ paypal_client_id }}"/>
            {% if error.client_id is defined %}
                <span class="text-error text-x-small">{{ error.client_id }}</span>
            {% endif %}
          </label>
          <label class="field field-medium bottom-margin-large">
            <span class="field-label required">{{ entry_paypal_client_secret}}</span>
            <input class="field-entry" type="text" name="paypal_client_secret" value="{{ paypal_client_secret }}"/>
            {% if error.client_secret is defined %}
              <span class="text-error text-x-small">{{ error.client_secret }}</span>
            {% endif %}
          </label>

          <button type="button" class="btn-default btn-medium btn-primary js-validate-credentials" data-url="{{ url_validate_credentials }}">
            <span>{{ text_validate_credentials }}</span>
          </button>

        </div>
      </div>
      <div class="col-xs-12 col-md-4">
        <div class="content-box background-white shadow-small padding-large">
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ entry_status }}</span>
            <select class="field-entry" name="paypal_status">
                {% for status in paypal_status_list %}
                  <option value="{{ status.value }}" {{ status.choice }}>{{ status.description }}</option>
                {% endfor %}
            </select>
          </label>
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ entry_display }}</span>
            <select class="field-entry" name="paypal_display" >
              {% for key, display in Type_DisplayModuleOption.getEnumList() %}
                <option value="{{ key }}" {{ ftr_geral.isSelected(key, paypal_display, Type_DisplayModuleOption.Tp_Todos) }}>{{ display }}</option>
              {% endfor %}
            </select>
          </label>
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ entry_test }}</span>
            <select class="field-entry" name="paypal_test">
              <option value="1" {{ paypal_test ? 'selected' : '' }}/>
                {{ text_yes }}
              </option>
              <option value="0" {{ paypal_test ? '' : 'selected' }}/>
                {{ text_no }}
              </option>
            </select>
          </label>
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ entry_debug }}</span>
            <select class="field-entry" name="paypal_debug">
              <option value="1" {{ paypal_debug ? 'selected' : '' }}/>
                {{ text_yes }}
              </option>
              <option value="0" {{ paypal_debug ? '' : 'selected' }}/>
                {{ text_no }}
              </option>
            </select>
          </label>
          <label class="field field-medium bottom-margin-large">
            <span class="field-label"> {{ entry_sort_order }}</span>
            <input class="field-entry mask-number" type="text" name="paypal_sort_order" value="{{ paypal_sort_order }}" size="1"/>
          </label>
          <label class="field field-medium">
            <span class="field-label">{{ entry_geo_zone }}</span>
            <select class="field-entry" name="paypal_geo_zone_id">
              <option value="0">{{ text_all_zones }}</option>
              {% for geo_zone in geo_zones %}
                <option value="{{ geo_zone.geo_zone_id }}" {{ geo_zone.geo_zone_id == paypal_geo_zone_id ? 'selected' : '' }}>
                  {{ geo_zone.name }}
                </option>
              {% endfor %}
            </select>
          </label>
        </div>
      </div>
    </div>

    <div id="tab-status" class="row hidden" data-tab="{{ tab_order_status }}">
      <div class="col-xs-12 col-md-8">
        <div class="content-box bottom-padding-large">
          <div class="flex between-xs middle-xs">
            <span class="text-x-large text-dark">{{ tab_order_status }}</span>
          </div>
        </div>
        <div class="content-box background-white shadow-small padding-large">
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ entry_created_status }}</span>
            <select class="field-entry" name="paypal_order_created_status_id">
              {% for order_status in order_statuses %}
                <option value="{{ order_status.order_status_id }}" {{ order_status.order_status_id == paypal_order_created_status_id ? 'selected' : '' }}>
                  {{ order_status.name }}
                </option>
              {% endfor %}
            </select>
          </label>

          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ entry_saved_status }}</span>
            <select class="field-entry" name="paypal_order_saved_status_id">
              {% for order_status in order_statuses %}
                <option value="{{ order_status.order_status_id }}" {{ order_status.order_status_id == paypal_order_saved_status_id ? 'selected' : '' }}>
                  {{ order_status.name }}
                </option>
              {% endfor %}
            </select>
          </label>

          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ entry_approved_status }}</span>
            <select class="field-entry" name="paypal_order_approved_status_id">
              {% for order_status in order_statuses %}
                <option value="{{ order_status.order_status_id }}" {{ order_status.order_status_id == paypal_order_approved_status_id ? 'selected' : '' }}>
                  {{ order_status.name }}
                </option>
              {% endfor %}
            </select>
          </label>

          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ entry_completed_status }}</span>
            <select class="field-entry" name="paypal_order_completed_status_id">
              {% for order_status in order_statuses %}
                <option value="{{ order_status.order_status_id }}" {{ order_status.order_status_id == paypal_order_completed_status_id ? 'selected' : '' }}>
                  {{ order_status.name }}
                </option>
              {% endfor %}
            </select>
          </label>

          <label class="field field-medium">
            <span class="field-label">{{ entry_voided_status }}</span>
            <select class="field-entry" name="paypal_order_voided_status_id">
              {% for order_status in order_statuses %}
                <option value="{{ order_status.order_status_id }}" {{ order_status.order_status_id == paypal_order_voided_status_id ? 'selected' : '' }}>
                  {{ order_status.name }}
                </option>
              {% endfor %}
            </select>
          </label>
        </div>
      </div>
    </div>

    <div id="tab-forma-pagamentos" class="row hidden" data-tab="{{ tab_forma_pagamentos }}">
      <div class="col-xs-12 col-md-8">
        <div class="content-box bottom-padding-large">

          <div class="content-box">

            <div class="background-white shadow-small padding-large">

              <label class="field field-medium bottom-margin-large">
                <span class="field-label">{{ text_checkout_buttons }}</span>
                <select class="field-entry" name="paypal_checkout_buttons">
                  {% for status in paypal_checkout_buttons_status_list %}
                    <option value="{{ status.value }}" {{ status.choice }}>{{ status.description }}</option>
                  {% endfor %}
                </select>
              </label>

              <label class="field field-medium bottom-margin-large">
                <span class="field-label">{{ entry_title }}</span>
                <input class="field-entry" type="text" name="paypal_title_checkout" value="{{ paypal_title_checkout }}"/>
              </label>

              <label class="field field-medium bottom-margin-large">
                <span class="field-label">{{ entry_descricao_empresa }}</span>
                <input class="field-entry" type="text" maxlength="127" name="paypal_descricao_empresa" value="{{ paypal_descricao_empresa }}"/>
              </label>

              <label class="field field-medium bottom-margin-large">
                <span class="field-label">{{ entry_descricao_compra }}</span>
                <input class="field-entry" type="text" maxlength="127" name="paypal_descricao_compra" value="{{ paypal_descricao_compra }}"/>
              </label>

              <label class="field field-medium bottom-margin-large">
                <span class="field-label">{{ entry_descricao_fatura }}</span>
                <input class="field-entry" type="text" maxlength="15" name="paypal_descricao_fatura" value="{{ paypal_descricao_fatura }}"/>
              </label>

              <label class="field field-medium bottom-margin-large">
                <span class="field-label">{{ entry_total }}</span>
                <span class="text-x-small text-gray">{{ entry_total_obs }}</span>
                <input class="field-entry mask-money" type="text" name="paypal_total_checkout" value="{{ paypal_total_checkout }}"/>
              </label>

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

  </div>
</form>
<script>
  var noImg = '{{ no_image }}';
</script>
{{ footer }}
