<q-tab-panel name="site_customisation">
  <q-card-section class="q-pa-none">
    <h6 class="q-my-none">UI Management</h6>
    <br />
    <div>
      <div class="row q-col-gutter-md">
        <div class="col-12 col-md-5">
          <p>Site Title</p>
          <q-input
            filled
            type="text"
            v-model="formData.lnbits_site_title"
            label="Site title"
          ></q-input>
          <br />
        </div>
        <div class="col-12 col-md-5">
          <p>Site Tagline</p>
          <q-input
            filled
            type="text"
            v-model="formData.lnbits_site_tagline"
            label="Site tagline"
          ></q-input>
          <br />
        </div>
        <div class="col-12 col-md-2 q-mt-xl">
          <q-toggle
            tip="Remove homepage elements like 'runs on' etc"
            v-model="formData.lnbits_show_home_page_elements"
            :label="formData.lnbits_show_home_page_elements ? 'Enable elements on homepage' : 'Disable elements on homepage'"
          ></q-toggle>
        </div>
      </div>

      <div>
        <p>Site Description</p>
        <q-input
          v-model="formData.lnbits_site_description"
          filled
          type="textarea"
          hint="Use plain text, Markdown, or raw HTML"
        />
      </div>
      <br />
      <div class="row q-col-gutter-md">
        <div class="col-12 col-md-4">
          <p>Default Wallet Name</p>
          <q-input
            filled
            type="text"
            v-model="formData.lnbits_default_wallet_name"
            label="LNbits wallet"
          ></q-input>
        </div>
        <div class="col-12 col-md-4">
          <p>Denomination</p>
          <q-input
            filled
            type="text"
            v-model="formData.lnbits_denomination"
            label="sats"
            hint="The name for the FakeWallet token"
          ></q-input>
        </div>
        <div class="col-12 col-md-4">
          <p>QR code logo</p>
          <q-input
            filled
            type="text"
            v-model="formData.lnbits_qr_logo"
            label="https://example.com/image.svg"
            hint="URL to logo image in QR code"
          ></q-input>
        </div>
      </div>
      <div class="row q-col-gutter-md">
        <div class="col-12 col-md-4">
          <p>Custom Badge</p>
          <div class="row q-col-gutter-md">
            <div class="col-12 col-md-8">
              <q-input
                filled
                type="text"
                tip="Custom Badge"
                v-model.trim="formData.lnbits_custom_badge"
                label="Custom Badge 'USE WITH CAUTION - LNbits wallet is still in BETA'"
              ></q-input>
            </div>
            <div class="col-12 col-md-4">
              <q-select
                filled
                v-model="formData.lnbits_custom_badge_color"
                :options="colors"
                label="Custom badge color"
              ></q-select>
            </div>
          </div>
        </div>
      </div>
      <br />
      <div class="row q-col-gutter-md">
        <div class="col-12 col-md-6">
          <p>Themes</p>
          <q-select
            filled
            v-model="formData.lnbits_theme_options"
            multiple
            hint="Choose themes available for users"
            :options="lnbits_theme_options"
            label="Themes"
          ></q-select>
          <br />
        </div>
        <div class="col-12 col-md-6">
          <p>Custom Logo</p>
          <q-input
            filled
            type="text"
            v-model="formData.lnbits_custom_logo"
            label="https://example.com/image.png"
            hint="URL to logo image"
          ></q-input>
          <br />
        </div>
      </div>
      <div class="row q-col-gutter-md">
        <div class="col-12 col-md-6">
          <p>Ad Space Title</p>
          <q-input
            filled
            type="text"
            v-model="formData.lnbits_ad_space_title"
            label="Supported by"
          ></q-input>
          <br />
        </div>
        <div class="col-12 col-md-6">
          <p>Advertisement Slots</p>
          <q-input
            class="q-mb-md"
            filled
            v-model="formData.lnbits_ad_space"
            type="text"
            label="url;img_light_url;img_dark_url, url..."
            hint="Ad url and image filepaths in CSV format, extensions can choose to honor"
          >
          </q-input>
          <q-toggle
            v-model="formData.lnbits_ad_space_enabled"
            :label="formData.lnbits_ad_space_enabled ? 'Ads enabled' : 'Ads disabled'"
          />
          <br />
        </div>
      </div>
    </div>
  </q-card-section>
</q-tab-panel>
