{% load i18n %}

<div>
    <div class="card mt-4 pt-2 ps-lg-2">
        <h5 class="card-header">{% trans "Relation" %} [[ 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">
                        <v-col cols="4">
                            <v-subheader>[[ field.text ]]</v-subheader>
                        </v-col>
                        <template v-if="field.value == 'parent' || field.value == 'child'">
                            <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="showItem(object[field.value])">
                                    <v-icon small class="mr-2">mdi-eye</v-icon>
                                    {% trans "Link" %}
                                </v-btn>
                            </v-col>
                        </template>

                        <template v-else>
                            <v-col cols="8">
                                <v-text-field :value="object[field.value]" readonly dense></v-text-field>
                            </v-col>
                        </template>
                    </v-row>
                </template>
            </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">
            <RelationPropertyList
                :items="relation_properties"
                :items_headers="relation_properties_headers"
                :items_relations="{'property': all_properties}"
                :hidden_fields="['name', 'description', 'custom_identifier', 'relation__name']"
                :non_editable_fields="['relation']"
                show_item="property"
                show_url="PropertyDetail"
                @deleteItem="deleteRelationProperty"
                @createItem="createRelationProperty"
                @editItem="editRelationProperty"
            ></RelationPropertyList>
        </div>
    </div>
</div>