<div class="panel panel-default" ng-controller="Deauth_Controller"><div class="panel-heading"><h4 class="panel-title pull-left">{{title}}</h4><span class="pull-right">{{version}}</span><div class="clearfix"></div></div></div>

<div class="row">
    <div class="col-md-4">
        <div class="panel panel-default" ng-controller="Deauth_ControlsController">
            <div class="panel-heading">
				          <h3 class="panel-title">
                    Controls
                    <span class="dropdown">
                        <ul class="dropdown-menu" aria-labelledby="poolDropdown">
                            <li ng-click="saveAutostartSettings()"><a>Save settings for start on boot</a></li>
                        </ul>
                        <button class="btn btn-xs btn-{{saveSettingsLabel}} dropdown-toggle" type="button" id="poolDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span class="caret"></span>
                        </button>
                    </span>
                  </h3>
            </div>
			<div class="panel-body">
				<table style="width:100%">
					<tr>
						<td style="padding-bottom: .5em;" class="text-muted">Dependencies</td>
            <td ng-hide="$root.status.installed" style="text-align:right;padding-bottom: .5em;"><button type="button" style="width: 90px;" class="btn btn-{{installLabel}} btn-xs" data-toggle="modal" data-target="#dependenciesInstallModal" ng-disabled="processing">{{install}}</button></td>
            <td ng-show="$root.status.installed" style="text-align:right;padding-bottom: .5em;"><button type="button" style="width: 90px;" class="btn btn-{{installLabel}} btn-xs" data-toggle="modal" data-target="#dependenciesRemoveModal" ng-disabled="processing">{{install}}</button></td>
					</tr>
					<tr class="form-inline" ng-show="$root.status.installed">
						<td style="padding-bottom: .5em;" class="text-muted">mdk3</td>
						<td style="text-align:right;padding-bottom: .5em;">
              <select class="form-control input-sm" ng-disabled="starting || status == 'Stop'" ng-model="selectedInterface">
                  <option ng-repeat="interface in interfaces">{{ interface }}</option>
              </select>
              <button type="button" style="width: 90px;" class="btn btn-{{statusLabel}} btn-xs" ng-disabled="starting" ng-click="togglemdk3()">{{status}}</button></td>
					</tr>
          <tr ng-show="$root.status.installed">
						<td style="padding-bottom: .5em;" class="text-muted">Start on boot</td>
						<td style="text-align:right;padding-bottom: .5em;">
							<div class="btn-group">
								<button ng-click="togglemdk3OnBoot()" class="btn btn-xs btn-{{bootLabelON}}">ON</button>
								<button ng-click="togglemdk3OnBoot()" class="btn btn-xs btn-{{bootLabelOFF}}">OFF</button>
							</div>
						</td>
					</tr>
				</table>
			</div>

      <div class="modal fade" id="dependenciesInstallModal" tabindex="-1" role="dialog" aria-labelledby="dependenciesModalLabel">
        <div class="modal-dialog" role="document">
          <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="dependenciesInstallModalLabel">Install dependencies</h4>
            </div>
            <div class="modal-body">
              All required dependencies have to be installed first. This may take a few minutes.<br /><br />
              Please wait, do not leave or refresh this page. Once the install is complete, this page will refresh automatically.
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-info" ng-click="handleDependencies('internal')" data-dismiss="modal">Internal</button>
              <button type="button" class="btn btn-info" ng-hide="device == 'tetra' || sdAvailable == false" ng-click="handleDependencies('sd')" data-dismiss="modal">SD Card</button>
            </div>
          </div>
        </div>
      </div>

      <div class="modal fade" id="dependenciesRemoveModal" tabindex="-1" role="dialog" aria-labelledby="dependenciesModalLabel">
        <div class="modal-dialog" role="document">
          <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="dependenciesRemoveModalLabel">Remove dependencies</h4>
            </div>
            <div class="modal-body">
              All required dependencies will be removed. This may take a few minutes.<br /><br />
              Please wait, do not leave or refresh this page. Once the remove is complete, this page will refresh automatically.
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
              <button type="button" class="btn btn-info" ng-click="handleDependencies()" data-dismiss="modal">Confirm</button>
            </div>
          </div>
        </div>
      </div>

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

