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

        <div class="overflow-hidden shadow cursor-move group"
             :class="isSelected ? 'bg-primary-100' : 'bg-white hover:bg-gray-100'"
        >
            <div class="px-4 py-3">

                <div class="flex md:flex-initial items-center md:grid md:gap-2 md:grid-cols-3">

                    <div class="flex flex-1 md:col-span-1">
                        <span
                            class="inline-flex self-center mr-4 px-3 py-0.5 rounded-full text-sm font-medium leading-5 bg-gray-100 text-gray-800 group-hover:bg-gray-200"
                        >
                            {{ index + 1 }}
                        </span>
                        <span class="inline-flex self-center md:flex-initial">
                            <img class="inline-block h-12 w-16"
                                 :src="imageSrc(item)"
                                 :alt="item.title"
                            />
                        </span>
                    </div>

                    <div class="hidden md:block md:col-span-1 text-xs">
                        <div>
                            <span class="text-gray-400">Alt Tag:</span>
                            {{ item.title }}
                        </div>
                        <div>
                            <span class="text-gray-400">File:</span>
                            {{ item.name }}
                        </div>
                        <div>
                            <span class="text-gray-400">Size:</span>
                            W{{ item.width }} X H{{ item.height }}
                        </div>
                    </div>

                    <div class="flex text-right md:block md:col-span-1">
                        <span class="inline-flex self-end rounded-md shadow-sm">
                            <button
                                @click.prevent="editItem(item, index)"
                                title="Edit Item"
                                type="button"
                                class="inline-flex items-center leading-4 font-medium rounded transition ease-in-out duration-150 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue px-2.5 py-1.5 text-xs border border-gray-300 text-gray-700 bg-white hover:text-gray-500 active:text-gray-800 active:bg-gray-50"
                            >
                                Edit
                            </button>
                        </span>
                        <span class="inline-flex self-end rounded-md shadow-sm">
                            <button
                                @click.prevent="deleteItem(item, index)"
                                title="Delete Item"
                                type="button"
                                class="inline-flex items-center px-2.5 py-1.5 border border-red-300 text-xs leading-4 font-medium rounded text-red-700 bg-white hover:bg-red-500 hover:text-white focus:outline-none focus:border-red-300 focus:shadow-outline-red transition ease-in-out duration-150"
                            >
                                Delete
                            </button>
                        </span>
                    </div>

                </div>

            </div>
        </div>

    </div>
</template>


<script>
export default {
    props : {
        index : null,
        item : null,
        currentItem : null,
        imageUrl : null,
    },
    computed : {
        isSelected() {
            return (this.currentItem && this.currentItem.id === this.item.id);
        },
    },
    methods : {
        imageSrc(item, index) {
            return `/${this.imageUrl}/${item.name}?preset=thumb`;
        },
        editItem(item, index) {
            this.$emit('editItem', this.item, this.index);
        },
        deleteItem(item, index) {
            this.$emit('deleteItem', this.item, this.index);
        },
    }
}
</script>
