<div class="col-xs-12 bottom-padding-small">
  <div class="content-box">
    <span class="text-x-large text-dark">{{ text_payment_info }}</span>
  </div>
</div>
<div class="col-xs-12 bottom-padding-x-large">
  <div class="content-box background-white padding-large shadow-small">
    <div class="row small-space-xs">
      <div class="col-xs-12 col-md-3">
        <div class="content-box">
          <span class="text-small text-gray visible-block">{{ text_capture_status }}: </span>
          <span class="text-medium text-dark visible-block top-margin-small" id="capture_status">{{ paypal_order.capture_status }}</span>
        </div>
      </div>
      <div class="col-xs-12 col-md-3">
        <div class="content-box">
          <span class="text-small text-gray visible-block">{{ text_amount_auth }}</span>
          <span class="text-medium text-dark visible-block top-margin-small">
            {{ paypal_order.total }}
            {% if paypal_order.capture_status != 'Complete' %}
              <a onclick="doVoid();" class="button paypal_capture" id="btn_void">{{ btn_void }}</a>
              <img src="{{ config_adm_ssl }}view/image/loading.gif" id="img_loading_void" style="display:none;" />
            {% endif %}
          </span>
        </div>
      </div>
      <div class="col-xs-12 col-md-3">
        <div class="content-box">
          <span class="text-small text-gray visible-block">{{ text_amount_captured }}</span>
          <span class="text-medium text-dark visible-block top-margin-small" id="paypal_captured">R$ {{ paypal_order.captured }}</span>
        </div>
      </div>
      <div class="col-xs-12 col-md-3">
        <div class="content-box">
          <span class="text-small text-gray visible-block">{{ text_amount_refunded }}</span>
          <span class="text-medium text-dark visible-block top-margin-small" id="paypal_captured">R$ {{ paypal_order.refunded }}</span>
        </div>
      </div>
      {% if paypal_order.capture_status != 'Complete' %}
        <div class="col-xs-12 col-md-3">
          <div class="content-box">
            <tr class="paypal_capture">
              <span class="text-small text-gray visible-block">{{ text_capture_amount }}: </span>
              <span class="text-medium text-dark visible-block top-margin-small">
                <p><input type="checkbox" name="paypal_capture_complete" id="paypal_capture_complete" value="1" /> {{ text_complete_capture }}</p>
                <p>
                  <input type="text" size="10" id="paypal_capture_amount" value="{{ paypal_order.remaining }}" />
                  <a class="button" onclick="capture();" id="btn_capture">{{ btn_capture }}</a>
                  <img src="{{ config_adm_ssl }}view/image/loading.gif" id="img_loading_capture" style="display:none;" />
                </p>
              </span>
            </tr>
          </div>
        </div>
      {% endif %}
    </div>
  </div>
</div>
<div class="col-xs-12 bottom-padding-small">
  <div class="content-box">
    <span class="text-x-large text-dark">{{ text_transactions }}</span>
  </div>
</div>
<div class="col-xs-12">
  <div class="content-box background-white shadow-small" id="paypal_transactions">

    {% for transaction in paypal_order.transactions %}
      <div class="row no-space-xs middle-xs nowrap-xs padding-large bottom-border-gray">
        <div class="col-xs">
          <div class="content-box">
            <div class="row middle-xs">
              <div class="col-xs-12 col-md-width-auto">
                <div class="content-box">
                  <span class="text-small text-dark text-bold visible-block rel" data-tooltip="{{ column_trans_id }}">
                    #{{ transaction.transaction_id }}
                  </span>
                  <span class="text-small text-gray rel" data-tooltip="{{ column_created }}">{{ transaction.created }}</span>
                </div>
              </div>
              <div class="col-xs-6 col-md">
                <div class="content-box">
                  <span class="text-small text-dark visible-block">R$ {{ transaction.amount }}</span>
                </div>
              </div>
              <div class="col-xs-6 col-md">
                <div class="content-box">
                  <span class="text-small text-dark rel" data-tooltip="{{ column_status }}">
                    {{ Type_PaypalPaymentStatus.getNickFromValue(transaction.payment_status) }}
                  </span>
                </div>
              </div>
              <div class="col-xs-6 col-md">
                <div class="content-box">
                  <span class="text-small text-dark visible-block">{{ transaction.payment_type }}</span>
                  <span class="text-small text-gray">{{ column_type }}</span>
                </div>
              </div>
              <div class="col-xs-6 col-md">
                <div class="content-box">
                  <span class="text-small text-dark visible-block">{{ transaction.pending_reason }}</span>
                  <span class="text-small text-gray">{{ column_pend_reason }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xs-width-auto">
          <div class="content-box">
            <div class="new-dropdown visible-inline-block js-new-dropdown">
              <div class="new-dropdown-control">
                <span class="new-dropdown-control-dot"></span>
                <span class="new-dropdown-control-dot"></span>
                <span class="new-dropdown-control-dot"></span>
              </div>
              <div class="new-dropdown-content background-white border-gray shadow-medium right js-new-dropdown-content">
                {% if transaction.transaction_id %}
                  <a href="{{ view_link ~ '&transaction_id=' ~ transaction.transaction_id }}" class="new-dropdown-content-item text-small text-dark text-decoration-none sincronizar">{{ text_view }}</a>
                  {% if transaction.payment_type == 'instant' and (transaction.payment_status == 'Completed' or transaction.payment_status == 'Partially-Refunded') %}
                    <a href="{{ refund_link ~'&transaction_id=' ~ transaction.transaction_id }}" class="new-dropdown-content-item text-small text-dark text-decoration-none sincronizar">{{ text_refund }}</a>
                  {% endif %}
                {% else %}
                  <a onclick="resendTransaction(this); return false;" href="{{ resend_link ~ '&paypal_order_transaction_id=' ~ transaction.paypal_order_transaction_id }}" class="new-dropdown-content-item text-small text-dark text-decoration-none sincronizar">{{ text_resend }}</a>
                {% endif %}
              </div>
            </div>
          </div>
        </div>
      </div>
    {% endfor %}

  </div>
</div>

<script type="text/javascript">
var
  viewLink = '{{ view_link }}',
  textView = '{{ text_view }}',
  oderId = '{{ order_id }}',
  refundLink = '{{ refund_link }}',
  textRefund = '{{ text_refund }}',
  textComplete = '{{ text_complete }}',
  resendLink = '{{ resend_link }}',
  textResend = '{{ text_resend }}',
  textConfirmVoid = '{{ text_confirm_void }}',
  configAdmSsl = '{{ config_adm_ssl }}',
  errorCaptureAmt = '{{ error_capture_amt }}';
</script>
