<kbn-management-app section="kibana" class="kuiView">
  <kbn-management-objects-view class="kuiViewContent kuiViewContent--constrainedWidth">
    <!-- Header -->
    <div class="kuiViewContentItem kuiBar kuiVerticalRhythm">
      <div class="kuiBarSection">
        <h1 class="kuiTitle">
          Edit {{ title }}
        </h1>
      </div>

      <div class="kuiBarSection">
        <a
          class="kuiButton kuiButton--basic kuiButton--iconText"
          href="{{ link }}"
        >
          <span class="kuiButton__icon kuiIcon fa-eye"></span>
          View {{ title }}
        </a>

        <button
          class="kuiButton kuiButton--danger kuiButton--iconText"
          confirm-click="delete()"
        >
          <span class="kuiButton__icon kuiIcon fa-trash-o"></span>
          Delete {{ title }}
        </button>
      </div>
    </div>

    <!-- Errors -->
    <div class="bs-callout bs-callout-danger" ng-if="notFound">
      <h4>There is a problem with this saved object</h4>

      <p ng-if="notFound === 'search'">
        The saved search associated with this object no longer exists.
      </p>

      <p ng-if="notFound === 'index-pattern'">
        The index pattern associated with this object no longer exists.
      </p>

      <p ng-if="notFound === 'index-pattern-field'">
        A field associated with this object no longer exists in the index pattern.
      </p>

      <p>
        If you know what this error means, go ahead and fix it &mdash; otherwise click the delete button above.
      </p>
    </div>

    <!-- Intro -->
    <div class="kuiViewContentItem kuiVerticalRhythm">
      <div class="kuiInfoPanel kuiInfoPanel--warning">
        <p>
          <span class="kuiIcon kuiIcon--warning fa-bolt"></span>
          <strong>Proceed with caution!</strong>
        </p>

        <p>Modifying objects is for advanced users only. Object properties are not validated and invalid objects could cause errors, data loss, or worse. Unless someone with intimate knowledge of the code told you to be in here, you probably shouldn&rsquo;t be.</p>
      </div>
    </div>

    <div class="kuiViewContentItem kuiVerticalRhythm">
      <!-- Form -->
      <form
        role="form"
        name="objectForm"
        ng-submit="submit()"
      >
        <div class="kuiFormSection" ng-repeat="field in fields">
          <label for="{{ field.name }}" class="kuiFormLabel">
            {{ field.name }}
          </label>

          <input
            id="{{ field.name }}"
            ng-if="field.type === 'number'"
            class="kuiTextInput"
            type="number"
            ng-model="field.value"
          >

          <textarea
            id="{{ field.name }}"
            ng-if="field.type === 'text'"
            class="kuiTextArea"
            rows="1"
            msd-elastic=" "
            ng-model="field.value"
          ></textarea>

          <input
            ng-if="field.type === 'boolean'"
            class="kuiCheckBox"
            type="checkbox"
            ng-model="field.value"
            ng-checked="field.value"
          >

          <div
            ng-if="field.type === 'json' || field.type === 'array'"
            ui-ace="{ onLoad: aceLoaded, mode: 'json' }"
            id="{{field.name}}"
            ng-model="field.value"
            class="form-control"
          ></div>
        </div>
      </form>

      <!-- Actions -->
      <div class="kuiButtonGroup">
        <button
          class="kuiButton kuiButton--primary"
          aria-label="Save {{ title }} Object"
          ng-click="submit()"
          ng-disabled="objectForm.$invalid || aceInvalidEditors.length !==0"
        >
          Save {{ title }} Object
        </button>

        <button
          class="kuiButton kuiButton--basic"
          aria-label="Cancel"
          ng-click="cancel()"
        >
          Cancel
        </button>
      </div>
    </div>
  </kbn-management-objects-view>
</kbn-management-app>
