<q-tab-panel name="exchange_providers">
  <h6 class="q-my-none q-mb-sm">Exchange Providers</h6>

  <div class="row">
    <div class="col-md-8 col-sm-12">
      <div class="q-pa-sm">
        <canvas
          style="
            width: 100% !important;
            height: auto !important;
            min-height: 350px;
            max-height: 50vh;
          "
          ref="exchangeRatesChart"
        ></canvas>
      </div>
    </div>
    <div class="col-md-4 col-sm-12">
      <q-input
        filled
        v-model="formData.lnbits_exchange_history_refresh_interval_seconds"
        type="number"
        label="Refresh Interval (seconds)"
        hint="How often should the exchange rates be fetched. Set to zero to disable."
      >
      </q-input>
      <q-input
        filled
        v-model="formData.lnbits_exchange_history_size"
        type="number"
        label="History Size"
        hint="How many data points should be kept in memory."
      >
      </q-input>
      <ul>
        <li>
          <code>Refresh Interval</code> and <code> History Size </code>are for
          historical purposes only.
        </li>
        <li>These two settings do not affect the live price computation.</li>
        <li>
          Chart currency:
          <strong
            ><span
              v-text="formData.lnbits_default_accounting_currency || 'USD'"
            ></span
          ></strong>
        </li>
      </ul>
    </div>
  </div>

  <div class="row q-mt-md">
    <div class="col-6">
      <q-btn
        @click="addExchangeProvider()"
        label="Add Exchange Provider"
        color="primary"
        class="q-mb-md"
      >
      </q-btn>
    </div>
    <div class="col-6">
      <q-btn
        @click="getDefaultSetting('lnbits_exchange_rate_providers')"
        flat
        :label="$t('reset_defaults')"
        color="primary"
        class="float-right"
      >
      </q-btn>
    </div>
  </div>

  <q-table
    row-key="name"
    :rows="formData.lnbits_exchange_rate_providers"
    :columns="exchangesTable.columns"
    v-model:pagination="exchangesTable.pagination"
  >
    <template v-slot:header="props">
      <q-tr :props="props">
        <q-th auto-width></q-th>
        <q-th v-for="col in props.cols" :key="col.name" :props="props">
          <span v-text="col.label"></span>
        </q-th>
      </q-tr>
    </template>
    <template v-slot:body="props">
      <q-tr :props="props">
        <q-td>
          <q-btn
            @click="removeExchangeProvider(props.row)"
            round
            icon="delete"
            size="sm"
            color="negative"
            class="q-ml-xs"
          >
          </q-btn>
        </q-td>
        <q-td>
          <q-input
            dense
            filled
            v-model="props.row.name"
            @update:model-value="touchSettings()"
            type="text"
          >
          </q-input>
        </q-td>
        <q-td full-width>
          <q-input
            dense
            filled
            v-model="props.row.api_url"
            @update:model-value="touchSettings()"
            type="text"
          >
          </q-input
        ></q-td>
        <q-td>
          <q-input
            dense
            filled
            v-model="props.row.path"
            @update:model-value="touchSettings()"
            type="text"
          >
          </q-input>
        </q-td>
        <q-td>
          <q-select
            filled
            dense
            v-model="props.row.exclude_to"
            @update:model-value="touchSettings()"
            multiple
            :options="{{ currencies | safe }}"
          ></q-select>
        </q-td>
        <q-td>
          <q-btn
            @click="showTickerConversionDialog(props.row)"
            round
            icon="add"
            size="sm"
            color="gray"
            class="q-ml-xs"
          >
          </q-btn>
          <q-chip
            v-for="ticker, index in props.row.ticker_conversion"
            :key="ticker"
            removable
            dense
            filled
            @remove="removeExchangeTickerConversion(props.row, ticker)"
            color="primary"
            text-color="white"
            :label="ticker"
            class="ellipsis"
          >
          </q-chip>
        </q-td>
      </q-tr>
    </template>
  </q-table>
  <ul>
    <li>
      <code>API URL</code> and <code>JSON Path</code> fields can use the
      <code>{to}</code> and <code>{TO}</code> placeholders for the code of the
      currency
    </li>
    <li>
      <code>{TO}</code> is the uppercase code and <code>{to}</code> is the
      lowercase code
    </li>
  </ul>

  <q-separator class="q-ma-md"></q-separator>
  <div class="row">
    <div class="col-md-4 col-sm-12">
      <q-input
        filled
        v-model="formData.lnbits_exchange_rate_cache_seconds"
        type="number"
        label="Exchange rate cache (seconds)"
        hint="For how many seconds should the exchange rate be cached."
      >
      </q-input>
    </div>
    <div class="col-md-8 col-sm-12"></div>
  </div>
</q-tab-panel>
