<template>
    <div class="container p-4 mx-auto bg-gray-800">
        <h1 class="text-center">My Notes</h1>
        <nuxt-link
            to="/notes/new"
            class="bg-blue-700 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded"
            >New note</nuxt-link
        >
        <input
            id="search"
            name="search"
            class="block p-2 my-2 appearance-none w-full bg-transparent border-white-200 border-b focus:border-red-500"
            placeholder="search"
            aria-label="search"
        />
        <div v-for="note in notes" :key="note.uuid">
            <div class="flex justify-between items-center">
                <nuxt-link :to="'/notes/' + note.uuid" class="text-lg">{{
                    note.title
                }}</nuxt-link>
                <div class="py-2">
                    <span
                        v-for="(tag, index) in note.tags"
                        :key="index"
                        class="inline-block text-sm bg-gray-500 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 ml-2"
                        >{{ tag }}</span
                    >
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'

export default {
    name: 'Notes',
    computed: {
        ...mapState('notes', ['notes', 'isInitialized']),
    },
    mounted() {
        if (!this.isInitialized) this.load()
    },
    methods: {
        ...mapActions('notes', ['load']),
    },
}
</script>
