<template>
    <ul class="list-unstyled">
        <li class="d-flex" v-bind:key="note.noteid" v-for="note in this.notes">
            <template v-if="authusername === note.noteuser || authusername === 'admin'">
                <button class="btn btn-primary m-1 my-2">Edit</button>
                <button class="btn btn-danger m-1 my-2">Delete</button>
                <button class="btn btn-primary m-1 my-2">Switch</button>
            </template>
            <div class="card m-2 w-100">
                <div class="card-body p-2">
                    {{ note.thenote }}
                </div>
            </div>
        </li>
    </ul>
</template>
<script>
export default {
    props: ['initialnotes', 'authusername'],
    data () {
        return {
            notes: this.initialnotes
        }
    }
}
</script>