<table class="table table-bordered">
  <tr>
    <td>{{ column_status }}</td>
    <td>{{ transaction.status }}</td>
  </tr>
  <tr>
    <td>{{ column_transaction_id }}</td>
    <td>{{ transaction.transaction_id }}</td>
  </tr>
  <tr>
    <td>{{ column_transaction_type }}</td>
    <td>{{ transaction.type }}</td>
  </tr>
  <tr>
    <td>{{ column_transaction_date }}</td>
    <td>{{ transaction.date_added }}</td>
  </tr>
  <tr>
    <td>{{ column_merchant_account }}</td>
    <td>{{ transaction.merchant_account_id }}</td>
  </tr>
  <tr>
    <td>{{ column_payment_type }}</td>
    <td>{{ transaction.payment_type }}</td>
  </tr>
  <tr>
    <td>{{ column_amount }}</td>
    <td>{{ transaction.amount }} {{ transaction.currency }}</td>
  </tr>
  <tr>
    <td>{{ column_order_id }}</td>
    <td>{{ transaction.order_id }}</td>
  </tr>
  {% if transaction.processor_code %}
  <tr>
    <td>{{ column_processor_code }}</td>
    <td>{{ transaction.processor_code }}</td>
  </tr>
  {% endif %}
  <tr>
    <td>{{ column_cvv_response }}</td>
    <td>{{ transaction.cvv_response }}</td>
  </tr>
  <tr>
    <td>{{ column_avs_response }}</td>
    <td>{{ transaction.avs_response }}</td>
  </tr>
  {% if transaction.threeds_status %}
  <tr>
    <td>{{ column_3ds_enrolled }}</td>
    <td>{{ transaction.threeds_enrolled }}</td>
  </tr>
  <tr>
    <td>{{ column_3ds_status }}</td>
    <td>{{ transaction.threeds_status }}</td>
  </tr>
  <tr>
    <td>{{ column_3ds_shifted }}</td>
    <td>{{ transaction.threeds_shifted }}</td>
  </tr>
  <tr>
    <td>{{ column_3ds_shift_possible }}</td>
    <td>{{ transaction.threeds_shift_possible }}</td>
  </tr>
  {% endif %}
  <tr>
    <td>{{ column_transaction_history }}</td>
    <td>
      <div class="table-responsive">
        <table class="table table-bordered table-hover">
          <thead>
            <tr>
              <td class="text-left">{{ column_date }}</td>
              <td class="text-left">{{ column_status }}</td>
            </tr>
          </thead>
          <tbody>
            {% for status in statuses %}
            <tr>
              <td>{{ status.date_added }}</td>
              <td>{{ status.status }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </td>
  </tr>
  <tr>
    <td>{{ column_refund_history }}</td>
    <td>
      <table class="table table-bordered">
        <thead>
          <tr>
            <td class="text-left">{{ column_date }}</td>
            <td class="text-left">{{ column_amount }}</td>
            <td class="text-left">{{ column_status }}</td>
          </tr>
        </thead>
        <tbody>
          {% if refunds is not empty %}
            {% for refund in refunds %}
              <tr>
                <td>{{ refund.date_added }}</td>
                <td>{{ refund.amount }}</td>
                <td>{{ refund.status }}</td>
              </tr>
            {% endfor %}
          {% else %}
            <tr>
              <td class="text-center" colspan="3">{{ text_no_refund }}</td>
            </tr>
          {% endif %}
        </tbody>
      </table>
    </td>
  </tr>
  <tr>
    <td>{{ column_action }}</td>
    <td>
      <table class="table table-bordered">
        <thead>
          <tr>
            <td class="text-left">{{ column_void }}</td>
            <td class="text-left">{{ column_settle }}</td>
            <td class="text-left">{{ column_refund }}</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              {% if void_action is not empty %}
                <a class="btn btn-primary button-command" data-type="void">{{ button_void }}</a>
              {% else %}
                {{ text_na }}
              {% endif %}
            </td>
            <td>
              {% if settle_action is not empty %}
                <input id="settle-amount" text="text" name="settle_amount" value="{{ max_settle_amount }}"/>
                <a class="btn btn-primary button-command" data-type="settle">{{ button_settle }}</a>
              {% else %}
                {{ text_na }}
              {% endif %}
            </td>
            <td>
              {% if refund_action is not empty %}
                <input id="refund-amount" text="text" name="refund_amount" value="{{ max_refund_amount }}"/>
                <a class="btn btn-primary button-command" data-type="refund">{{ button_refund }}</a>
              {% else %}
                {{ text_na }}
              {% endif %}
            </td>
          </tr>
        </tbody>
      </table>
    </td>
  </tr>
</table>
<script type="text/javascript"><!--
    $('.button-command').on('click', function () {
        var type = $(this).attr('data-type');
        var confirm_text = '';
        var clicked_button = $(this);
        
        if (type === 'void') {
            confirm_text = '{{ text_confirm_void }}';
        } else if (type === 'settle') {
          {% if symbol_left is not empty %}
              confirm_text = '{{ text_confirm_settle }} ' + '{{ symbol_left }}' + $('#settle-amount').val();
          {% elseif symbol_right is not empty %}
              confirm_text = '{{ text_confirm_settle }} ' + $('#settle-amount').val() + '{{ symbol_right }}';
          {% endif %}
        } else if (type === 'refund') {
          {% if symbol_left is not empty %}
              confirm_text = '{{ text_confirm_refund }} ' + '{{ symbol_left }}' + $('#refund-amount').val();
          {% elseif symbol_right is not empty %}
              confirm_text = '{{ text_confirm_refund }} ' + $('#refund-amount').val() + '{{ symbol_right }}';
          {% endif %}
        }
        
        if (confirm(confirm_text)) {
            $.ajax({
                url: 'index.php?route=extension/payment/pp_braintree/transactionCommand&user_token={{ user_token }}',
                type: 'post',
                data: {
                    type: type,
                    transaction_id: '{{ transaction_id }}',
                    amount: $(this).prev('input').val()
                },
                dataType: 'json',
                beforeSend: function () {
                    clicked_button.button('loading');
                    
                    $('.alert').hide().removeClass('alert-success alert-danger');
                },
                complete: function () {
                    clicked_button.button('reset');
                },
                success: function (json) {
                    if (json.error) {
                      $('.alert').show().addClass('alert-danger').html('<i class="fa fa-check-circle"></i> ' + json.error);
                    }
                    
                    if (json.success) {
                      $('.alert').show().addClass('alert-success').html('<i class="fa fa-exclamation-circle"></i> ' + json.success);
                    }
                    
                    getTransaction('{{ transaction_id }}');
                }
            });
        }
    });
//--></script>