<script setup>
import { store } from '@/store.js';
</script>
<template>
    <nav class="navbar navbar-expand-sm bg-light">
        <div class="container">
            <!-- brand -->
            <router-link
                class="navbar-brand"
                to="/subscriptions"
            >
                <img
                    src="@/assets/logo.svg"
                    alt=""
                    width="200"
                    height="45"
                >
            </router-link>

            <!-- mobile view -->
            <button
                class="navbar-toggler"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#mynavbar"
            >
                <span class="navbar-toggler-icon" />
            </button>
            <div
                id="mynavbar"
                class="collapse navbar-collapse"
            >
                <!-- routes -->
                <div class="me-auto">
                    <ul
                        v-if="store.isLoggedIn"
                        class="navbar-nav"
                    >
                        <li class="nav-item">
                            <router-link
                                to="/subscriptions"
                                class="nav-link"
                            >
                                {{ $t("message.podcast", {n:2}) }}
                            </router-link>
                        </li>
                        <li class="nav-item">
                            <router-link
                                to="/episodes"
                                class="nav-link"
                            >
                                {{ $t("message.mostRecentlyHeared") }}
                            </router-link>
                        </li>
                    </ul>
                </div>

                <!-- right side of navbar -->
                <div class="d-flex navbar-nav">
                    <!-- change language -->
                    <!-- https://vue-i18n.intlify.dev/guide/essentials/scope.html -->
                    <div class="nav-item dropdown">
                        <a
                            class="nav-link dropdown-toggle"
                            href="#"
                            role="button"
                            data-bs-toggle="dropdown"
                        >
                            <i class="fa fa-language" /> {{ $i18n.locale }}
                        </a>
                        <ul class="dropdown-menu">
                            <li 
                                v-for="locale in $i18n.availableLocales"
                                :key="locale"
                            >
                                <a
                                    class="dropdown-item"
                                    :class="{active: $i18n.locale == locale}"
                                    @click="$i18n.locale = locale"
                                >{{ locale }}</a>
                            </li>
                        </ul>
                    </div>

                    <!-- Help Modal -->
                    <a
                        href="#"
                        class="nav-link"
                        data-bs-toggle="modal"
                        data-bs-target="#help"
                    >{{ $t("message.help") }}</a>
                    
                    <!-- User Account -->
                    <div
                        v-if="store.isLoggedIn"
                        class="nav-item dropdown"
                    >
                        <a
                            href="#"
                            class="nav-link dropdown-toggle"
                            role="button"
                            data-bs-toggle="dropdown"
                        >
                            {{ store.username || "John Doe" }} <i class="m-1 fa fa-user" />
                        </a>
                        <ul class="dropdown-menu">
                            <li>
                                <router-link
                                    to="/settings"
                                    class="dropdown-item"
                                >
                                    {{ $t("message.settings") }}
                                </router-link>
                            </li>
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <router-link
                                    to="/login"
                                    class="dropdown-item"
                                    @click="store.logout()"
                                >
                                    {{ $t("message.logout") }}
                                </router-link>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </nav> 
</template>
<style scoped>
</style>

