{% load i18n %}

<div>
    <template v-if="field_type == 'time'">
        <v-dialog ref="dialog" v-model="modal" :return-value.sync="item[field.value]" persistent width="290px">
            <template v-slot:activator="{ on, attrs }">
                <v-text-field
                    v-model="item[field.value]"
                    :label="field.text"
                    :rules="[rules.required]"
                    prepend-icon="mdi-clock-time-four-outline"
                    readonly
                    v-bind="attrs"
                    v-on="on"
                ></v-text-field>
            </template>
            <v-time-picker v-if="modal" v-model="item[field.value]" full-width format="24hr">
                <v-spacer></v-spacer>
                <v-btn text color="primary" @click="modal = false">
                    {% trans "Cancel" %}
                </v-btn>
                <v-btn text color="primary" @click="$refs.dialog.save(item[field.value])">
                    {% trans "OK" %}
                </v-btn>
            </v-time-picker>
        </v-dialog>
    </template>

    <template v-else-if="field_type == 'date'">
        <v-dialog ref="dialog" v-model="modal" :return-value.sync="item[field.value]" persistent width="290px">
            <template v-slot:activator="{ on, attrs }">
                <v-text-field
                    v-model="item[field.value]"
                    :label="field.text"
                    :rules="[rules.required]"
                    prepend-icon="mdi-calendar"
                    readonly
                    v-bind="attrs"
                    v-on="on"
                ></v-text-field>
            </template>
            <v-date-picker v-model="item[field.value]" scrollable>
                <v-spacer></v-spacer>
                <v-btn text color="primary" @click="modal = false">
                    {% trans "Cancel" %}
                </v-btn>
                <v-btn text color="primary" @click="$refs.dialog.save(item[field.value])">
                    {% trans "OK" %}
                </v-btn>
            </v-date-picker>
        </v-dialog>
    </template>

    <template v-else-if="field_type == 'date'">
        TODO both ...
    </template>

    <template v-else-if="field_type == 'uuid'">
        <v-text-field ref="test" v-model="item[field.value]" :label="field.text" :rules="[rules.required, rules.uuid]"></v-text-field>
    </template>

    <template v-else-if="field_type == 'ipv4'">
        <v-text-field v-model="item[field.value]" :label="field.text" is="v-text-field" :rules="[rules.required, rules.ipv4]"></v-text-field>
    </template>

    <template v-else>
        <component v-model="item[field.value]" :label="field.text" is="v-text-field" :rules="[rules.required]"></component>
    </template>

</div>
