<div class="row">
	<div class="col-md-4">
		<div class="panel panel-default" ng-controller="tor_DependenciesController">
			<div class="panel-heading">
				<h3 class="panel-title">Dependencies</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">tor</td>
						<td style="text-align:right;padding-bottom: .5em;">
							<button type="button" style="width: 90px;" class="btn btn-{{statusLabel}} btn-xs" ng-disabled="starting" ng-click="toggletor()">{{status}}</button>
						</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="row">
	<div class="col-md-8">
		<div class="panel panel-default" ng-controller="tor_ConfigurationController" ng-show="$root.status.installed">
			<div class="panel-heading">
                <h3 class="panel-title">Hidden Services {{ hiddenServicesLoad }}</h3>
				{{ config }}
			</div>

			<div class="panel-body">
				<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addHiddenService" ng-disabled="processing">Add Service</button>
				<button type="button" class="btn btn-info" ng-show="hiddenServices.length > 0" data-toggle="modal" data-target="#addServiceForward" ng-disabled="processing">Add Forward</button>
				<div ng-repeat="service in hiddenServices">
					<h4>
						<span>{{ service.name }}</span>
						<span ng-show="service.hostname">(<a href="http://{{service.hostname}}">{{service.hostname}}</a>)</span>
						<span>
							<button type="button" class="btn btn-danger btn-xs pull-right" data-toggle="modal" ng-click="removeHiddenService(service.name)" ng-disabled="processing">Remove Service</button>
						</span>
					</h4>
					<div>
						<table style="width: 100%">
							<th>Port</th>
							<th>Redirect to</th>
							<th></th>
							<tr ng-repeat="forward in service.forwards">
								<td>{{ forward.port }}</td>
								<td>{{ forward.redirect_to }}</td>
								<td style="text-align:right;padding-bottom: .5em;"><button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#removeServiceForward" ng-click="removeServiceForward(service.name, forward.port, forward.redirect_to);" ng-disabled="processing" aria-label="Delete Forward">X</button></td>
							</tr>
						</table>
					</div>
				</div>
			</div>

			<div class="modal fade" id="addHiddenService" tabindex="-1" role="dialog" aria-labelledby="addHiddenServiceLabel">
				<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="addHiddenServiceRemoveModalLabel">Add Hidden Service</h4>
						</div>
						<div class="modal-body">
							<table style="width: 100%">
								<tr>
									<td style="padding-bottom: .5em;" class="text-muted">Directory:</td>
									<td><input type="text" class="form-control" placeholder="hidden_service" ng-model="name"></td>
								</tr>
							</table>
						</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="addHiddenService()" data-dismiss="modal">Add Service</button>
						</div>
					</div>
				</div>
			</div>
			<div class="modal fade" id="addServiceForward" tabindex="-1" role="dialog" aria-labelledby="addServiceForwardLabel">
				<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="addServiceForwardRemoveModalLabel">Add Forward to Service</h4>
					</div>
					<div class="modal-body">
						<table style="width: 100%">
							<tr>
								<td>Service:</td>
								<td style="padding-bottom: .5em">
									<select ng-model="name">
										<option ng-repeat="service in hiddenServices">{{service.name}}</option>
									</select>
								</td>
							</tr>
							<tr>
								<td style="padding-bottom: .5em;" class="text-muted">Port:</td>
								<td><input type="text" class="form-control" placeholder="80" ng-model="port"></td>
							</tr>
							<tr>
								<td style="padding-bottom: .5em;" class="text-muted">Redirect to:</td>
								<td><input type="text" class="form-control" placeholder="127.0.0.1:1471" ng-model="redirect_to"></td>
							</tr>
						</table>
					</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="addServiceForward()" data-dismiss="modal">Add Forward</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
