<q-tab-panel name="transactions">
  <q-card-section class="q-pa-none">
    <q-dialog v-model="transactionDetailsDialog.show" position="top">
      <q-card class="my-card">
        <q-card-section>
          <div class="text-center q-mb-lg">
            <div
              v-if="transactionDetailsDialog.data.isIn && transactionDetailsDialog.data.pending"
            >
              <q-icon
                size="18px"
                :name="'call_received'"
                :color="'green'"
              ></q-icon>
              <span v-text="$t('payment_received')"></span>
            </div>
            <div class="row q-my-md">
              <div class="col-3"><b v-text="$t('payment_hash')"></b>:</div>
              <div class="col-9 text-wrap mono">
                <span
                  v-text="transactionDetailsDialog.data.payment_hash"
                ></span>
                <q-icon
                  name="content_copy"
                  @click="copyText(transactionDetailsDialog.data.payment_hash)"
                  size="1em"
                  color="grey"
                  class="q-mb-xs cursor-pointer"
                />
              </div>
              <div
                class="row"
                v-if="transactionDetailsDialog.data.preimage && !transactionDetailsDialog.data.pending"
              >
                <div class="col-3"><b v-text="$t('payment_proof')"></b>:</div>
                <div class="col-9 text-wrap mono">
                  <span v-text="transactionDetailsDialog.data.preimage"></span>
                  <q-icon
                    name="content_copy"
                    @click="copyText(transactionDetailsDialog.data.preimage)"
                    size="1em"
                    color="grey"
                    class="q-mb-xs cursor-pointer"
                  />
                </div>
              </div>
            </div>
            <div
              v-if="transactionDetailsDialog.data.bolt11"
              class="text-center q-mb-lg"
            >
              <a :href="'lightning:' + transactionDetailsDialog.data.bolt11">
                <q-responsive :ratio="1" class="q-mx-xl">
                  <qrcode-vue
                    :value="'lightning:' + transactionDetailsDialog.data.bolt11.toUpperCase()"
                    :options="{width: 340}"
                    class="rounded-borders"
                  ></qrcode-vue>
                </q-responsive>
              </a>
              <q-btn
                outline
                color="grey"
                @click="copyText(transactionDetailsDialog.data.bolt11)"
                :label="$t('copy_invoice')"
                class="q-mt-sm"
              ></q-btn>
            </div>
          </div>
        </q-card-section>
      </q-card>
    </q-dialog>

    <div class="row q-col-gutter-md q-pb-lg"></div>

    <div class="row q-col-gutter-lg">
      <div class="col-12 col-lg-6 q-gutter-y-md">
        <q-card>
          <q-card-section>
            <div class="row items-center no-wrap q-mb-sm">
              <div class="col text-h6 q-my-none">Payments</div>
              <q-input
                v-if="payments.length > 10"
                filled
                dense
                clearable
                v-model="paymentsTable.filter"
                debounce="300"
                placeholder="Search by tag, memo, amount"
                class="q-mb-md"
              >
              </q-input>
            </div>
            <q-table
              dense
              flat
              :rows="paymentsTable.data"
              :columns="paymentsTable.columns"
              v-model:pagination="paymentsTable.pagination"
              row-key="payment_hash"
              no-data-label="No transactions made yet"
              :filter="paymentsTable.filter"
              @request="getPayments"
            >
              <template v-slot:body-cell-pending="props">
                <q-td auto-width class="text-center">
                  <q-icon
                    v-if="!props.row.pending"
                    size="xs"
                    name="call_made"
                    color="green"
                    @click="showTransactionDetailsDialog(props.row)"
                  ></q-icon>
                  <q-icon
                    v-else
                    size="xs"
                    name="settings_ethernet"
                    color="grey"
                    @click="showTransactionDetailsDialog(props.row)"
                  >
                    <q-tooltip>Pending</q-tooltip>
                  </q-icon>
                  <q-dialog
                    v-model="props.row.expand"
                    :props="props"
                    position="top"
                  >
                    <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
                      <div class="text-center q-mb-lg">
                        <div v-if="props.row.isIn && props.row.pending">
                          <q-icon
                            name="settings_ethernet"
                            color="grey"
                          ></q-icon>
                          <span v-text="$t('invoice_waiting')"></span>
                          <lnbits-payment-details
                            :payment="props.row"
                          ></lnbits-payment-details>
                          <div
                            v-if="props.row.bolt11"
                            class="text-center q-mb-lg"
                          >
                            <a :href="'lightning:' + props.row.bolt11">
                              <q-responsive :ratio="1" class="q-mx-xl">
                                <qrcode-vue
                                  :value="'lightning:' + props.row.bolt11.toUpperCase()"
                                  :options="{width: 340}"
                                  class="rounded-borders"
                                ></qrcode-vue>
                              </q-responsive>
                            </a>
                          </div>
                          <div class="row q-mt-lg">
                            <q-btn
                              outline
                              color="grey"
                              @click="copyText(props.row.bolt11)"
                              :label="$t('copy_invoice')"
                            ></q-btn>
                            <q-btn
                              v-close-popup
                              flat
                              color="grey"
                              class="q-ml-auto"
                              :label="$t('close')"
                            ></q-btn>
                          </div>
                        </div>
                        <div v-else-if="props.row.isPaid && props.row.isIn">
                          <q-icon
                            size="18px"
                            :name="'call_received'"
                            :color="'green'"
                          ></q-icon>
                          <span v-text="$t('payment_received')"></span>
                          <lnbits-payment-details
                            :payment="props.row"
                          ></lnbits-payment-details>
                        </div>
                        <div v-else-if="props.row.isPaid && props.row.isOut">
                          <q-icon
                            size="18px"
                            :name="'call_made'"
                            :color="'pink'"
                          ></q-icon>
                          <span v-text="$t('payment_sent')"></span>
                          <lnbits-payment-details
                            :payment="props.row"
                          ></lnbits-payment-details>
                        </div>
                        <div v-else-if="props.row.isOut && props.row.pending">
                          <q-icon
                            name="settings_ethernet"
                            color="grey"
                          ></q-icon>
                          <span v-text="$t('outgoing_payment_pending')"></span>
                          <lnbits-payment-details
                            :payment="props.row"
                          ></lnbits-payment-details>
                        </div>
                      </div>
                    </q-card>
                  </q-dialog>
                </q-td>
              </template>
              <template v-slot:body-cell-date="props">
                <q-td auto-width key="date" :props="props">
                  <lnbits-date :ts="props.row.time"></lnbits-date>
                </q-td>
              </template>
              <template v-slot:body-cell-destination="props">
                <q-td auto-width key="destination">
                  <div class="row items-center justify-between no-wrap">
                    <q-badge
                      :style="`background-color: #${props.row.destination?.color}`"
                      class="text-bold"
                      v-text="props.row.destination?.alias"
                    ></q-badge>
                    <div>
                      <q-btn
                        size="xs"
                        flat
                        dense
                        icon="content_paste"
                        @click="copyText(info.id)"
                      ></q-btn>
                      <q-btn
                        size="xs"
                        flat
                        dense
                        icon="qr_code"
                        @click="showNodeInfoDialog(props.row.destination)"
                      ></q-btn>
                    </div>
                  </div>
                </q-td>
              </template>
            </q-table>
          </q-card-section>
        </q-card>
      </div>
      <div class="col-12 col-lg-6 q-gutter-y-md">
        <q-card>
          <q-card-section>
            <div class="row items-center no-wrap q-mb-sm">
              <div class="col text-h6 q-my-none">Invoices</div>
              <q-input
                v-if="payments.length > 10"
                filled
                dense
                clearable
                v-model="paymentsTable.filter"
                debounce="300"
                placeholder="Search by tag, memo, amount"
                class="q-mb-md"
              >
              </q-input>
            </div>

            <q-table
              dense
              flat
              :rows="invoiceTable.data"
              :columns="invoiceTable.columns"
              v-model:pagination="invoiceTable.pagination"
              no-data-label="No transactions made yet"
              :filter="invoiceTable.filter"
              @request="getInvoices"
            >
              <template v-slot:body-cell-pending="props">
                <q-td auto-width class="text-center">
                  <q-icon
                    v-if="!props.row.pending"
                    size="xs"
                    name="call_received"
                    color="green"
                    @click="showTransactionDetailsDialog(props.row)"
                  ></q-icon>
                  <q-icon
                    v-else
                    size="xs"
                    name="settings_ethernet"
                    color="grey"
                    @click="showTransactionDetailsDialog(props.row)"
                  >
                    <q-tooltip>Pending</q-tooltip>
                  </q-icon>
                </q-td>
              </template>

              <template v-slot:body-cell-paid_at="props">
                <q-td auto-width :props="props">
                  <lnbits-date
                    v-if="props.row.paid_at"
                    :ts="props.row.paid_at"
                  ></lnbits-date>
                </q-td>
              </template>

              <template v-slot:body-cell-expiry="props">
                <q-td auto-width :props="props">
                  <lnbits-date
                    v-if="props.row.expiry"
                    :ts="props.row.expiry"
                  ></lnbits-date>
                </q-td>
              </template>
            </q-table>
          </q-card-section>
        </q-card>
      </div>
    </div>
  </q-card-section>
</q-tab-panel>
