<template>
    <BaseLayout>
        <main class="content">
            <div class="row">
                <div class="col">
                    <div class="card">
                        <div class="card-header">{{ location.name }}</div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="path" class="form-label">Path</label>
                                <div>{{ location.path }}</div>
                            </div>
                            <div class="mb-3">
                                <label for="description" class="form-label">Description</label>
                                <div>{{ location.description || '-' }}</div>
                            </div>
                            <div class="mb-3">
                                <label for="category" class="form-label">Category</label>
                                <div>
                                    <span class="badge bg-info text-white" v-if="location.category">{{ location.category }}</span>
                                    <span class="text-muted" v-else>-</span>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label for="owner" class="form-label">Owner</label>
                                <div>{{ location.owner?.username || '-' }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <button class="btn btn-primary" @click="$router.push('/storage-locations/' + id + '/edit')">
                            <b-icon-pencil-square></b-icon-pencil-square>
                            Edit
                        </button>
                        <button type="submit" class="btn btn-danger"
                                @click="deleteStorageLocation(location).then(() => $router.push('/storage-location'))">
                            <b-icon-trash></b-icon-trash>
                            Delete
                        </button>
                    </div>
                </div>
            </div>
        </main>
    </BaseLayout>
</template>

<script>
import * as BIcons from "bootstrap-icons-vue";
import BaseLayout from "@/components/BaseLayout.vue";
import {mapActions, mapState} from "vuex";

export default {
    name: "StorageLocationDetail",
    components: {
        BaseLayout,
        ...BIcons
    },
    props: {
        id: {
            type: String,
            required: true
        }
    },
    computed: {
        ...mapState(["storage_locations"]),
        location() {
            return this.storage_locations.find(loc => loc.id === parseInt(this.id)) || {}
        }
    },
    methods: {
        ...mapActions(["fetchStorageLocations", "deleteStorageLocation"]),
    },
    async mounted() {
        await this.fetchStorageLocations()
    }
}
</script>

<style scoped>
</style>
