<script type="text/ng-template" id="gridTemplate">
  <table id="attributesGrid"
         class="table table-striped"
         hawtio-simple-table="gridOptions">
  </table>
</script>

<div ng-controller="Jmx.AttributesController">
  <div ng-include src="toolBarTemplate()"></div>

  <div class="attributes-wrapper gridStyle">
    <div compile="attributes"></div>
  </div>

  <!-- modal dialog to show/edit the attribute -->
  <div hawtio-confirm-dialog="showAttributeDialog"
       ok-button-text="Update" show-ok-button="{{entity.rw ? 'true' : 'false'}}" on-ok="onUpdateAttribute()" on-cancel="onCancelAttribute()"
       cancel-button-text="Close"
       title="Attribute: {{entity.key}}">
    <div class="dialog-body">

      <!-- have a form for view and another for edit -->
      <div simple-form ng-hide="!entity.rw" name="attributeEditor" mode="edit" entity='entity' data='attributeSchemaEdit'></div>
      <button ng-hide="!entity.rw" class="pull-right btn" zero-clipboard data-clipboard-text="{{entity.attrValueEdit}}" title="Copy value to clipboard">
        <i class="icon-copy"></i>
      </button>

      <div simple-form ng-hide="entity.rw" name="attributeViewer" mode="view" entity='entity' data='attributeSchemaView'></div>
      <button ng-hide="entity.rw" class="pull-right btn" zero-clipboard data-clipboard-text="{{entity.attrValueView}}" title="Copy value to clipboard">
        <i class="icon-copy"></i>
      </button>
    </div>
  </div>

</div>
