<!--Copyright 2015 Cisco Systems, Inc. All rights reserved.-->

<!--Licensed under the Apache License, Version 2.0 (the "License"); you may-->
<!--not use this file except in compliance with the License. You may obtain-->
<!--a copy of the License at-->

<!--http://www.apache.org/licenses/LICENSE-2.0-->

<!--Unless required by applicable law or agreed to in writing, software-->
<!--distributed under the License is distributed on an "AS IS" BASIS, WITHOUT-->
<!--WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the-->
<!--License for the specific language governing permissions and limitations-->
<!--under the License.-->

<!--<img class="background" src="images/back.jpg">-->

<!--dialog-->
<div class="md-padding dialogdemoBasicUsage" id="popupContainer" ng-cloak=""></div>

<div class="row">
  <div style="float:right;padding:1px 30px" id="getButton">
    <input type="button" value="Default/Reset" class="btn btn-default btn-sm" ng-click="getDefaultConfig()"
           style="width:110px"/>
    <!--<button type="submit" class="btn btn-default btn-sm" ng-click="getRunConfig()">Get Current Config</button>-->
    <input type="button" value="Save" class="btn btn-primary btn-sm" ng-click="changeConfig()" style="width:80px"/>
  </div>
</div>
<br/>


<div class="row-fluid" id="stagingConfig2">
  <div id="dashboard_links" class="col-md-3">
    <ul class="nav nav-pills nav-stacked">
      <li class="{{dashstatus1}}" ng-click="setDashStatus(1)"><a href="" class="tab-link">GENERAL CONFIGURATION</a></li>
      <li class="{{dashstatus2}}" ng-click="setDashStatus(2)"><a href="" class="tab-link">SERVER SIDE CONFIG OPTIONS</a>
      </li>
      <li class="{{dashstatus3}}" ng-click="setDashStatus(3)"><a href="" class="tab-link">CLIENT SIDE CONFIG OPTIONS</a>
      </li>
    </ul>
  </div>
  <div id="dashboard_tabs" class="col-md-8">
    <!--Start Dashboard Tab 1-->
    <div id="dashboard-general" class="row" ng-show="dashstatus1vis">

      <h4 class="page-header" style="margin-top: 5px">GENERAL CONFIGURATION</h4>

      <form name="general">
        <div class="form-group">

          <md-content layout-padding>
            <md-input-container class="col-md-12">
              <label>VM Creation Concurrency</label>
              <input type="number" min="1" max="1000" step="1" name="vm_creation_concurrency"
                     id="vm_creation_concurrency" ng-model="config.vm_creation_concurrency"
                     ng-pattern="/^[1-9][0-9]{0,2}$/i" required style="text-align:left;"/>

              <div ng-messages="general.vm_creation_concurrency.$error" ng-if="general.vm_creation_concurrency.$dirty">
                <div ng-message="required" style="padding-right: 0;">This field is required</div>
                <div ng-message="pattern" style="padding-right: 0;">Must be a number between 1 and 999</div>
              </div>
            </md-input-container>
          </md-content>
          <!--<form class="bs-component" name="general">-->
          <!--<div class="input-group col-sm-12" style="margin:0 auto;"-->
          <!--popover="Specifies how many VMs will be created at a time. Larger numbers can be used but will not necessarily shorten the overall staging time (this will largely depend on the scalability of the OpenStack control plane). Well tuned control planes with multiple instances of NOVA have shown to support a concurrency level of up to around 50"-->
          <!--popover-trigger="mouseenter" popover-placement="bottom">-->
          <!--<span class="input-group-addon">VM Creation Concurrency</span>-->
          <!--<input type="number" min="1" max="1000" step="1" name="vm_creation_concurrency" class="form-control"-->
          <!--id="vm_creation_concurrency"-->
          <!--ng-model="config.vm_creation_concurrency" ng-pattern="/^[1-9][0-9]{0,2}$/i" required/>-->
          <!--</div>-->
          <!--<div ng-messages="general.vm_creation_concurrency.$error" ng-if="general.vm_creation_concurrency.$dirty">-->
          <!--<div ng-message="required">This field is required</div>-->
          <!--<div ng-message="pattern">Must be a number between 1 and 999</div>-->
          <!--</div>-->
          <!--<br/>-->

          <!--<div class="input-group col-sm-11"  style="margin:0 auto">-->
          <!--<span class="input-group-addon">Public Key File:</span>-->
          <!--<input type="text" class="form-control" id="public_key_file" ng-model="config.public_key_file"/>-->
          <!--</div>-->
          <!--<br/>-->
          <!--<div class="input-group col-sm-11"  style="margin:0 auto">-->
          <!--<input type="checkbox" id="server_use_floatingip" ng-model="config.server.use_floatingip" ng-change="config.client.use_floatingip=config.server.use_floatingip" /> use floating IP for client and server VMs-->
          <!--</div>-->

          <!--<hr>-->


          <div class="panel panel-default">
            <div class="panel-heading">VM Placement</div>
            <div class="panel-body">

              <md-radio-group ng-model="availability_zone" ng-change="changeTopology()">
                <md-radio-button value="1" class="md-primary">Let Nova Decide</md-radio-button>

                <!--<div class="radio">-->
                <!--<label>-->
                <!--<input type="radio" ng-model="availability_zone" value="1" ng-change="changeTopology()">-->
                <!--Let Nova Decide-->
                <!--</label>-->
                <!--</div>-->

                <md-radio-button value="2" class="md-primary">Available Zone</md-radio-button>

                <!--<div class="radio">-->
                <!--<label>-->
                <!--<input type="radio" ng-model="availability_zone" value="2" ng-change="changeTopology()">-->
                <!--Available Zone-->
                <!--</label>-->
                <!--</div>-->
                <div class="row" ng-show="availability_zone==2;"
                     popover="Leave empty if you prefer to have the Nova scheduler place the server VMs If you want to pick a particular AZ, put that AZ name (e.g. nova) If you want a paticular compute host, put the AZ and compute host names separated by ':' (e.g. nova:tme100) Note that this is ignored/overriden if you choose 'Use Topology'"
                     popover-trigger="mouseenter" popover-placement="bottom">
                  <form name="userForm">

                    <div class="col-md-6">
                      <div layout="" layout-sm="column">
                        <md-input-container flex="">
                          <label>For Server</label>
                          <md-select ng-model="config.server.availability_zone">
                            <md-option ng-repeat="serverside in serversides" value="{{serverside}}">
                              {{serverside}}
                            </md-option>
                          </md-select>
                        </md-input-container>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div layout="" layout-sm="column">
                        <md-input-container flex="">
                          <label>For Client</label>
                          <md-select ng-model="config.client.availability_zone">
                            <md-option ng-repeat="clientside in clientsides" value="{{clientside}}">
                              {{clientside}}
                            </md-option>
                          </md-select>
                        </md-input-container>
                      </div>
                    </div>
                  </form>

                  <!--<div class="col-md-6 col-sm-6">-->
                    <!--<div class="input-group" style="margin:0 auto">-->
                      <!--<span class="input-group-addon">For Server</span>-->
                      <!--<input type="text" class="form-control" ng-model="config.server.availability_zone"/>-->
                    <!--</div>-->
                  <!--</div>-->
                  <!--<div class="col-md-6 col-sm-6">-->
                    <!--<div class="input-group" style="margin:0 auto">-->
                      <!--<span class="input-group-addon">For Client</span>-->
                      <!--<input type="text" class="form-control" ng-model="config.client.availability_zone"/>-->
                    <!--</div>-->
                  <!--</div>-->
                </div>

                <md-radio-button value="3" class="md-primary">Use Topology
                  <small> -- customized <cite title="Source Title">VM
                    placement</cite></small>
                </md-radio-button>

                <!--<div class="radio" id="topology">-->
                <!--<label>-->
                <!--<input type="radio" ng-model="availability_zone" value="3" ng-change="changeTopology()">-->
                <!--Use Topology-->
                <!--<small> &#45;&#45; customized <cite title="Source Title">VM placement</cite></small>-->

                <!--</label>-->
                <!--</div>-->
                <div class="row" ng-show="availability_zone==3;">
                  <div class="col-md-3">
                    <div class="list-group" id="list3">
                <span class="list-group-item active">Server Pool
                 <input title="Toggle all" ng-click="toggleC()" ng-model="toggle" type="checkbox" class="pull-right">
                </span>

                <span ng-repeat="user in listC">
                  <span class="list-group-item">{{user.firstName}}
                    <input ng-click="selectC(user.id)" name="selectedC[]" value="{{user.id}}"
                           ng-checked="selectedC.indexOf(user.id) > -1" type="checkbox" class="pull-right">
                  </span>
                </span>
                    </div>
                  </div>


                  <div class="col-md-1 v-center text-center">
                    <div class="btn-group-sm">
                      <button title="Send to list 1" class="btn btn-default btn-sm" ng-click="cToA()"
                              style="margin:10px 0"><i
                        class="glyphicon glyphicon-chevron-right"></i></button>
                      <button title="Send to list 3" class="btn btn-default btn-sm" ng-click="aToC()"><i
                        class="glyphicon glyphicon-chevron-left"></i></button>
                    </div>
                  </div>


                  <div class="col-md-4">
                    <div class="list-group" id="list1">
                <span class="list-group-item active">Available Hypervisors
                 <input title="Toggle all" ng-click="toggleA()" ng-model="toggle" type="checkbox" class="pull-right">
                </span>

                <span ng-repeat="user in listA">
                  <span class="list-group-item">{{user.firstName}}
                    <input ng-click="selectA(user.id)" name="selectedA[]" value="{{user.id}}"
                           ng-checked="selectedA.indexOf(user.id) > -1" type="checkbox" class="pull-right">
                  </span>
                </span>
                    </div>
                  </div>
                  <div class="col-md-1 v-center text-center" style="margin:0px 0px">
                    <div class="btn-group-sm">
                      <button title="Send to list 1" class="btn btn-default btn-sm" ng-click="bToA()"
                              style="margin:10px 0"><i
                        class="glyphicon glyphicon-chevron-left"></i></button>
                      <button title="Send to list 2" class="btn btn-default btn-sm" ng-click="aToB()"><i
                        class="glyphicon glyphicon-chevron-right"></i></button>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="list-group" id="list2">
                <span class="list-group-item active">Client Pool
                  <input title="Toggle all" ng-click="toggleB()" ng-model="toggle" type="checkbox" class="pull-right">
                </span>
                <span ng-repeat="user in listB">
                  <span class="list-group-item">{{user.firstName}}
                    <input ng-click="selectB(user.id)" name="selectedB[]" value="{{user.id}}"
                           ng-checked="selectedB.indexOf(user.id) > -1" type="checkbox" class="pull-right">
                  </span>
                </span>
                    </div>
                  </div>
                  <div class="col-md-12" style="text-align: right">
                    <small><cite title="Source Title">Set hypervisors for both sides!</cite></small>
                  </div>
                </div>
              </md-radio-group>


            </div>
          </div>

          <!--<div class="text-center">-->
          <!--<h4 style="margin-top: 5px">VM PLACEMENT</h4>-->
          <!--</div>-->
        </div>

      </form>

    </div>
    <!--End Dashboard Tab 1-->
    <!--Start Dashboard Tab 2-->
    <div id="dashboard-server" class="row" ng-show="dashstatus2vis">
      <h4 class="page-header" style="margin-top: 5px">SERVER SIDE CONFIG OPTIONS</h4>

      <form name="server">
        <div class="form-group">

          <md-content layout-padding>
            <md-input-container class="col-md-12">
              <label>Html Payload Size (Bytes)</label>
              <input type="number" min="0" step="1024" name="http_server_configs" id="html_size"
                     ng-model="config.server.http_server_configs.html_size" ng-pattern="/^[0-9]*$/i"
                     required style="text-align:left;"/>

              <div ng-messages="server.http_server_configs.$error" ng-if="server.http_server_configs.$dirty">
                <div ng-message="required" style="padding-right: 0;">This field is required</div>
                <div ng-message="pattern" style="padding-right: 0;">Must be a number no less than 0</div>
              </div>
            </md-input-container>
          </md-content>
          <!--<div class="input-group col-sm-12" style="margin:0 auto" popover="The size of HTML page in Bytes"-->
          <!--popover-trigger="mouseenter" popover-placement="bottom">-->
          <!--<span class="input-group-addon">Html Payload Size</span>-->
          <!--<input type="number" min="0" step="1024" name="http_server_configs" class="form-control" id="html_size"-->
          <!--ng-model="config.server.http_server_configs.html_size" ng-pattern="/^[1-9][0-9]*$/i" required/>-->
          <!--</div>-->
          <!--<div ng-messages="server.http_server_configs.$error" ng-if="server.http_server_configs.$dirty">-->
          <!--<div ng-message="required">This field is required</div>-->
          <!--<div ng-message="pattern">Must be a number no less than 1</div>-->
          <!--</div>-->
          <!--<br/>-->
          <div class="panel panel-default">
            <div class="panel-heading">Flavor (per instance)</div>
            <div class="panel-body">
              <md-content layout-padding>
                <md-input-container class="col-md-6">
                  <label>vCPUs</label>
                  <input type="number" min="1" max="999" step="1" name="server_vcpus"
                         id="server_vcpus" ng-model="config.server.flavor.vcpus" ng-pattern="/^[1-9][0-9]{0,2}$/i"
                         required style="text-align:left;"/>

                  <div ng-messages="server.server_vcpus.$error" ng-if="server.server_vcpus.$dirty">
                    <div ng-message="required" style="padding-right: 0;">This field is required</div>
                    <div ng-message="pattern" style="padding-right: 0;">Must be a number between 1 and 999</div>
                  </div>
                </md-input-container>
                <md-input-container class="col-md-6">
                  <label>RAM (MB)</label>
                  <input type="number" min="0" max="" step="128" name="server_ram" id="server_ram"
                         ng-model="config.server.flavor.ram" ng-pattern="/^[0-9]*$/i" required
                         style="text-align:left;"/>

                  <div ng-messages="server.server_ram.$error" ng-if="server.server_ram.$dirty">
                    <div ng-message="required" style="padding-right: 0;">This field is required</div>
                    <div ng-message="pattern" style="padding-right: 0;">Must be a number no less than </div>
                  </div>
                </md-input-container>
              </md-content>

              <div class="panel panel-default" style="margin: 0">
                <div class="panel-body">
                  <md-radio-group ng-model="choose_disk_size1">
                    <md-radio-button value="0" ng-click="config.server.flavor.disk=20" class="md-primary" style="margin:5px">Use default root disk size</md-radio-button>
                    <md-radio-button value="1" class="md-primary" style="margin:5px">Use specific root disk size</md-radio-button>
                  </md-radio-group>

                  <md-content layout-padding ng-if="choose_disk_size1==1" ng-init="config.server.flavor.disk==0?config.server.flavor.disk=20:''">
                    <md-input-container class="col-md-6">
                      <label>Root Disk Size (GB)</label>
                      <input type="number" min="1" max="" step="" name="server_disk" id="server_disk"
                             ng-model="config.server.flavor.disk" ng-pattern="/^[1-9][0-9]*$/i" required
                             style="text-align:left;"/>

                      <div ng-messages="server.server_disk.$error" role="alert">
                        <div ng-message="required" style="padding-right: 0;">This field is required</div>
                        <div ng-message="pattern" style="padding-right: 0;">Must be a number no less than 1</div>
                      </div>
                    </md-input-container>
                  </md-content>
                </div>
              </div>
            </div>
          </div>
          <!--<div class="well bs-component">-->
          <!--<form class="form-horizontal">-->
          <!--<fieldset>-->
          <!--<legend>Flavor (per instance)</legend>-->
          <!--<div class="input-group col-sm-12" style="margin:0 auto" popover="Number of vCPUs for the flavor"-->
          <!--popover-trigger="mouseenter"-->
          <!--popover-placement="bottom">-->
          <!--<span class="input-group-addon">vCPUs</span>-->
          <!--<input type="number" min="1" max="999" step="1" name="server_vcpus" class="form-control"-->
          <!--id="server_vcpus" ng-model="config.server.flavor.vcpus" ng-pattern="/^[1-9][0-9]{0,2}$/i"-->
          <!--required/>-->
          <!--</div>-->
          <!--<div ng-messages="server.server_vcpus.$error" ng-if="server.server_vcpus.$dirty">-->
          <!--<div ng-message="required">This field is required</div>-->
          <!--<div ng-message="pattern">Must be a number between 1 and 999</div>-->
          <!--</div>-->
          <!--<br/>-->

          <!--<div class="input-group col-sm-12" style="margin:0 auto" popover="Memory for the flavor"-->
          <!--popover-trigger="mouseenter"-->
          <!--popover-placement="bottom">-->
          <!--<span class="input-group-addon">RAM (MB)</span>-->
          <!--<input type="number" min="0" max="" step="128" name="server_ram" class="form-control" id="server_ram"-->
          <!--ng-model="config.server.flavor.ram" ng-pattern="/^[1-9][0-9]*$/i" required/>-->
          <!--</div>-->
          <!--<div ng-messages="server.server_ram.$error" ng-if="server.server_ram.$dirty">-->
          <!--<div ng-message="required">This field is required</div>-->
          <!--<div ng-message="pattern">Must be a number no less than 1</div>-->
          <!--</div>-->
          <!--<br/>-->

          <!--<div class="input-group col-sm-12" style="margin:0 auto" popover="Size of local disk"-->
          <!--popover-trigger="mouseenter"-->
          <!--popover-placement="bottom">-->
          <!--<span class="input-group-addon">Disk (GB)</span>-->
          <!--<input type="number" min="0" max="" step="" name="server_disk" class="form-control" id="server_disk"-->
          <!--ng-model="config.server.flavor.disk" ng-pattern="/^[1-9][0-9]*$/i" required/>-->
          <!--</div>-->
          <!--<div ng-messages="server.server_disk.$error" ng-if="server.server_disk.$dirty">-->
          <!--<div ng-message="required">This field is required</div>-->
          <!--<div ng-message="pattern">Must be a number no less than 1</div>-->
          <!--</div>-->
          <!--</fieldset>-->
          <!--</form>-->
          <!--</div>-->
        </div>
      </form>


    </div>
    <!--End Dashboard Tab 2-->
    <!--Start Dashboard Tab 3-->
    <div id="dashboard-client" class="row" ng-show="dashstatus3vis">
      <h4 class="page-header" style="margin-top: 5px">CLIENT SIDE CONFIG OPTIONS</h4>

      <form name="client">
        <div class="form-group">
          <div class="panel panel-default">
            <div class="panel-heading">Flavor (per instance)</div>
            <div class="panel-body">
              <md-content layout-padding>
                <md-input-container class="col-md-6">
                  <label>vCPUs</label>
                  <input type="number" min="1" max="999" step="1" name="client_vcpus"
                         id="client_vcpus" ng-model="config.client.flavor.vcpus" ng-pattern="/^[1-9][0-9]{0,2}$/i"
                         required style="text-align:left;"/>

                  <div ng-messages="client.client_vcpus.$error" ng-if="client.client_vcpus.$dirty">
                    <div ng-message="required" style="padding-right: 0;">This field is required</div>
                    <div ng-message="pattern" style="padding-right: 0;">Must be a number between 1 and 999</div>
                  </div>
                </md-input-container>
                <md-input-container class="col-md-6">
                  <label>RAM (MB)</label>
                  <input type="number" min="0" max="" step="128" name="client_ram" id="client_ram"
                         ng-model="config.client.flavor.ram" ng-pattern="/^[0-9]*$/i" required
                         style="text-align:left;"/>

                  <div ng-messages="client.client_ram.$error" ng-if="client.client_ram.$dirty">
                    <div ng-message="required" style="padding-right: 0;">This field is required</div>
                    <div ng-message="pattern" style="padding-right: 0;">Must be a number no less than 0</div>
                  </div>
                </md-input-container>
              </md-content>

              <div class="panel panel-default" style="margin: 0">
                <div class="panel-body">
                  <md-radio-group ng-model="choose_disk_size2">
                    <md-radio-button value="0" ng-click="config.client.flavor.disk=20" class="md-primary" style="margin:5px">Use default root disk size</md-radio-button>
                    <md-radio-button value="1" class="md-primary" style="margin:5px">Use specific root disk size</md-radio-button>
                  </md-radio-group>

                  <md-content layout-padding ng-if="choose_disk_size2==1"  ng-init="config.client.flavor.disk==0?config.client.flavor.disk=20:''">
                    <md-input-container class="col-md-6">
                      <label>Root Disk Size (GB)</label>
                      <input type="number" min="1" max="" step="" name="client_disk" id="client_disk"
                             ng-model="config.client.flavor.disk" ng-pattern="/^[1-9][0-9]*$/i" required
                             style="text-align:left;"/>

                      <div ng-messages="client.client_disk.$error" role="alert">
                        <div ng-message="required" style="padding-right: 0;">This field is required</div>
                        <div ng-message="pattern" style="padding-right: 0;">Must be a number no less than 1</div>
                      </div>
                    </md-input-container>
                  </md-content>
                </div>
              </div>
            </div>
          </div>
          <!--<div class="well bs-component">-->
          <!--<form class="form-horizontal" >-->
          <!--<fieldset>-->
          <!--<legend>flavor</legend>-->
          <!--<div class="input-group col-sm-12" style="margin:0 auto" popover="Number of vCPUs for the flavor"-->
          <!--popover-trigger="mouseenter"-->
          <!--popover-placement="bottom">-->
          <!--<span class="input-group-addon">vCPUs</span>-->
          <!--<input type="number" min="0" max="1000" step="1" name="client_vcpus" class="form-control"-->
          <!--id="client_vcpus"-->
          <!--ng-model="config.client.flavor.vcpus" ng-pattern="/^[1-9][0-9]{0,2}$/i" required/>-->
          <!--</div>-->
          <!--<div ng-messages="client.client_vcpus.$error" ng-if="client.client_vcpus.$dirty">-->
          <!--<div ng-message="required">This field is required</div>-->
          <!--<div ng-message="pattern">Must be a number between 1 and 999</div>-->
          <!--</div>-->
          <!--<br/>-->

          <!--<div class="input-group col-sm-12" style="margin:0 auto" popover="Memory for the flavor"-->
          <!--popover-trigger="mouseenter"-->
          <!--popover-placement="bottom">-->
          <!--<span class="input-group-addon">RAM (MB)</span>-->
          <!--<input type="number" min="0" max="" step="128" name="client_ram" class="form-control" id="client_ram"-->
          <!--ng-model="config.client.flavor.ram" ng-pattern="/^[1-9][0-9]*$/i" required/>-->
          <!--</div>-->
          <!--<div ng-messages="client.client_ram.$error" ng-if="client.client_ram.$dirty">-->
          <!--<div ng-message="required">This field is required</div>-->
          <!--<div ng-message="pattern">Must be a number no less than 1</div>-->
          <!--</div>-->
          <!--<br/>-->

          <!--<div class="input-group col-sm-12" style="margin:0 auto" popover="Size of local disk"-->
          <!--popover-trigger="mouseenter"-->
          <!--popover-placement="bottom">-->
          <!--<span class="input-group-addon">Disk (GB)</span>-->
          <!--<input type="number" min="0" max="" step="" name="client_disk" class="form-control"-->
          <!--id="client_disk zone"-->
          <!--ng-model="config.client.flavor.disk" ng-pattern="/^[1-9][0-9]*$/i" required/>-->
          <!--</div>-->
          <!--<div ng-messages="client.client_disk.$error" ng-if="client.client_disk.$dirty">-->
          <!--<div ng-message="required">This field is required</div>-->
          <!--<div ng-message="pattern">Must be a number no less than 1</div>-->
          <!--</div>-->
          <!--</fieldset>-->
          <!--</form>-->
          <!--</div>-->
          <!--</div>-->
          <!--<div class="input-group col-sm-11"  style="margin:0 auto">-->
          <!--<span class="input-group-addon">Availability Zone:</span>-->
          <!--<input type="text" class="form-control" id="availability_zone" ng-model="config.client.availability_zone"/>-->
          <!--</div>-->
        </div>
      </form>
    </div>

    <!--End Dashboard Tab 3-->
  </div>
</div>

