<template>
    <div class="flex justify-center items-center">
        <div class="w-full">
            <Heading>{{ __('Getting Started') }}</Heading>
            <p class="leading-tight mt-3">
                {{ __('Als Dozent hast du Zugriff auf das Daten-Backend und kannst neue Items anlegen.') }}
            </p>
            <p class="leading-tight mt-3">
                {{ __('Hier ein paar Tipps, wie du am besten startest:') }}
            </p>

            <Card class="mt-8">
                <div class="md:grid md:grid-cols-2">
                    <div class="border-r border-b border-gray-200 dark:border-gray-700">
                        <a :href="resources" class="no-underline flex p-6">
                            <div class="flex justify-center w-11 flex-shrink-0 mr-6">
                                <div class="text-4xl text-primary-500 dark:text-primary-600">1.</div>
                            </div>

                            <div>
                                <Heading :level="3">{{ __('Stadt suchen und anlegen') }}</Heading>
                                <p class="leading-normal mt-3">
                                    {{
                                        __('Gehe auf die Seite "Städte" und suche nach der Stadt, in der du die Items anlegen möchtest. Wenn du die Stadt nicht findest, kannst du sie anlegen.')
                                    }}
                                </p>
                            </div>
                        </a>
                    </div>

                    <div class="border-b border-gray-200 dark:border-gray-700">
                        <a :href="actions" class="no-underline flex p-6">
                            <div class="flex justify-center w-11 flex-shrink-0 mr-6">
                                <div class="text-4xl text-primary-500 dark:text-primary-600">2.</div>
                            </div>

                            <div>
                                <Heading :level="3">{{ __('Veranstaltungs-Ort suchen und anlegen') }}</Heading>
                                <p class="leading-normal mt-3">
                                    {{
                                        __('Gehe auf die Seite "Veranstaltungs-Orte" und suche nach dem Ort, an dem du die Items anlegen möchtest. Wenn du den Ort nicht findest, kannst du ihn anlegen.')
                                    }}
                                </p>
                            </div>
                        </a>
                    </div>

                    <div class="border-r border-b border-gray-200 dark:border-gray-700">
                        <a :href="filters" class="no-underline flex p-6">
                            <div class="flex justify-center w-11 flex-shrink-0 mr-6">
                                <div class="text-4xl text-primary-500 dark:text-primary-600">3.</div>
                            </div>

                            <div>
                                <Heading :level="3">{{ __('Dozenten-Profil bearbeiten') }}</Heading>
                                <p class="leading-normal mt-3">
                                    {{
                                        __('Gehe auf die Seite "Dozenten" und suche nach deinem Dozenten-Profil. Wenn du es nicht findest, kannst du es anlegen.')
                                    }}
                                </p>
                            </div>
                        </a>
                    </div>

                    <div class="border-b border-gray-200 dark:border-gray-700">
                        <a :href="lenses" class="no-underline flex p-6">
                            <div class="flex justify-center w-11 flex-shrink-0 mr-6">
                                <div class="text-4xl text-primary-500 dark:text-primary-600">4.</div>
                            </div>

                            <div>
                                <Heading :level="3">{{ __('Kurse anlegen und verwalten') }}</Heading>
                                <p class="leading-normal mt-3">
                                    {{
                                        __('Gehe auf die Seite "Kurse" und suche nach dem Kurs, den du editieren möchtest. Wenn du den Kurs nicht findest, kannst du ihn anlegen.')
                                    }}
                                </p>
                            </div>
                        </a>
                    </div>

                    <div
                        class="border-r md:border-b-0 border-b border-gray-200 dark:border-gray-700"
                    >
                        <a :href="metrics" class="no-underline flex p-6">
                            <div class="flex justify-center w-11 flex-shrink-0 mr-6">
                                <div class="text-4xl text-primary-500 dark:text-primary-600">5.</div>
                            </div>

                            <div>
                                <Heading :level="3">{{ __('Termine anlegen und verwalten') }}</Heading>
                                <p class="leading-normal mt-3">
                                    {{
                                        __('Gehe auf die Seite "Termine" und suche nach dem Termin, den du editieren möchtest. Wenn du den Termin nicht findest, kannst du ihn anlegen.')
                                    }}
                                </p>
                            </div>
                        </a>
                    </div>

                    <div
                        class="md:border-b-0 border-b border-gray-200 dark:border-gray-700"
                    >
                        <a :href="cards" class="no-underline flex p-6">
                            <div class="flex justify-center w-11 flex-shrink-0 mr-6">
                                <div class="text-4xl text-primary-500 dark:text-primary-600">6.</div>
                            </div>

                            <div>
                                <Heading :level="3">{{ __('Berechtigungen') }}</Heading>
                                <p class="leading-normal mt-3">
                                    {{
                                        __('Wenn Buttons zur Bearbeitung fehlen, dann hast du nicht die nötigen Berechtigungen. Melde dich bei einem der Admins.')
                                    }}
                                </p>
                            </div>
                        </a>
                    </div>
                </div>
            </Card>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Help',

    props: {
        card: Object,
    },

    methods: {
        link (path) {
            return `https://nova.laravel.com/docs/${this.version}/${path}`
        },
    },

    computed: {
        resources () {
            return this.link('resources')
        },
        actions () {
            return this.link('actions/defining-actions.html')
        },
        filters () {
            return this.link('filters/defining-filters.html')
        },
        lenses () {
            return this.link('lenses/defining-lenses.html')
        },
        metrics () {
            return this.link('metrics/defining-metrics.html')
        },
        cards () {
            return this.link('customization/cards.html')
        },
        version () {
            const parts = Nova.config('version')
                .split('.')
            parts.splice(-2)

            return `${parts}.0`
        },
    },
}
</script>
