<template>
  <slide-template title="FAQ__title">
    <div
      class="q-pa-md w100 flex justify-center"
      style="max-width: 800px"
      >
      <q-list separator>
        <q-expansion-item
          group="FAQgroup"
          v-for="item in 5"
          :key="item"
          switch-toggle-side
          header-class="text-h5"
          expand-icon="mdi-plus"
          expanded-icon="mdi-close"
          >
          <template #header="{ expanded }">
            <div :class="expanded ? 'text-brand' : ''" class="w100">
              {{ $t('faq__question_' + item) }}
            </div>
          </template>
          <q-card>
            <q-card-section class="text-h6">
              {{ $t('faq__answer_' + item) }}
            </q-card-section>
          </q-card>
        </q-expansion-item>
      </q-list>
    </div>
  </slide-template>
</template>

<script setup lang="ts">
  import SlideTemplate from 'components/SlideTemplate.vue';
  
</script>

<style scoped>
.custom-expansion.q-expansion-item--collapsed :deep(.q-item__section--side .q-icon) {
  transition: transform 0.3s;
}
.custom-expansion.q-expansion-item--expanded :deep(.q-item__section--side .q-icon) {
  transform: rotate(180deg);
}
</style>
