﻿<template>
  <div class="flex flex-col items-center w-full">
    <h1 class="uppercase pb-5 text-2xl">   <v-icon class="mr-2">mdi-security</v-icon>{{$t('security.title')}}</h1>

    <div class="border rounded-2xl w-full max-w-[800px]">
      <div class="py-5 uppercase ml-4">{{$t('security.howtoconnect')}}</div>

      <div class="flex flex-col w-full">    
        <button
            @click="openModal('ModalPassword')"
            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
          <span class="pa-2 min-w-32 text-left"><v-icon>mdi-onepassword</v-icon></span>
          <span class="flex-auto text-left pr-6">{{$t('security.password')}}</span>
          <span class="flex-none">
            <v-icon>mdi-chevron-right</v-icon>
          </span>
        </button>

        <button
            @click="openModal('ModalRecoveryByEmailInfo')"
            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
          <span class="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-email-outline</v-icon></span>
          <span class="flex-auto text-left pr-6">{{$t('security.recoverybyemail')}}</span>
          <span class="flex-none">
            <v-icon>mdi-chevron-right</v-icon>
          </span>
        </button>

        <button
            @click="openModal('ModalRecoveryByPhoneInfo')"
            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl">
          <span class="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-cellphone</v-icon></span>
          <span class="flex-auto text-left pr-6">{{$t('security.recoverybymobile')}}</span>
          <span class="flex-none">
            <v-icon>mdi-chevron-right</v-icon>
          </span>
        </button>
      </div>
    </div>
  </div>

  <!-- Modal -->
  <v-dialog v-model="dialog" max-width="600px">
    <v-card>
      <v-card-title>

        <v-spacer></v-spacer>

      </v-card-title>
      <v-card-text>
        <component :is="currentComponent"></component>
      </v-card-text>
    </v-card>
  </v-dialog>

  
</template>



<script setup>
import { ref } from 'vue';
import ModalPassword from './ModalPassword.vue';
import ModalRecoveryByEmailInfo from './ModalRecoveryByEmailInfo.vue';
import ModalRecoveryByPhoneInfo from './ModalRecoveryByPhoneInfo.vue';


const dialog = ref(false);
const currentComponent = ref('');

const componentsMap = {
  ModalPassword,
  ModalRecoveryByEmailInfo,
  ModalRecoveryByPhoneInfo,

};

const openModal = (component) => {
  currentComponent.value = componentsMap[component];
  dialog.value = true;
};
</script>

<style>
.HoverBtn:hover {
  @apply bg-[#A6147D] text-white;
  @apply hover:opacity-90; /* Réduire l'opacité au survol */
}


</style>


