MinecraftChat/public/templates/modals/servers.html

<div class="modal fade" id="serversModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" ng-controller="serversController">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Servers</h4>
        <p>Save your favorite servers to quickly connect to them.</p>
      </div>

      <form ng-submit="add()">
        <div class="modal-body">
          <h5>My Servers</h5>
          <table class="table table-bordered" ng-show="servers.length">
            <tr ng-repeat="server in servers track by $index">
              <td>{{server.name}}</td>
              <td>{{server.version}}</td>
              <td>{{server.ip}}:{{server.port}}</td>
              <td><span class="label label-danger" ng-click="delete($index)" style="cursor:pointer">Delete</span></td>
            </tr>
          </table>

          <p ng-hide="servers.length">You haven't saved any servers!</p>

          <hr>
          <h5>Add Server</h5>
            <div class="form-group">
              <label>Server Name</label>
              <input type="text" class="form-control" ng-model="name" placeholder="Minecraft Server" required>
            </div>
            <div class="row">
              <div class="col-sm-8">
                <label>Server IP</label>
                <div class="input-group">
                  <div class="input-group-btn">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span>{{version}}</span><span class="caret"></span></button>
                    <ul class="dropdown-menu">
                      <li><a href="#" ng-click="selectversion('1.7.10')">1.7.10</a></li>
                      <li><a href="#" ng-click="selectversion('1.8.9')">1.8.9</a></li>
                      <li><a href="#" ng-click="selectversion('1.9.4')">1.9.4</a></li>
                      <li><a href="#" ng-click="selectversion('1.10.2')">1.10.2</a></li>
                      <li><a href="#" ng-click="selectversion('1.11.2')">1.11.2</a></li>
                      <li><a href="#" ng-click="selectversion('1.12.2')">1.12.2</a></li>
                      <li><a href="#" ng-click="selectversion('1.13.2')">1.13.2</a></li>
                      <li><a href="#" ng-click="selectversion('1.14.4')">1.14.4</a></li>
                      <li><a href="#" ng-click="selectversion('1.15.2')">1.15.2</a></li>
                      <li><a href="#" ng-click="selectversion('1.16.5')">1.16.5</a></li>
                    </ul>
                  </div>
                  <input type="text" class="form-control" ng-model="ip" placeholder="mc.server.com" required>
                </div>
              </div>
              <div class="col-sm-4">
                <div class="form-group">
                  <label>Server Port (Leave empty if unknown)</label>
                  <input type="number" class="form-control" ng-model="port" placeholder="25565">
                </div>
                <input type="text" class="form-control" style="display: none;" ng-model="version">
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <input type="submit" class="btn btn-success pull-right" value="Add">
              </div>
            </div>
          </div>
        <div class="modal-footer">
          <span class="btn btn-default" data-dismiss="modal">Close</span>
        </div>
      </form>
    </div>
  </div>
</div>