<div>
  <h4 title="{{metaType.description}}">{{zkPid || metaType.name || pid}}</h4>

  <div ng-hide="editMode">
    <div class="row-fluid">
      <button class="btn" ng-click="setEditMode(true)" title="Edit this configuration"><i class="icon-edit"></i> Edit</button>
      <button class="btn btn-danger pull-right" ng-click="deletePidDialog.open()" title="Delete this configuration"><i class="icon-remove"></i> Delete</button>
    </div>
    <div class="row-fluid">
      <div simple-form name="pidEditor" mode='view' entity='entity' data='schema' schema="fullSchema"></div>
    </div>
  </div>
  <div ng-show="editMode">
    <div class="row-fluid">
      <button class="btn btn-primary" ng-disabled="!canSave" ng-click="pidSave()"><i class="icon-save"></i> Save</button>
      <button class="btn btn-warning" ng-click="setEditMode(false)"><i class="icon-remove"></i> Cancel</button>
      <button class="btn pull-right" ng-click="addPropertyDialog.open()" title="Add a new property value to this configuration"><i class="icon-plus"></i> Property</button>
    </div>
    <div class="row-fluid">
      <div simple-form name="pidEditor" mode='edit' entity='entity' data='schema' schema="fullSchema" onSubmit="pidSave()"></div>
    </div>
  </div>

  <div modal="deletePropDialog.show" close="deletePropDialog.close()" options="deletePropDialog.options">
    <form name="deleteProperty" class="form-horizontal no-bottom-margin" ng-submit="deletePidPropConfirmed()">
      <div class="modal-header"><h4>Delete property '{{deleteKey}}'</h4></div>
      <div class="modal-body">
        <p>Are you sure?</p>
      </div>
      <div class="modal-footer">
        <input class="btn btn-success" type="submit" value="Delete">
        <input class="btn btn-primary" ng-click="deletePropDialog.close()" type="button" value="Cancel">
      </div>
    </form>
  </div>

  <div modal="deletePidDialog.show" close="deletePidDialog.close()" options="deletePidDialog.options">
    <form name="deletePid" class="form-horizontal no-bottom-margin" ng-submit="deletePidConfirmed()">
      <div class="modal-header"><h4>Delete this configuration object '{{pid}}'</h4></div>
      <div class="modal-body">
        <p>Are you sure?</p>
      </div>
      <div class="modal-footer">
        <input class="btn btn-success" type="submit" value="Delete">
        <input class="btn btn-primary" ng-click="deletePidDialog.close()" type="button" value="Cancel">
      </div>
    </form>
  </div>

  <div modal="addPropertyDialog.show" close="addPropertyDialog.close()" options="addPropertyDialog.options">
    <form name="addProperty" class="form-horizontal no-bottom-margin"
          ng-submit="addPropertyConfirmed(addPropKey, addPropValue)">
      <div class="modal-header"><h4>Add property</h4></div>
      <div class="modal-body">
        <div class="control-group">
          <label class="control-label" for="propKey">Key</label>

          <div class="controls">
            <input class="input-xlarge" type="text" id="propKey" placeholder="Key" ng-model="addPropKey"/>
            <span class="help-block"
                  ng-hide="addPropKey !== '' && addPropKey !== undefined">A key must be specified</span>
          </div>
        </div>
        <div class="control-group">
          <label class="control-label" for="propValue">Value</label>

          <div class="controls">
            <input class="input-xlarge" type="text" id="propValue" placeholder="Value" ng-model="addPropValue"/>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <input class="btn btn-success" ng-disabled="!(addPropKey !== '' && addPropKey !== undefined)" type="submit"
               value="Add">
        <input class="btn btn-primary" ng-click="addPropertyDialog.close()" type="button" value="Cancel">
      </div>
    </form>
  </div>
</div>
