Notes/src/views/dialogs/attributes.ejs

<div id="attributes-dialog" class="tdialog" title="Note attributes">
    <form data-bind="submit: save">
        <div style="display: flex; justify-content: space-between;">
            <button class="btn btn-large" style="width: 200px;" id="save-attributes-button" type="submit">Save changes <kbd>enter</kbd></button>

            <button class="btn btn-sm" type="button" data-help-page="Attributes">
                <i class="glyphicon glyphicon-info-sign"></i> Help
            </button>
        </div>

        <div style="height: 97%; overflow: auto">
            <table id="owned-attributes-table" class="table">
                <thead>
                <tr>
                    <th></th>
                    <th>Type</th>
                    <th>Name</th>
                    <th>Value</th>
                    <th>Inheritable</th>
                </tr>
                </thead>
                <tbody data-bind="foreach: ownedAttributes">
                <tr data-bind="if: !isDeleted">
                    <td class="handle">
                        <span class="glyphicon glyphicon-resize-vertical"></span>
                        <input type="hidden" name="position" data-bind="value: position"/>
                    </td>
                    <td>
                        <select class="form-control attribute-type-select" style="width: auto;" data-bind="options: $parent.availableTypes, optionsText: 'text', optionsValue: 'value', value: type, event: { change: $parent.typeChanged }"></select>
                    </td>
                    <td>
                        <!-- Change to valueUpdate: blur is necessary because jQuery UI autocomplete hijacks change event -->
                        <input type="text" class="attribute-name form-control" data-bind="value: name, valueUpdate: 'blur',  event: { blur: $parent.attributeChanged }"/>
                        <div style="color: red" data-bind="if: $parent.isEmptyName($index())">Attribute name can't be empty.</div>
                    </td>
                    <td>
                        <input type="text" class="label-value form-control" data-bind="visible: type == 'label', value: labelValue, valueUpdate: 'blur', event: { blur: $parent.attributeChanged }" style="width: 300px"/>

                        <div class="relation-value input-group" data-bind="visible: type == 'relation'" style="width: 300px;">
                            <input class="form-control relation-target-note-id"
                                   placeholder="search for note by its name"
                                   data-bind="noteAutocomplete, value: relationValue, valueUpdate: 'blur', event: { blur: $parent.attributeChanged }">
                        </div>

                        <div data-bind="visible: type == 'label-definition'">
                            <select data-bind="options: $parent.availableLabelTypes, optionsText: 'text', optionsValue: 'value', value: labelDefinition.labelType"></select>

                            <select data-bind="options: $parent.multiplicityTypes, optionsText: 'text', optionsValue: 'value', value: labelDefinition.multiplicityType"></select>

                            <label>
                                <input type="checkbox" value="true" data-bind="checked: labelDefinition.isPromoted" />
                                Promoted
                            </label>
                        </div>

                        <div data-bind="visible: type == 'relation-definition'">
                            <select data-bind="options: $parent.multiplicityTypes, optionsText: 'text', optionsValue: 'value', value: relationDefinition.multiplicityType"></select>

                            <label>
                                <input type="checkbox" value="true" data-bind="checked: relationDefinition.isPromoted" />
                                Promoted
                            </label>
                        </div>
                    </td>
                    <td title="Inheritable relations are automatically inherited to the child notes">
                        <input type="checkbox" value="1" data-bind="checked: isInheritable" />

                        <span title="Delete" style="padding: 13px; cursor: pointer;" class="glyphicon glyphicon-trash" data-bind="click: $parent.deleteAttribute"></span>
                    </td>
                </tr>
                </tbody>
            </table>

            <div data-bind="if: inheritedAttributes().length > 0">
                <h4>Inherited attributes</h4>

                <table class="table">
                    <thead>
                    <tr>
                        <th>Type</th>
                        <th>Name</th>
                        <th>Value</th>
                        <th>Owning note</th>
                    </tr>
                    </thead>
                    <tbody data-bind="foreach: inheritedAttributes">
                    <tr>
                        <td data-bind="text: type"></td>
                        <td data-bind="text: name"></td>
                        <td>
                    <span data-bind="if: type == 'label'">
                      <span data-bind="text: value"></span>
                    </span>
                            <span data-bind="if: type == 'relation'">
                      <span data-bind="noteLink: value"></span>
                    </span>
                            <span data-bind="if: type == 'label-definition'">
                      <span data-bind="text: value.labelType"></span>
                      <span data-bind="text: value.multiplicityType"></span>
                      promoted: <span data-bind="text: value.isPromoted"></span>
                    </span>
                            <span data-bind="if: type == 'relation-definition'">
                      <span data-bind="text: value.multiplicityType"></span>
                      promoted: <span data-bind="text: value.isPromoted"></span>
                    </span>
                        <td data-bind="noteLink: noteId"></td>
                    </tr>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </form>
</div>