<div ng-controller="ActiveMQ.DurableSubscriberController">

    <div class="row-fluid">
      <div class="span12">
        <div class="pull-right">
            <form class="form-inline">
                <button class="btn" ng-click="createSubscriberDialog.open()"
                        title="Create durable subscriber">
                    <i class="icon-plus"></i> Create
                </button>
                <button class="btn" ng-click="refresh()"
                        title="Refreshes the list of subscribers">
                    <i class="icon-refresh"></i>
                </button>
            </form>
        </div>
      </div>
    </div>

    <div class="row-fluid">
      <div class="gridStyle" ng-grid="gridOptions"></div>
    </div>

    <div modal="createSubscriberDialog.show">
      <form name="createSubscriber" class="form-horizontal no-bottom-margin" ng-submit="doCreateSubscriber(clientId, subscriberName, topicName, subSelector)">
        <div class="modal-header"><h4>Create Durable Subscriber</h4></div>
        <div class="modal-body">
          <label>Client Id: </label>
          <input name="clientId" class="input-xlarge" type="text" ng-model="clientId" required>
          <label>Subscriber Name: </label>
          <input name="subscriberName" class="input-xlarge" type="text" ng-model="subscriberName" required>
          <label>Topic Name: </label>
          <input name="topicName" class="input-xlarge" type="text" ng-model="topicName" required typeahead="title for title in topicNames($viewValue) | filter:$viewValue" typeahead-editable='true'>
          <label>Selector: </label>
          <input name="subSelector" class="input-xlarge" type="text" ng-model="subSelector">
        </div>
        <div class="modal-footer">
          <input class="btn btn-success" type="submit" value="Create">
          <input class="btn btn-primary" ng-click="createSubscriberDialog.close()" value="Cancel">
        </div>
      </form>
    </div>

    <div hawtio-slideout="showSubscriberDialog.show" title="Details">
      <div class="dialog-body">

        <div class="row-fluid">
          <div class="pull-right">
            <form class="form-inline">

              <button class="btn btn-danger" ng-disabled="showSubscriberDialog.subscriber.Status == 'Active'"
                      ng-click="deleteSubscriberDialog.open()"
                      title="Delete subscriber">
                <i class="icon-remove"></i> Delete
              </button>

              <button class="btn" ng-click="showSubscriberDialog.close()" title="Close this dialog">
                <i class="icon-remove"></i> Close
              </button>

            </form>
          </div>
        </div>

          <div class="row-fluid">
              <div class="expandable-body well">
                <table class="table table-condensed table-striped">
                  <thead>
                  <tr>
                    <th>Property</th>
                    <th>Value</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr>
                    <td class="property-name">Client Id</td>
                    <td class="property-value">{{showSubscriberDialog.subscriber["ClientId"]}}</td>
                  </tr>
                  <tr>
                    <td class="property-name">Subscription Name</td>
                    <td class="property-value">{{showSubscriberDialog.subscriber["SubscriptionName"]}}</td>
                  </tr>
                  <tr>
                    <td class="property-name">Topic Name</td>
                    <td class="property-value">{{showSubscriberDialog.subscriber["DestinationName"]}}</td>
                  </tr>
                  <tr>
                    <td class="property-name">Selector</td>
                    <td class="property-value">{{showSubscriberDialog.subscriber["Selector"]}}</td>
                  </tr>
                  <tr>
                    <td class="property-name">Status</td>
                    <td class="property-value">{{showSubscriberDialog.subscriber.Status}}</td>
                  </tr>
                  <tr>
                    <td class="property-name">Enqueue Counter</td>
                    <td class="property-value">{{showSubscriberDialog.subscriber["EnqueueCounter"]}}</td>
                  </tr>
                  <tr>
                    <td class="property-name">Dequeue Counter</td>
                    <td class="property-value">{{showSubscriberDialog.subscriber["DequeueCounter"]}}</td>
                  </tr>
                  <tr>
                    <td class="property-name">Dispatched Counter</td>
                    <td class="property-value">{{showSubscriberDialog.subscriber["DispatchedCounter"]}}</td>
                  </tr>
                  <tr>
                    <td class="property-name">Pending Size</td>
                    <td class="property-value">{{showSubscriberDialog.subscriber["PendingQueueSize"]}}</td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>

      </div>

    </div>

    <div hawtio-confirm-dialog="deleteSubscriberDialog.show" ok-button-text="Yes" cancel-button-text="No" on-ok="deleteSubscribers()">
      <div class="dialog-body">
        <p>Are you sure you want to delete the subscriber</p>
      </div>
    </div>

</div>