src/switcheroo.html

<!doctype html>
<html ng-app="switcheroo" ng-csp>
	<head>
		<title>Switcheroo Redirector</title>
		<link rel="stylesheet" type="text/css" href="styles.css">
		<script type="text/javascript" src="lib/angular.js"></script>
		<script type="text/javascript" src="lib/underscore.js"></script>
		<script type="text/javascript" src="RulesService.js"></script>
		<script type="text/javascript" src="app.js"></script>
		<script type="text/javascript" src="RulesController.js"></script>
	</head>
	<body>
		<div id="container" ng-controller="RulesController">
			<div id="headings">
				<span class="from">From</span><span class="seperator">&nbsp;</span><span class="to">To</span>
			</div>
			<p ng-if="!rules.length" id="no-rules">
				You have no redirect rules at the moment so why don't you go ahead and <em class="switcheroo">Switcheroo</em>.
			</p>
			<ul id="rules" ng-repeat="rule in rules">
				<li>
					<span class="from" ng-if="!isEditing" title="{{rule.from}}">{{shortenText(rule.from)}}</span>
					<input type="text" ng-if="isEditing" ng-model="rule.from" />
					<span class="seperator">&gt;</span>
					<span class="to" ng-if="!isEditing" title="{{rule.to}}">{{shortenText(rule.to)}}</span>
					<input type="text" ng-if="isEditing" ng-model="rule.to" />
					<input type="checkbox" class="active" name="active" ng-model="rule.isActive" />
					<a href="#" class="editRuleButton" ng-click="enableEditing()" ng-if="!isEditing">Edit</a>
					<a href="#" class="updateRuleButton" ng-click="disableEditing()" ng-if="isEditing">Update</a>
					<a href="#" class="removeRuleButton" ng-click="remove($index)">Remove</a>
				</li>
			</ul>
			<form ng-submit="add()">
				<div id="new-rule">
					<input type="text" id="from" ng-model="from" />
					<span class="seperator">&gt;</span>
					<input type="text" id="to" ng-model="to" />
					<input id="addRuleButton" type="submit" value="Add" name="AddRule" />
				</div>
				<div>
					<input id="removeAllRulesButton" type="button" value="Remove All" name="RemoveAll" ng-click="clear()" />
				</div>
			</form>
		</div>
	</body>
</html>