<template>
    <v-layout row justify-center>
        <v-dialog
            v-model="dialog"
            persistent
            scrollable
            max-width="600px"
        >
            <v-card>
                <v-card-title class="headline">{{ $t("about") }}</v-card-title>
                <v-card-text>
                    <template v-if="locale == 'ru'">
                        <p class="text-center">Аудиотека</p>
                        <p class="text-center">&copy; Александр Чебыкин, 2019-2022</p>
                        <p class="text-center">Опубликовано под лицензией <a href="https://opensource.org/licenses/MIT" target="_blank">MIT license</a></p>
                        <p class="text-center">Git: <a href="https://www.cainet.info/git/cai/AudioLib" target="_blank">https://home.cainet.info/git/cai/AudioLib</a></p>
                    </template>
                    <template v-else>
                        <p class="text-center">Audiobooks library</p>
                        <p class="text-center">&copy; Alexander I Chebykin, 2019-2022</p>
                        <p class="text-center">Published under <a href="https://opensource.org/licenses/MIT" target="_blank">MIT license</a></p>
                        <p class="text-center">Git: <a href="https://www.cainet.info/git/cai/AudioLib" target="_blank">https://www.cainet.info/git/cai/AudioLib</a></p>
                    </template>
                </v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn flat variant="outlined" color="info" @click="dialog = false">Ok</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </v-layout>
</template>

<script>
    export default {
        name: "AboutDialog",

        data () {
            return {
                dialog: false,
                locale: "en",
            }
        },

        watch: {
            dialog (val) {
                if (val) {
                    let userLocale = navigator.language || navigator.userLanguage;

                    userLocale = userLocale.indexOf("-") > 0
                        ? userLocale.substring(0, userLocale.indexOf("-")).toLowerCase()
                        : userLocale.toLowerCase();

                    this.locale = userLocale;
                }
            },

            darkTheme (val) { this.$store.commit("setDarkTheme", val); },
        }
    }
</script>