<div class="panel panel-default" ng-show="$root.status.installed" ng-controller="Deauth_SettingsController">
    <div class="panel-heading pointer" data-toggle="collapse" data-target="#Settings">
        <h4 class="panel-title">Settings</h4>
    </div>
    <div id="Settings" class="panel-collapse collapse">
	    <div class="panel-body">

        <div class="form-group">
            <div class="btn-group pull-right">
              <button class="btn btn-{{saveSettingsLabel}} btn-sm" ng-disabled="saving" ng-click="setSettings()">{{saveSettings}}</button>
            </div>
            <div class="clearfix"></div>
        </div>

        <div class="form-group">
              <div class="input-group">
                  <span class="input-group-addon input-sm">Mode</span>
                  <select ng-model="settings.mode" class="form-control input-sm">
                    <option>normal</option>
                    <option>whitelist</option>
                    <option>blacklist</option>
                  </select>
              </div>
          </div>

        <div class="form-group">
              <div class="input-group">
                  <span class="input-group-addon input-sm">Speed</span>
                  <input type="text" class="form-control input-sm" ng-model="settings.speed" placeholder="Speed in packets per second">
              </div>
          </div>

          <div class="form-group">
              <div class="input-group">
                  <span class="input-group-addon input-sm">Channels</span>
                  <input type="text" class="form-control input-sm" ng-model="settings.channels" placeholder="Channels">
              </div>
          </div>

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

<div class="panel panel-default" ng-show="$root.status.installed" ng-controller="Deauth_EditorController">
    <div class="panel-heading pointer" data-toggle="collapse" data-target="#Editor">
        <h4 class="panel-title">Editor</h4>
    </div>
    <div id="Editor" class="panel-collapse collapse">
      <div class="panel-body">
          <div class="form-group">
            <div class="input-group">
              <select class="form-control input-sm" ng-model="selectedInterface">
                  <option ng-repeat="interface in interfaces">{{ interface }}</option>
              </select>
                <span class="input-group-btn">
                    <button class="btn btn-{{scanLabel}} btn-sm" ng-disabled="scanning" ng-click="scanForNetworks()">{{scan}}</button>
                </span>
            </div>
          </div>

          <div class="form-group">
          <div class="input-group">
              <select class="form-control input-sm" ng-disabled="accessPoints.length === 0" ng-options="ap.ssid for ap in accessPoints track by ap.mac" ng-model="selectedAP"></select>
              <span class="input-group-btn">
                  <button class="btn btn-default btn-sm" type="button" ng-disabled="accessPoints.length === 0 || selectedAP == '--'" ng-click="addWhitelist()">Add to Whitelist</button>
                  <button class="btn btn-default btn-sm" type="button" ng-disabled="accessPoints.length === 0 || selectedAP == '--'" ng-click="addBlacklist()">Add to Blacklist</button>
              </span>
          </div>
          </div>

          <div class="form-group">
              <div class="input-group pull-right">
                <button type="submit" class="btn btn-{{saveListsLabel}} btn-sm pull-right" ng-disabled="saving" ng-click="saveListsData()">{{saveLists}}</button>
              </div>
              <div class="clearfix"></div>
          </div>

          <div class="row">
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                          Whitelist
                          <span class="dropdown">
                              <button class="btn btn-xs btn-default dropdown-toggle" type="button" id="poolDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                  <span class="caret"></span>
                              </button>
                              <ul class="dropdown-menu" aria-labelledby="poolDropdown">
                                  <li ng-click="clearWhitelist()"><a>Clear</a></li>
                              </ul>
                          </span>
                        </h3>
                    </div>
                    <div class="panel-body">
                      <p>
                        <textarea class="form-control" rows="15" ng-model="whitelistData"></textarea>
                      </p>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                      <h3 class="panel-title">
                        Blacklist
                        <span class="dropdown">
                            <button class="btn btn-xs btn-default dropdown-toggle" type="button" id="poolDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="poolDropdown">
                                <li ng-click="clearBlacklist()"><a>Clear</a></li>
                            </ul>
                        </span>
                      </h3>
                    </div>
                    <div class="panel-body">
                      <p>
                         <textarea class="form-control" rows="15" ng-model="blacklistData"></textarea>
                      </p>
                    </div>
                </div>
            </div>
          </div>

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

<div class="panel panel-default" ng-show="$root.status.installed" ng-controller="Deauth_OutputController">
	<div class="panel-heading">
        <h4 class="panel-title pull-left">Output</h4>
		<div class="pull-right">
			Auto-refresh <div class="btn-group">
			<button ng-click="toggleAutoRefresh()" class="btn btn-xs btn-{{refreshLabelON}}">ON</button>
			<button ng-click="toggleAutoRefresh()" class="btn btn-xs btn-{{refreshLabelOFF}}">OFF</button>
			</div>
		</div>
		<div class="clearfix"></div>
    </div>
    <div class="panel-body">
        <button class="btn btn-primary btn-sm pull-right" ng-click="refreshOutput()">Refresh Log</button><div class="clearfix"></div>
		<pre class="scrollable-pre log-pre">{{output}}</pre>
    </div>
</div>
