Notes/src/views/dialogs/attributes.ejs

<div id="attributes-dialog" class="modal fade mx-auto" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" style="max-width: 1000px" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Note attributes</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form data-bind="submit: save">
          <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>
                  <td data-bind="noteLink: noteId"></td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer" style="display: flex; justify-content: space-between;">
        <button class="btn btn-primary 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>
  </div>
</div>