{% extends "base.html" %} {% from "macros.jinja" import window_vars with context
%} {% block page %}
<div class="row q-col-gutter-md">
  <div class="col-12 col-md-7 q-gutter-y-md">
    <q-card class="q-pa-sm col-5">
      <q-card-section class="q-pa-none text-center">
        <q-form class="q-gutter-md">
          <q-select
            filled
            dense
            :options="g.user.wallets"
            :value="selectedWallet"
            label="Source Wallet:"
            option-label="name"
            @input="changedWallet"
          >
          </q-select>
        </q-form>
      </q-card-section>
    </q-card>

    <q-card class="q-pa-sm col-5">
      <q-card-section class="q-pa-none text-center">
        <div class="col">
          <h5 class="text-subtitle1 q-my-none">Target Wallets</h5>
        </div>

        <q-form class="q-gutter-md" @submit="saveTargets">
          <div
            class="q-gutter-md row items-start"
            style="flex-wrap: nowrap"
            v-for="(target, t) in targets"
          >
            <q-input
              dense
              outlined
              v-model="target.alias"
              label="Alias"
              :hint="t === targets.length - 1 ? 'A name to identify this target wallet locally.' : undefined"
              style="width: 150px"
            ></q-input>

            <q-input
              dense
              v-model="target.wallet"
              label="Wallet"
              :hint="t === targets.length - 1 ? 'A wallet ID or invoice key.' : undefined"
              option-label="name"
              style="width: 300px"
              new-value-mode="add-unique"
              use-input
              input-debounce="0"
              emit-value
            ></q-input>

            <q-toggle
              :false-value="'split'"
              :true-value="'tag'"
              color="primary"
              label=""
              value="True"
              style="width: 180px"
              v-model="target.method"
              :label="`${target.method}` === 'tag' ? 'Send funds by tag' : `${target.method}` === 'split' ? 'Split funds by %' : 'Split/tag?'"
              @input="clearChanged(t)"
            ></q-toggle>

            <q-input
              v-if="target.method == 'tag'"
              style="width: 150px"
              dense
              outlined
              v-model="target.tag"
              label="Tag name"
              suffix="#"
            ></q-input>

            <q-input
              v-else-if="target.method == 'split' || target.percent >= 0"
              style="width: 150px"
              dense
              outlined
              v-model.number="target.percent"
              label="split"
              suffix="%"
            ></q-input>

            <q-btn
              v-if="t == targets.length - 1 && (target.method == 'tag' || target.method == 'split')"
              round
              size="sm"
              icon="add"
              unelevated
              color="primary"
              @click="targetChanged(t)"
            >
              <q-tooltip>Add more</q-tooltip>
            </q-btn>
            <q-btn
              v-if="t < targets.length - 1"
              @click="clearTarget(t)"
              round
              color="red"
              size="5px"
              icon="close"
            ></q-btn>
          </div>
          <div class="row justify-evenly q-pa-lg">
            <div>
              <q-btn unelevated outline color="secondary" @click="clearTargets">
                Clear
              </q-btn>
            </div>

            <div>
              <q-btn
                unelevated
                color="primary"
                type="submit"
                :disabled="targets.length <  2"
              >
                Save Targets
              </q-btn>
            </div>
          </div>
        </q-form>
      </q-card-section>
    </q-card>
  </div>

  <div class="col-12 col-md-5 q-gutter-y-md">
    <q-card>
      <q-card-section>
        <h6 class="text-subtitle1 q-my-none">
          {{SITE_TITLE}} SplitPayments extension
        </h6>
      </q-card-section>
      <q-card-section class="q-pa-none">
        <q-separator></q-separator>
        <q-list> {% include "splitpayments/_api_docs.html" %} </q-list>
      </q-card-section>
    </q-card>
  </div>
</div>
{% endblock %} {% block scripts %} {{ window_vars(user) }}
<script src="/splitpayments/static/js/index.js"></script>
{% endblock %}
