ItemDetail = {
    template: "#ItemDetail",
    router_path: "/ItemDetail/:id",
    delimiters: ["[[", "]]"],

    data: function() {
        return {
            properties: [],
            linked_properties: [],
            children: [],
            parents: [],
            // TODO: Also remove this tedious things
            properties_headers: [],
            linked_properties_headers: [],
            children_headers: [],
            parents_headers: [],
        }
    },

    computed: {
        // TODO: Remove this by a generic things at some points, this become tedious and repetitive
        properties_efields: function() {
            return this.properties_headers.filter(e => e.encrypted).map(e => e.value)
        },

        linked_properties_efields: function() {
            return this.linked_properties_headers.filter(e => e.encrypted).map(e => e.value)
        },

        children_efields: function() {
            return this.children_headers.filter(e => e.encrypted).map(e => e.value)
        },

        parents_efields: function() {
            return this.parents_headers.filter(e => e.encrypted).map(e => e.value)
        },
    },

    mounted: function() {

        this.reload()

    },

    methods: {

        async reload () {

            try {

                const response = await this.$http.get(Urls["items:details"](this.$route.params.id))

                this.properties_headers = response.data.properties_headers
                this.linked_properties_headers = response.data.linked_properties_headers
                this.children_headers = response.data.children_headers
                this.parents_headers = response.data.parents_headers

                // TODO: TEDIOUUUUUS
                response.data.parents.forEach(async e => {
                    this.parents.push(await this.decryptObject(this.parents_efields, e))
                })

                response.data.children.forEach(async e => {
                    this.children.push(await this.decryptObject(this.children_efields, e))
                })

                response.data.properties.forEach(async e => {
                    this.properties.push(await this.decryptObject(this.properties_efields, e))
                })

                response.data.linked_properties.forEach(async e => {
                    this.linked_properties.push(await this.decryptObject(this.linked_properties_efields, e))
                })

            } catch (err) {

                Swal.fire({title: "{{_('Error during loading of items') | escapejs}}", icon: "error", position:"top-end", showConfirmButton: false, toast: true, timer: 1000})

                throw err

            }

        },

        async deleteItem () {

        },

        async createItem () {

        },

        async editItem() {

        },
    }
}