<script setup lang="ts">
import cogIcon from '~/assets/images/icons/cog.png'
import pearlIcon from '~/assets/images/icons/pearl.gif'

const theme = useVThemeSSR()
</script>

<template>
  <VDialog>
    <template #activator="{ props }">
      <div v-bind="props" class="options clickable">
        <img
          class="logo user-select-none"
          draggable="false"
          :src="cogIcon"
          alt="Options"
        />
      </div>
    </template>
    <template #default="{ isActive }">
      <VCard>
        <template #title>
          <h3 class="alex text-align-center">Site options</h3>
        </template>
        <div class="overlay background"></div>
        <VCardText class="overlay content">
          <img
            class="icon-badge user-select-none"
            draggable="false"
            :src="pearlIcon"
            alt="Pearl"
          />
          <div>
            <div class="row">
              <div class="col-12 col-sm-6">
                <p>
                  <strong>Theme</strong><br />
                  Available in all flavors, vanilla and chocolate.
                </p>
              </div>
              <div class="col-12 col-sm-6">
                <p>
                  <strong>Animation</strong><br />
                  Some computers may have issues rendering that gorgeous
                  background animation. Enabling it substantially increases
                  power consumption.
                </p>
              </div>
            </div>
          </div>
          Report a bug
        </VCardText>
        <VCardActions>
          <VSpacer></VSpacer>
          <VBtn color="danger" @click="theme.toggle()" />
          <VBtn
            variant="outlined"
            prepend-icon="close"
            @click="isActive.value = false"
          >
            Close
          </VBtn>
        </VCardActions>
      </VCard>
    </template>
  </VDialog>
</template>

<style scoped lang="scss">
.options {
  display: flex;
  position: fixed;

  top: 0;
  right: 0;

  padding: 10px;
}

.icon-badge {
  position: fixed;

  top: -16px;
  left: -16px;

  transform: rotate(-30deg);
}

.logo {
  width: 16px;
  height: 16px;
}
</style>
