<script setup lang="ts">
import ItFullScreenModal from '@/components/ui/ItFullScreenModal.vue'
import IconLogout from '@/components/icons/IconLogout.vue'
import IconSettings from '@/components/icons/IconSettings.vue'
import {useRouter} from "vue-router";

const router = useRouter()

const props = defineProps<{
  show: boolean,
  user: object,
  learningPathName: string,
  learningPathSlug: string
}>()

const emits = defineEmits(['closemodal'])

const clickLink = (to: string) => {
  router.push(to)
  emits('closemodal')
}

</script>

<template>
  <ItFullScreenModal
    :show="show"
    @closemodal="$emit('closemodal')"
  >
  <div>
    <div>
      <div class="flex border-b border-gray-500 -mx-8 px-8 pb-4">
        <div v-if="user.avatar_url">
          <img class="inline-block h-16 w-16 rounded-full"
               :src="user.avatar_url"
               alt=""/>
        </div>
        <div class="ml-6">
          <h3>{{user.first_name}} {{user.last_name}}</h3>
            <button
              @click="clickLink('/profile')"
              class="mt-2 inline-block items-center">
              <IconSettings class="inline-block" /><span class="ml-3">Kontoeinstellungen</span>
            </button>
        </div>
      </div>
      <div>
        <div
          class="mt-6 pb-6 border-b border-gray-500"
          v-if="learningPathName">
          <h4 class="text-gray-900 text-sm">Kurs: {{learningPathName}}</h4>
          <ul class="mt-6">
            <li><button @click="clickLink('/learningpath')">Lernpfad</button></li>
            <li class="mt-6">Kompetenzprofil</li>
          </ul>
        </div>
        <div class="mt-6 pb-6 border-b border-gray-500">
          <ul>
            <li>Shop</li>
            <li class="mt-6">Mediathek</li>
          </ul>
        </div>
        <div class="mt-6 items-center">
          <IconLogout class="inline-block" /><span class="ml-1">Abmelden</span>
        </div>
      </div>
    </div>
  </div>
  </ItFullScreenModal>
</template>
