<template>
    <div class="page-container">
        <support-tabs model-value="faq" />
        <div class="page-header">
            <h1 class="page-title">{{ $t('navigation.faq') }}</h1>
            <el-breadcrumb class="breadcrumb" separator="/">
                <el-breadcrumb-item class="text-md opacity-50">
                    <NuxtLink :to="$localePath('/')">{{ $t('navigation.home') }}</NuxtLink>
                </el-breadcrumb-item>
                <el-breadcrumb-item class="text-md opacity-50">
                    <NuxtLink :to="$localePath('/support')">{{ $t('navigation.support') }}</NuxtLink>
                </el-breadcrumb-item>
                <el-breadcrumb-item class="text-md opacity-50">
                    <NuxtLink :to="$localePath('/support/faq')">{{ $t('navigation.faq') }}</NuxtLink>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
    </div>
</template>


<script setup lang="ts">

</script>

<style scoped>
.page-header {
    display: flex;
    padding: 2rem 2rem 0rem;
}

.page-title {
    font-size: 2rem;
    font-weight: bold;
    color: var(--el-color-primary);
    margin-bottom: 1rem;
}

.breadcrumb {
    margin-left: auto;
}

</style>