<div ng-controller="Kubernetes.SecretController">
  <div class="row">
    <div hawtio-breadcrumbs></div>
  </div>

  <div class="row">
    <div hawtio-tabs></div>
  </div>

  <div class="row filter-header">
    <div class="col-md-12">
      <button class="btn btn-default pull-right"
              title="Cancel changes to this secret"
              ng-click="cancel()">
        Cancel
      </button>
      <span class="pull-right">&nbsp;</span>
      <button class="btn btn-primary pull-right"
              title="Saves changes to this secret"
              ng-disabled="!entity.name || !changed"
              ng-click="save()">
        Save Changes
      </button>
    </div>
  </div>

  <div ng-hide="fetched">
    <div class="row">
      <div class="col-md-12">
        <div class="align-center">
          <i class="fa fa-spinner fa-spin"></i>
        </div>
      </div>
    </div>
  </div>

  <div ng-show="fetched">
    <div class="row">
      <div class="col-md-12">
        <form name="secretForm" class="form-horizontal">
          <div class="form-group" ng-hide="id"  ng-class="{'has-error': secretForm.$error.validator}">
            <label class="col-sm-2 control-label" for="secretName">
              Name
              <a tabindex="0" role="button" data-toggle="popover" data-trigger="focus" data-html="true" title=""
                 data-content="name of the secret" data-placement="top" data-original-title="">
                <span class="fa fa-info-circle"></span>
              </a>
            </label>

            <div class="col-sm-10">
              <input type="text" id="secretName" name="secretName" ng-model="entity.name" ng-change="entityChanged()" class="form-control"
                     ui-validate="'checkNameUnique($value)'"
                     required="required">
              <span class="help-block" ng-show="secretForm.secretName.$error.validator">
                There is already a secret with that name!
              </span>
            </div>
          </div>

          <div class="form-group" ng-repeat="property in entity.properties track by $index">
            <label class="col-sm-2 control-label" for="{{property.key}}">
              {{property.label}}
              <a tabindex="0" role="button" data-toggle="popover" data-trigger="focus" data-html="true" title=""
                 data-content="{{property.description}}" data-placement="top" data-original-title="">
                <span class="fa fa-info-circle"></span>
              </a>
            </label>

            <div class="col-sm-9" ng-switch="property.type">
              <textarea ng-switch-when="textarea" class="form-control" rows="{{property.rows}}" id="{{property.key}}" ng-change="entityChanged()"
                        ng-model="entity.properties[property.key].value"></textarea>
              <input ng-switch-default="" type="{{property.type}}" class="form-control" id="{{property.key}}" ng-change="entityChanged()"
                        ng-model="entity.properties[property.key].value">
            </div>

            <div class="col-sm-1">
              <button class="btn btn-danger pull-right" ng-click="deleteProperty(property.key)"
                      title="Remove this property from the secret">
                <i class="fa fa-remove"></i>
              </button>
            </div>
          </div>
        </form>


        <div class="form-group" ng-show="entity.name">
          <div class="col-sm-12">
            <div class="text-center">
              <button class="btn btn-default btn-padding" ng-click="addFields(httpsKeys)" ng-hide="hasAllKeys(httpsKeys)"
                      title="Adds fields to store HTTPS user and password fields">
                <i class="fa fa-plus"></i> HTTPS User &amp; Password Fields
              </button>
              <button class="btn btn-default btn-padding" ng-click="addFields(sshKeys)" ng-hide="hasAllKeys(sshKeys)"
                      title="Adds the fields to store SSH private and public keys">
                <i class="fa fa-plus"></i> SSH Key Fields
              </button>
              <button class="btn btn-default btn-padding" ng-click="addFieldDialog.dialog.open()"
                      title="Adds a new data field to store new data in this secret">
                <i class="fa fa-plus"></i> Custom Field
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div modal="addFieldDialog.dialog.show">
    <form name="addDataFieldForm" class="" ng-submit="addFieldDialog.onOk()">
      <div class="modal-header"><h4>Add New Data Field</h4></div>
      <div class="modal-body">

        <div class="form-group" ng-class="{'has-error': addDataFieldForm.$invalid}">
          <label class="col-sm-2 control-label" for="newDataName">
            Name
            <a tabindex="0" role="button" data-toggle="popover" data-trigger="focus" data-html="true" title=""
               data-content="name of the new field to add to the secret" data-placement="top" data-original-title="">
              <span class="fa fa-info-circle"></span>
            </a>
          </label>

          <div class="col-sm-10">
            <input type="text" id="newDataName" name="newDataName" ng-model="entity.newDataKey" class="form-control"
                   ui-validate="'checkFieldUnique($value)'"
                   typeahead="title for title in propertyKeys() | filter:$viewValue"
                   typeahead-editable="true"
                   autocomplete="off"
                   title="name of the new field to add to the secret"
                   placeholder="new data field name">

            <span class="help-block" ng-show="addDataFieldForm.newDataName.$error.validator">
              That field name is already in use!
            </span>
          </div>
        </div>

        <hr/>

        <div class="form-group">
          <div class="col-sm-12">
              <span class="help-block">
                Enter the name of the new data field to add to the secret
              </span>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <input class="btn btn-primary" type="submit"
               ng-disabled="!entity.newDataKey"
               value="Add">

        <button class="btn btn-warning cancel" type="button" ng-click="addFieldDialog.close()">Cancel</button>
      </div>
    </form>
  </div>

</div>