<template>
    <div :id="item.id" class="mx-6 my-2" :class="{ selected : isSelected }">

        <input type="hidden" :name="'items[' + item.id + '][id]'" :value="item.id">
        <input type="hidden" :name="'items[' + item.id + '][name]'" :value="item.name">
        <input type="hidden" :name="'items[' + item.id + '][type]'" :value="item.type">
        <input type="hidden" :name="'items[' + item.id + '][url]'" :value="item.url">
        <input type="hidden" :name="'items[' + item.id + '][target]'" :value="item.target">
        <input type="hidden" :name="'items[' + item.id + '][parent_id]'" :value="item.parent_id">
        <input type="hidden" :name="'items[' + item.id + '][menu_group_id]'" :value="item.menu_group_id">
        <input type="hidden" :name="'items[' + item.id + '][entity_type]'" :value="item.entity_type">
        <input type="hidden" :name="'items[' + item.id + '][entity_id]'" :value="item.entity_id">
        <input type="hidden" :name="'items[' + item.id + '][entity_route]'" :value="item.entity_route">
        <input type="hidden" :name="'items[' + item.id + '][sort_order]'" :value="item.sort_order">

        <div class="bg-white overflow-hidden shadow cursor-move hover:bg-gray-100 group">
            <div class="px-3 py-1">
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-2 items-center">
                    <div class="col-span-2">
                        <span
                            class="mr-1 inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-gray-100 text-gray-800"
                        >
                            {{ index + 1 }}
                        </span>
                        <span class="text-xs">
                            {{ item.name }}
                        </span>
                        <span
                            class="ml-1 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium leading-4 bg-indigo-100 text-indigo-800"
                        >
                            {{ item.type }}
                        </span>
                        <span v-if="item.is_new" class="font-bold text-orange-500 text-xs">
                            (New Item)
                        </span>
                        <span v-else-if="item.is_dirty" class="font-bold text-red-500 text-xs">
                            (Unsaved Changes)
                        </span>
                    </div>
                    <div class="col-span-1 text-right md:text-left lg:text-right">
                        <button @click.prevent="editItem(item, item.parent_id + '-' + index)"
                                title="Edit Item"
                                class="p-1 text-gray-400 rounded-full hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:shadow-outline focus:text-gray-500"
                        >
                            <svg fill="currentColor" viewBox="0 0 20 20" class="h-4 w-4">
                                <path
                                    d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
                                ></path>
                            </svg>
                        </button>
                        <button @click.prevent="deleteItem(item, item.parent_id + '-' + index)"
                                title="Delete Item"
                                class="p-1 text-red-400 rounded-full hover:bg-red-100 hover:text-red-500 focus:outline-none focus:shadow-outline focus:text-red-500"
                        >
                            <svg fill="currentColor" viewBox="0 0 20 20" class="h-4 w-4">
                                <path d="M4 3a2 2 0 100 4h12a2 2 0 100-4H4z"></path>
                                <path
                                    d="M3 8h14v7a2 2 0 01-2 2H5a2 2 0 01-2-2V8zm5 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"
                                    clip-rule="evenodd" fill-rule="evenodd"
                                ></path>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>


<script>
export default {
    props : {
        index : null,
        item : null,
        currentItem : null
    },
    computed : {
        isSelected() {
            return (this.currentItem && this.currentItem.id === this.item.id);
        },
    },
    methods : {
        editItem() {
            this.$emit('editItem', this.item, this.item.parent_id + '-' + this.index);
        },
        deleteItem() {
            this.$emit('deleteItem', this.item, this.item.parent_id + '-' + this.index);
        },
    }
}
</script>
