<template>
  <q-page>
    <CMyPage title="">
      <div class="q-ma-md">
            <span>{{ setmeta({
                title: 'Testimonanze',
                description: $t('msg.myAppDescription'),
                keywords: $t('msg.keywords_base') } ) }}
            </span>

        <CTitleBanner class="q-pa-xs" :title="$t('text.testimonial')" bgcolor="bg-primary" clcolor="text-white"
                      mystyle=" " canopen="true">


          <q-carousel
            v-model="mytestimonianze"
            transition-prev="slide-right"
            transition-next="slide-left"
            swipeable
            animated
            control-color="white"
            padding
            ref="mytestimonianze"
            height="100%"
            class="text-white shadow-1 rounded-borders"
          >
            <template v-slot:control>
              <q-carousel-control
                position="bottom-left"
                class="q-gutter-xs"
                style="opacity: 0.4;">
                <q-btn
                  push round color="white" text-color="black" icon="arrow_left"
                  @click="$refs.mytestimonianze.previous()"></q-btn>
              </q-carousel-control>
              <q-carousel-control
                position="bottom-right"
                class="q-gutter-xs"
                style="opacity: 0.4;">
                <q-btn
                  push round color="white" text-color="black" icon="arrow_right"
                  @click="$refs.mytestimonianze.next()"></q-btn>
              </q-carousel-control>
            </template>
            <q-carousel-slide v-for="(rec, index) in gettestimonianze()" :key="index" :name="index"
                              class="row flex-center">
              <div class="q-pa-sm text-subtitle2 text-blue">{{ rec.title }}</div>
              <div v-html="rec.text" class="text-black"></div>
            </q-carousel-slide>
          </q-carousel>
          <div class="row justify-center">
            <q-btn-toggle
              glossy
              v-model="mytestimonianze"
              :options="gettestimonianze()"
            ></q-btn-toggle>
          </div>


        </CTitleBanner>

        <CTitleBanner class="q-pa-xs" :title="`AUDIO`" bgcolor="bg-primary" clcolor="text-white"
                      mystyle=" " canopen="true">

          <q-carousel
            v-model="myaudio"
            transition-prev="slide-right"
            transition-next="slide-left"
            swipeable
            animated
            control-color="white"
            padding
            ref="myaudio"
            height="150px"
            class="text-white shadow-1 rounded-borders"
          >
            <template v-slot:control>
              <q-carousel-control
                position="top-left"
                class="q-gutter-xs"
                style="opacity: 0.6;">
                <q-btn
                  push round color="white" text-color="black" icon="arrow_left"
                  @click="$refs.myaudio.previous()"></q-btn>
              </q-carousel-control>
              <q-carousel-control
                position="top-right"
                class="q-gutter-xs"
                style="opacity: 0.6;">
                <q-btn
                  push round color="white" text-color="black" icon="arrow_right"
                  @click="$refs.myaudio.next()"></q-btn>
              </q-carousel-control>
            </template>
            <q-carousel-slide v-for="(recaudio, index) in getaudiofiles()" :key="index" :name="index"
                              class="column no-wrap flex-center">
              <div class="q-pa-sm text-subtitle2 text-blue">{{ recaudio.title }}</div>
              <q-media-player
                type="audio"
                :sources="[...recaudio]"
                background-color="deep-purple-3"
                :playback-rates="[ { label: 'Normal', value: 1 }, { label: '1.15x', value: 1.15 } ]"
              ></q-media-player>
            </q-carousel-slide>
          </q-carousel>
          <div class="row justify-center">
            <q-btn-toggle
              glossy
              v-model="myaudio"
              :options="getaudiofiles()"
            ></q-btn-toggle>
          </div>
        </CTitleBanner>


      </div>
    </CMyPage>
  </q-page>
</template>

<script lang="ts" src="./testimonianze.ts">
</script>

<style lang="scss" scoped>
  @import './testimonianze.scss';
</style>
