<div>
  <h4 title="{{metaType.description}}">{{zkPid || metaType.name || pid}}
    <span ng-show="factoryInstanceName">: {{factoryInstanceName}}</span>
  </h4>

  <div ng-hide="editMode">
    <div class="row-fluid">
      <button class="btn" ng-click="setEditMode(true)" title="Edit this configuration" hawtio-show object-name="{{configAdminMBean}}" method-name="configAdminUpdate"><i class="icon-edit"></i> Edit</button>
      <button class="btn btn-danger pull-right" ng-click="deletePidDialog.open()" title="Delete this configuration" hawtio-show object-name="{{configAdminMBean}}" method-name="delete"><i class="icon-remove"></i> Delete</button>
    </div>
    <div class="row-fluid config-admin-form view">
      <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 ng-show="newPid" class="btn btn-primary" ng-disabled="!canSave || !createForm.pidInstanceName" ng-click="pidSave()"><i class="icon-save"></i> Create</button>
      <button ng-hide="newPid" 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 config-admin-form edit">
      <div ng-show="newPid" class="new-config-name-form">
        <form class="form-horizontal" action="">
          <fieldset>
            <div class="control-group">
              <label class="control-label" title="The name of the configuration file">Configuration name: </label>
              <div class="controls">
                <input type="text" class="span12"
                       title="The name of the configuration file"
                       ng-required="true"
                       ng-model="createForm.pidInstanceName" name="path"
                       autofocus="autofocus">
              </div>
            </div>
          </fieldset>
        </form>
      </div>

      <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 configuration: {{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>
