<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="web.PropertyDefinition">
        <div class="o_field_property_definition o_field_widget o_form_view d-block" t-ref="propertyDefinition">
            <div t-if="env.isSmall" class="d-flex justify-content-between px-3 border-bottom">
                <button class="btn oi oi-arrow-left my-2" t-on-click="() => this.props.close()"/>
                <button
                    t-if="!props.readonly and props.canChangeDefinition"
                    class="btn pe-0 text-danger float-end o_field_property_definition_delete"
                    title="Remove Property"
                    t-on-click="props.onDelete">
                    <i class="fa fa-trash"/> Delete
                </button>
            </div>
            <div class="o_modal_container p-3 o_inner_group grid">
                <div class="d-contents mb-3 mb-sm-0">
                    <label class="o_form_label align-self-center text-900">Label</label>
                    <h6 t-if="props.readonly" t-out="state.propertyDefinition.string"
                        class="text-truncate"/>
                    <input
                        class="o_input o_field_property_definition_header"
                        type="text"
                        required=""
                        placeholder="Property Name"
                        autocomplete="off"
                        t-model="state.propertyDefinition.string"
                        t-on-change="onPropertyLabelChange"
                        t-on-keypress="onPropertyLabelKeypress"
                    />
                </div>
                <div class="d-contents mb-3 mb-sm-0">
                    <label t-att-for="getUniqueDomID('type')"
                        class="o_form_label align-self-center text-900">
                        Field Type
                    </label>
                    <div class="o_field_property_definition_type">
                        <div
                            t-if="props.readonly"
                            class="d-flex align-items-center mb-2">
                            <img class="me-3"
                                t-attf-src="/web/static/src/views/fields/properties/icons/{{state.propertyDefinition.type}}.png"/>
                            <span t-out="state.typeLabel"/>
                        </div>
                        <t t-else="">
                            <div class="d-flex align-items-center">
                                <img class="o_avatar me-1" t-attf-src="/web/static/src/views/fields/properties/icons/{{this.state.propertyDefinition.type}}.png" style="--Avatar-size: 20px;"/>
                                <SelectMenu autoSort="false" choices="this.availablePropertyTypes" id="this.getUniqueDomID('type')" menuClass="'o_field_property_definition_type_menu'" onSelect.bind="this.onPropertyTypeChange" required="true" togglerClass="'ps-1'" value="this.state.propertyDefinition.type">
                                    <t t-set-slot="choice" t-slot-scope="choiceScope">
                                        <div class="d-flex align-items-center" t-att-data-tooltip="choiceScope.data.tooltip">
                                            <img class="o_avatar me-2" t-attf-src="/web/static/src/views/fields/properties/icons/{{choiceScope.data.value}}.png" style="--Avatar-size: 20px;"/>
                                            <span t-out="choiceScope.data.label"/>
                                        </div>
                                    </t>
                                </SelectMenu>
                            </div>
                        </t>
                    </div>
                </div>
                <!-- Add / remove selection labels -->
                <div t-if="state.propertyDefinition.type === 'selection'" class="d-contents mb-3 mb-sm-0">
                    <label class="o_form_label text-900">Values</label>
                    <PropertyDefinitionSelection
                        readonly="props.readonly || !props.canChangeDefinition"
                        canChangeDefinition="props.canChangeDefinition"
                        default="state.propertyDefinition.default || ''"
                        options="state.propertyDefinition.selection || []"
                        onOptionsChange.bind="onSelectionOptionChange"
                        onDefaultOptionChange.bind="onDefaultChange"
                    />
                </div>
                <div t-if="state.propertyDefinition.type === 'tags'" class="d-contents mb-3 mb-sm-0">
                    <label t-att-for="getUniqueDomID('tags')" class="o_form_label text-900">Tags</label>
                    <PropertyTags
                        id="getUniqueDomID('tags')"
                        selectedTags="propertyTagValues"
                        tags="state.propertyDefinition.tags || []"
                        readonly="props.readonly"
                        canChangeTags="props.canChangeDefinition"
                        deleteAction="'tags'"
                        onTagsChange.bind="onTagsChange"/>
                </div>
                <div t-if="state.propertyDefinition.type === 'many2one' || state.propertyDefinition.type === 'many2many'" class="o_field_property_definition_model d-contents mb-3 mb-sm-0">
                    <label t-att-for="getUniqueDomID('model')" class="o_form_label align-self-center text-900">Model</label>
                    <span t-if="props.readonly">
                        <t t-if="state.resModelDescription" t-out="state.resModelDescription"/>
                    </span>
                    <ModelSelector
                        t-else=""
                        id="getUniqueDomID('model')"
                        value="state.resModelDescription"
                        onModelSelected.bind="onModelChange"
                    />
                </div>
                <div t-if="(state.propertyDefinition.type === 'many2one' || state.propertyDefinition.type === 'many2many')
                    and state.propertyDefinition.comodel and state.propertyDefinition.comodel.length" class="o_field_property_definition_domain d-contents mb-3 mb-sm-0">
                    <label class="o_form_label text-900">Domain</label>
                    <div>
                        <DomainSelector
                            resModel="state.propertyDefinition.comodel"
                            domain="state.propertyDefinition.domain || '[]'"
                            readonly="props.readonly"
                            update.bind="onDomainChange"
                            isDebugMode="!!env.debug"
                            className="'d-inline-block me-2'"
                        />
                        <div t-if="state.matchingRecordsCount !== undefined" class="d-inline-block">
                            <i class="oi oi-arrow-right" role="img" title="Domain"/>
                            <button class="btn btn-sm btn-secondary" type="button"
                                t-on-click.stop="onButtonDomainClick">
                                <t t-out="state.matchingRecordsCount"/> record(s)
                            </button>
                        </div>
                    </div>
                </div>
                <div t-if="state.propertyDefinition.type === 'monetary'" class="o_field_property_definition_currency_field d-contents mb-3 mb-sm-0">
                    <label t-att-for="getUniqueDomID('currency_field')" class="o_form_label text-900">Currency field</label>
                    <div>
                        <select class="o_input" t-att-value="this.state.propertyDefinition.currency_field" t-on-change="(ev) => this.onCurrencyFieldUpdate(ev.target.value)">
                            <t t-foreach="this.currencyFields" t-as="currencyField" t-key="currencyField.name">
                                <option t-att-value="currencyField.name" t-out="currencyField.string"/>
                            </t>
                        </select>
                    </div>
                </div>
                <div t-if="!['tags', 'selection', 'separator', 'signature'].includes(state.propertyDefinition.type)
                    and (!['many2one', 'many2many'].includes(state.propertyDefinition.type)
                    || (state.propertyDefinition.comodel and state.propertyDefinition.comodel.length))"
                    class="o_field_property_definition_value d-contents mb-3 mb-sm-0">
                    <label t-att-for="getUniqueDomID('default')" class="o_form_label align-self-center text-900">
                        <t t-if="state.propertyDefinition.type === 'boolean'">Default State</t>
                        <t t-else="">Default Value</t>
                    </label>
                    <PropertyValue
                        id="getUniqueDomID('default')"
                        readonly="props.readonly"
                        canChangeDefinition="props.canChangeDefinition"
                        type="state.propertyDefinition.type"
                        string="state.propertyDefinition.string"
                        value="state.propertyDefinition.default"
                        comodel="state.propertyDefinition.comodel || ''"
                        currencyField="state.propertyDefinition.currency_field || ''"
                        domain="state.propertyDefinition.domain || '[]'"
                        context="props.context"
                        onChange.bind="onDefaultChange"
                        record="props.record"
                    />
                </div>
                <t t-if="!['separator', 'signature'].includes(state.propertyDefinition.type)">
                    <div class="o_field_property_definition_suffix d-contents mb-3 mb-sm-0">
                        <label class="o_form_label align-self-center text-900">Suffix</label>
                        <input
                            class="o_input"
                            type="text"
                            placeholder=""
                            autocomplete="off"
                            t-model="state.propertyDefinition.suffix"
                            t-on-change="onSuffixChange"
                        />
                    </div>
                </t>
                <div t-if="!['separator', 'signature'].includes(state.propertyDefinition.type)"
                    class="o_field_property_definition_kanban d-contents mb-3 mb-sm-0">
                    <label t-att-for="getUniqueDomID('kanban')" class="o_form_label align-self-center text-900">
                        Display in Cards
                        <sup class="text-info" title="Whether or not this Property Field is displayed in the Calendar, Cards &amp; Kanban views">?</sup>
                    </label>
                    <CheckBox
                        id="getUniqueDomID('kanban')"
                        value="props.propertyDefinition.view_in_cards"
                        disabled="props.readonly"
                        onChange.bind="onViewInKanbanChange"
                    />
                </div>
                <div t-elif="state.propertyDefinition.type === 'separator'" class="o_field_property_definition_kanban d-contents mb-3 mb-sm-0">
                    <t t-set="separatorId" t-value="getUniqueDomID('separator')"/>
                    <label t-att-for="separatorId" class="o_form_label align-self-center text-900">
                        Default State
                    </label>
                    <div class="o_field_property_definition_fold text-nowrap d-inline-flex w-100 align-items-baseline">
                        <label class="form-check o_radio_item p-0">
                            <input type="radio" class="form-check-input o_radio_input" t-att-checked="!state.propertyDefinition.fold_by_default" t-attf-name="{{separatorId}}_separator" t-attf-id="{{separatorId}}_open" t-on-change="() => this.onFoldByDefaultChange(false)"/>
                            <label class="form-check-label o_form_label ms-1" t-attf-for="{{separatorId}}_open">Open</label>
                        </label>
                        <label class="form-check o_radio_item">
                            <input type="radio" class="form-check-input o_radio_input" t-att-checked="!!state.propertyDefinition.fold_by_default" t-attf-name="{{separatorId}}_separator" t-attf-id="{{separatorId}}_fold" t-on-change="() => this.onFoldByDefaultChange(true)"/>
                            <label class="form-check-label o_form_label ms-1" t-attf-for="{{separatorId}}_fold">Fold</label>
                        </label>
                    </div>
                </div>
            </div>
            <div class="d-flex px-3 pb-1 mt-auto" t-if="!env.isSmall">
                <button
                    t-if="!props.readonly and props.canChangeDefinition"
                    class="ms-auto btn btn-danger o_field_property_definition_delete"
                    title="Remove Property"
                    t-on-click="props.onDelete">
                    <i class="fa fa-trash"/> Delete
                </button>
            </div>
        </div>
    </t>
</templates>
