<template>
  <v-dialog
    v-model="modelValue"
    max-width="1000"
  >
    <v-card>
      <v-row no-gutters>
        <v-col class="pa-8">
          <p class="text-h5 font-weight-bold text-primary">
            {{ t('texts.demo.cloud.title') }}
          </p>
          <p class="mt-2 text-body-2">
            {{ t('texts.demo.cloud.subtitle') }}
          </p>
          <v-list color="primary">
            <template v-for="benefit in tm('texts.demo.cloud.benefits')">
              <v-list-item>
                <v-list-item-title>{{ benefit }}</v-list-item-title>
                <template #prepend>
                  <v-icon
                    color="primary"
                    icon="check_circle"
                  />
                </template>
              </v-list-item>
            </template>
            <v-list-item>
              <v-list-item-title>{{
                t('texts.demo.cloud.andMore')
              }}</v-list-item-title>
            </v-list-item>
          </v-list>
          <v-btn
            class="purchase"
            block
            variant="flat"
            append-icon="arrow_outward"
            @click="purchase"
          >
            <span>{{ t('texts.demo.cloud.upgrade') }}</span>
          </v-btn>
        </v-col>
        <v-col class="background pa-8">
          <div class="align-center d-flex flex-column h-100 justify-center">
            <img
              alt="cloud"
              width="75%"
              src="@/assets/images/cloud-storage.svg"
            />
          </div>
        </v-col>
      </v-row>
    </v-card>
  </v-dialog>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n';

const modelValue = defineModel<boolean>({ default: false });

const { t, tm } = useI18n();

function purchase(): void {
  // TODO: implementation
}
</script>

<style scoped lang="scss">
@use 'sass:map';
@use '@/assets/palette' as palette;

.v-btn.purchase {
  color: rgb(var(--v-theme-surface));
  background-color: map.get(palette.$minsk, 900);
}

.v-col.background {
  background-color: map.get(palette.$picton, 400);
}
</style>
