<template>
    <BaseLayout>
        <main class="content">
            <div class="container-fluid p-0">
                <h1 class="h3 mb-3">Admin</h1>
                <div class="row">
                    <div class="col-6 col-xl-3">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title">Tags</h5>
                            </div>
                            <div class="card-body">
                                <ul>
                                    <li v-for="tag in tags.sort()" :key="tag.id">
                                        {{ tag }}
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-xl-3">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title">Properties</h5>
                            </div>
                            <div class="card-body">
                                <ul>
                                    <li v-for="property in properties.sort()" :key="property.id">
                                        {{ property.name }} ({{ property.unit_name }}, {{ property.unit_symbol }})
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title">Categories</h5>
                            </div>
                            <div class="card-body">
                                <ul>
                                    <li v-for="category in categories.sort()" :key="category.id">
                                        {{ category }}
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title">Domains</h5>
                            </div>
                            <div class="card-body">
                                <ul>
                                    <li v-for="domain in domains.sort()" :key="domain.id">
                                        {{ domain }}
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title">Availability Policies</h5>
                            </div>
                            <div class="card-body">
                                <ul>
                                    <li v-for="policy in availability_policies.sort()" :key="policy.id">
                                        {{ policy.text }}
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title">Storage Locations</h5>
                            </div>
                            <div class="card-body">
                                <ul>
                                    <li v-for="location in storage_locations.sort()" :key="location.id">
                                        {{ location.path }}
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </BaseLayout>
</template>

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

export default {
    name: "Admin",
    components: {
        BaseLayout,
        ...BIcons
    },
    computed: {
        ...mapState(["tags", "properties", "categories", "availability_policies", "domains", "storage_locations"])
    },
    methods: {
        ...mapActions(["fetchInfo", "fetchStorageLocations"])
    },
    async mounted() {
        await this.fetchInfo();
        await this.fetchStorageLocations();
    }
}
</script>

<style scoped>

</style>