<q-tab-panel name="channels">
  <q-dialog v-model="connectPeerDialog.show" position="top">
    <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
      <q-form class="q-gutter-md">
        <q-input
          dense
          type="text"
          filled
          v-model="connectPeerDialog.data.uri"
          label="Node URI"
          hint="pubkey@host:port"
        ></q-input>

        <div class="row q-mt-lg">
          <q-btn
            :label="$t('connect')"
            color="primary"
            @click="connectPeer"
          ></q-btn>
          <q-btn
            v-close-popup
            flat
            color="grey"
            class="q-ml-auto"
            :label="$t('cancel')"
          ></q-btn>
        </div>
      </q-form>
    </q-card>
  </q-dialog>

  <q-dialog v-model="openChannelDialog.show" position="top">
    <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
      <q-form class="q-gutter-md">
        <q-input
          dense
          type="text"
          filled
          v-model="openChannelDialog.data.peer_id"
          label="Peer ID"
        ></q-input>
        <q-input
          dense
          type="number"
          filled
          v-model.number="openChannelDialog.data.funding_amount"
          label="Funding Amount"
        ></q-input>
        <q-expansion-item icon="warning" label="Advanced">
          <q-card>
            <q-card-section>
              <div class="column q-gutter-md">
                <q-input
                  dense
                  type="number"
                  filled
                  v-model.number="openChannelDialog.data.push_amount"
                  label="Push Amount"
                  hint="This gifts sats to the other side!"
                ></q-input>

                <q-input
                  dense
                  type="number"
                  filled
                  v-model.number="openChannelDialog.data.fee_rate"
                  label="Fee Rate"
                ></q-input>
              </div>
            </q-card-section>
          </q-card>
        </q-expansion-item>

        <div class="row q-mt-lg">
          <q-btn
            :label="$t('open')"
            color="primary"
            @click="openChannel"
          ></q-btn>
          <q-btn
            v-close-popup
            flat
            color="grey"
            class="q-ml-auto"
            :label="$t('cancel')"
          ></q-btn>
        </div>
      </q-form>
    </q-card>
  </q-dialog>

  <q-dialog v-model="closeChannelDialog.show" position="top">
    <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
      <q-form class="q-gutter-md">
        <div>
          <q-checkbox v-model="closeChannelDialog.data.force" label="Force" />
        </div>

        <div class="row q-mt-lg">
          <q-btn
            :label="$t('close')"
            color="primary"
            @click="closeChannel"
          ></q-btn>
          <q-btn
            v-close-popup
            flat
            color="grey"
            class="q-ml-auto"
            :label="$t('cancel')"
          ></q-btn>
        </div>
      </q-form>
    </q-card>
  </q-dialog>

  <q-card-section class="q-pa-none">
    <div class="row q-col-gutter-lg">
      <div class="col-12 col-xl-6">
        <q-card class="full-height">
          <q-card-section class="q-gutter-y-sm">
            <div class="row items-center q-mt-none q-gutter-x-sm no-wrap">
              <div class="col-grow text-h6 q-my-none col-grow">Channels</div>
              <q-input
                filled
                dense
                clearable
                v-model="channels.filter"
                placeholder="Search..."
                class="col-auto"
              ></q-input>
              <q-select
                dense
                size="sm"
                style="min-width: 200px"
                filled
                multiple
                clearable
                v-model="stateFilters"
                :options="this.states"
                class="col-auto"
              ></q-select>
              <q-btn
                unelevated
                color="primary"
                size="md"
                class="col-auto"
                @click="showOpenChannelDialog()"
              >
                Open channel
              </q-btn>
            </div>
            <div>
              <div class="text-subtitle1 col-grow">Total</div>
              <lnbits-channel-balance
                :balance="this.totalBalance"
              ></lnbits-channel-balance>
            </div>
            <q-separator></q-separator>
            <q-table
              dense
              flat
              :rows="this.filteredChannels"
              :filter="channels.filter"
              no-data-label="No channels opened"
            >
              <template v-slot:header="props">
                <q-tr :props="props" style="height: 0"> </q-tr>
              </template>
              <template v-slot:body="props">
                <q-tr :props="props">
                  <div class="q-pb-sm">
                    <div class="row items-center q-gutter-sm">
                      <div
                        class="text-subtitle1 col-grow"
                        v-text="props.row.name"
                      ></div>
                      <div class="text-caption" v-if="props.row.short_id">
                        <span v-text="props.row.short_id"></span>
                        <q-btn
                          size="xs"
                          flat
                          dense
                          icon="content_paste"
                          @click="copyText(props.row.short_id)"
                        ></q-btn>
                      </div>
                      <q-badge
                        rounded
                        :color="states.find(s => s.value == props.row.state)?.color"
                        v-text="states.find(s => s.value == props.row.state)?.label"
                      >
                      </q-badge>
                      <q-btn
                        :disable='props.row.state !== "active"'
                        flat
                        dense
                        size="md"
                        @click="showCloseChannelDialog(props.row)"
                        icon="cancel"
                        color="pink"
                      ></q-btn>
                    </div>
                    <lnbits-channel-balance
                      :balance="props.row.balance"
                      :color="props.row.color"
                    ></lnbits-channel-balance>
                  </div>
                </q-tr>
              </template>
            </q-table>
          </q-card-section>
        </q-card>
      </div>
      <div class="col-12 col-xl-6">
        <q-card class="full-height">
          <q-card-section class="column q-gutter-y-sm">
            <div
              class="row items-center q-mt-none justify-between q-gutter-x-md no-wrap"
            >
              <div class="col-grow text-h6 q-my-none">Peers</div>
              <q-input
                filled
                dense
                clearable
                v-model="peers.filter"
                placeholder="Search..."
                class="col-auto"
              ></q-input>
              <q-btn
                class="col-auto"
                color="primary"
                @click="connectPeerDialog.show = true"
              >
                Connect Peer
              </q-btn>
            </div>
            <q-separator></q-separator>
            <q-table
              dense
              flat
              :rows="peers.data"
              :filter="peers.filter"
              no-data-label="No transactions made yet"
            >
              <template v-slot:header="props">
                <q-tr :props="props" style="height: 0"> </q-tr>
              </template>
              <template v-slot:body="props">
                <q-tr :props="props">
                  <div class="row no-wrap items-center q-gutter-sm">
                    <div class="q-my-sm col-grow">
                      <div
                        class="text-subtitle1 text-bold"
                        v-text="props.row.alias"
                      ></div>
                      <div class="row items-center q-gutter-sm">
                        <q-badge
                          :style="`background-color: #${props.row.color}`"
                          class="text-bold"
                          v-text="'#'+props.row.color"
                        >
                        </q-badge>
                        <div
                          class="text-bold"
                          v-text="shortenNodeId(props.row.id)"
                        ></div>
                        <q-btn
                          size="xs"
                          flat
                          dense
                          icon="content_paste"
                          @click="copyText(props.row.id)"
                        ></q-btn>
                        <q-btn
                          size="xs"
                          flat
                          dense
                          icon="qr_code"
                          @click="showNodeInfoDialog(props.row)"
                        ></q-btn>
                      </div>
                    </div>
                    <q-btn
                      unelevated
                      color="primary"
                      @click="showOpenChannelDialog(props.row.id)"
                    >
                      Open channel
                    </q-btn>
                    <q-btn
                      flat
                      dense
                      size="md"
                      @click="disconnectPeer(props.row.id)"
                      icon="cancel"
                      color="pink"
                    ></q-btn>
                  </div>
                </q-tr>
              </template>
            </q-table>
          </q-card-section>
        </q-card>
      </div>
    </div>
  </q-card-section>
</q-tab-panel>
