<div ng-controller="JVM.DiscoveryController">

  <div class="row-fluid">

    <div class="span6 offset3">
      <input class="search-query span12" type="text" ng-model="filter" placeholder="Filter...">

      <script type="text/ng-template" id="authPrompt">
        <div class="auth-form">
          <form name="authForm">
            <input type="text"
                   class="input-small"
                   placeholder="Username..."
                   ng-model="agent.username"
                   required>
            <input type="password"
                   class="input-small"
                   placeholder="Password..."
                   ng-model="agent.password"
                   required>
            <button ng-disabled="!authForm.$valid"
                    ng-click="connectWithCredentials($event, agent)"
                    class="btn btn-success">
              <i class="icon-share"></i> Connect
            </button>
            <button class="btn" ng-click="closePopover($event)"><i class="icon-remove"></i></button>
          </form>
        </div>
      </script>

      <div ng-show="discovering">
        <p></p>
        <div class="alert alert-info">
          <i class="icon-spinner icon-spin"></i> Please wait, discovering agents...
        </div>
      </div>

      <div ng-hide="discovering">
        <div ng-hide="agents">
          <p></p>
          <div class="alert alert-warning">
            No agents discovered.
          </div>
        </div>
        <div ng-show="agents">
          <ul class="discovery zebra-list">
            <li ng-repeat="agent in agents track by $index" ng-show="filterMatches(agent)">

              <div class="inline-block">
                <img ng-src="{{getLogo(agent)}}">
              </div>

              <div class="inline-block">
                <p ng-hide="!hasName(agent)">
              <span class="strong"
                    ng-show="agent.server_vendor">
                {{agent.server_vendor}} {{agent.server_product.titleize()}} {{agent.server_version}}
              </span>
                </p>
            <span ng-class="getAgentIdClass(agent)">
              <strong ng-show="hasName(agent)">Agent ID: </strong>{{agent.agent_id}}<br/>
              <strong ng-show="hasName(agent)">Agent Version: </strong><span ng-hide="hasName(agent)"> Version: </span>{{agent.agent_version}}</span><br/>
              <strong ng-show="hasName(agent)">Agent Description: </strong><span ng-hide="hasName(agent)"> Description: </span>{{agent.agent_description}}</span><br/>
                <p ng-hide="!agent.url"><strong>Agent URL: </strong><a ng-href="{{agent.url}}" target="_blank">{{agent.url}}</a></p>
              </div>

              <div class="inline-block lock" ng-show="agent.secured">
                <i class="icon-lock" title="A valid username and password will be required to connect"></i>
              </div>

              <div class="inline-block">
                <div class="connect-button"
                     ng-click="gotoServer($event, agent)"
                     hawtio-template-popover
                     content="authPrompt"
                     trigger="manual"
                     placement="auto"
                     data-title="Please enter your username and password">
                  <i ng-show="agent.url" class="icon-play-circle" ></i>
                </div>
              </div>

            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
