{% load i18n %}

<div>
    <div class="card mt-4 pt-2 ps-lg-2">
        <h5 class="card-header">{% trans "Item" %} [[ this.$route.params.id ]]</h5>
        <div class="card-body">

            <v-container fluid v-if="object">
                <template v-for="field in headers">
                    <v-row v-if="field.details">

                        <template v-if="field.value == 'type'">
                            <v-col cols="4">
                                <v-subheader>[[ field.text ]]</v-subheader>
                            </v-col>
                            <v-col cols="6">
                                <v-text-field :value="object[field.value]" readonly dense></v-text-field>
                            </v-col>
                            <v-col cols="2" class="d-flex">
                                <v-btn color="primary" dark class="mb-2 flex-grow-1 flex-shrink-1" @click="showType">
                                    <v-icon small class="mr-2">mdi-eye</v-icon>
                                    {% trans "Link" %}
                                </v-btn>
                            </v-col>
                        </template>

                        <template v-else>
                            <v-col cols="4">
                                <v-subheader>[[ field.text ]]</v-subheader>
                            </v-col>
                            <v-col cols="8">
                                <v-text-field :value="object[field.value]" readonly dense></v-text-field>
                            </v-col>
                        </template>

                    </v-row>
                </template>

                <v-row v-if="object?.history">
                    <v-col cols="4">
                        <v-subheader>{% trans "History version" %}</v-subheader>
                    </v-col>
                    <v-col cols="6">
                        <v-text-field :value="object.history.length" readonly dense></v-text-field>
                    </v-col>

                    <v-col cols="2" class="d-flex">
                        <v-btn color="primary" dark class="mb-2 flex-grow-1 flex-shrink-1" @click="showHistory">
                            <v-icon small class="mr-2">mdi-eye</v-icon>
                            {% trans "View history" %}
                        </v-btn>

                        <v-dialog v-model="dialog" max-width="1200px">
                            <v-card>
                                <v-card-title>
                                    <span class="text-h5">{% trans "History for" %} [[ $route.params.id ]]</span>
                                </v-card-title>
                                <v-card-text>
                                    <v-container>

                                        <v-data-table
                                            :headers="headers.filter(i => i.value != 'id')"
                                            :items="history"
                                            :items-per-page="50"
                                            dense>
                                            <template v-slot:item.actions="{ item }">
                                                <v-icon small class="mr-2" @click="deleteVersion(item)">mdi-delete</v-icon>
                                                <v-icon small @click="useVersion(item)">mdi-content-save-edit</v-icon>
                                            </template>
                                        </v-data-table>

                                    </v-container>
                                </v-card-text>

                                <v-card-actions>
                                    <v-spacer></v-spacer>
                                    <v-btn color="blue darken-1" text @click="closeDialog">
                                        <v-icon small class="mr-2">mdi-arrow-left</v-icon>
                                        {% trans "Go back" %}
                                    </v-btn>
                                </v-card-actions>
                            </v-card>
                        </v-dialog>

                    </v-col>
                </v-row>
            </v-container>

        </div>
    </div>

    <div class="card mt-4 pt-2 ps-lg-2">
        <h5 class="card-header">{% trans "Properties" %}</h5>
        <div class="card-body">
            <LinkedPropertyList
                :items="linked_properties"
                :items_headers="linked_properties_headers"
                :items_relations="{'property': all_properties}"
                :hidden_fields="['name', 'description', 'custom_identifier', 'item__name', 'item__custom_identifier']"
                :non_editable_fields="['item']"
                show_item="property"
                group_by="type"
                @deleteItem="deleteLinkedProperty"
                @createItem="createLinkedProperty"
                @editItem="editLinkedProperty"
            ></LinkedPropertyList>
        </div>
    </div>

    <div class="card mt-4 pt-2 ps-lg-2">
        <h5 class="card-header">{% trans "Children" %}</h5>
        <div class="card-body">
            <ItemRelationList
                :items="children"
                :items_headers="children_headers"
                :hidden_fields="['parent__name', 'parent__custom_identifier']"
                :items_relations="{'parent': [object], 'child': all_items}"
                group_by="type__name"
                @deleteItem="deleteRelation"
                @createItem="createRelation"
                @editItem="editRelation"
            ></ItemRelationList>
        </div>
    </div>

    <div class="card mt-4 pt-2 ps-lg-2">
        <h5 class="card-header">{% trans "Parents" %}</h5>
        <div class="card-body">
            <ItemRelationList
                :items="parents"
                :items_headers="children_headers"
                :hidden_fields="['child__name', 'child__custom_identifier']"
                :items_relations="{'child': [object], 'parent': all_items}"
                group_by="type__name"
                @deleteItem="deleteRelation"
                @createItem="createRelation"
                @editItem="editRelation"
            ></ItemRelationList>
        </div>
    </div>
</div>