<html>
<head>
	<title>Unified Remote Server</title>

	<!-- Optimize viewport for mobile devices -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">

		<!-- Google Fonts -->
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>

	<!-- Stylesheets -->
	<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css" />
	<link rel="stylesheet" href="/font-awesome/css/font-awesome.min.css" />
	<link rel="stylesheet" href="/default.css" />

	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
	  <script src="bootstrap3/assets/html5shiv.js"></script>
	  <script src="bootstrap3/assets/respond.min.js"></script>
	<![endif]-->
</head>
<body>

	<!--[if lt IE 9]>
	<div style="padding: 20px">
		<p>Please update your browser. Supported browsers:</p>
		<ul>
			<li>All modern browsers (Chrome, Safari, Firefox, Opera, etc).</li>
			<li>Internet Explorer 9+</li>
		</ul>
	</div>
	<![endif]-->

	<div id="container"></div>

	<script id="tmain" type="text/ractive">
		<div class="wrap"
			on-drop="file-drag-drop"
			on-dragover="file-drag-start"
			on-mouseleave="file-drag-cancel"
			on-dragenter="file-drag-start">
			{{#view.dragdrop}}
				<div class="dragdrop">
					<div class="dragdrop-inner">
						<div class="dragdrop-content">
							{{>tdragdrop}}
						</div>
					</div>
				</div>
			{{/view.dragdrop}}
			<div class="nav narrow">
				<div class="nav-top">
					<img src="/img/brand.png" />
					<span class="nav-title">Unified Remote</span>
				</div>
				<div class="nav-middle">
					<ul>
						<li>
							<a href="/web/#/status" on-click="navigate" class="{{ view.page.status ? 'active' : '' }}">
								<i class="fa fa-dashboard"></i>
								<span class="nav-title">Status</span>
							</a>
						</li>
						<li>
							<a href="/web/#/remotes" on-click="navigate" class="{{ view.page.remotes ? 'active' : '' }}">
								<i class="fa fa-bars"></i>
								<span class="nav-title">Remotes</span>
							</a>
						</li>
						<li>
							<a href="/web/#/log" on-click="navigate" class="{{ view.page.log ? 'active' : '' }}">
								<i class="fa fa-file-text"></i>
								<span class="nav-title">Log</span>
							</a>
						</li>
						<li>
							<a href="/web/#/settings" on-click="navigate" class="{{ view.page.settings ? 'active' : '' }}">
								<i class="fa fa-gear"></i>
								<span class="nav-title">Settings</span>
							</a>
						</li>
						<li>
							<a href="/web/#/about" on-click="navigate" class="{{ view.page.about ? 'active' : '' }}">
								<i class="fa fa-question-circle"></i>
								<span class="nav-title">About</span>
							</a>
						</li>
					</ul>
				</div>
				<div class="nav-bottom">
					&copy; {{year}}
				</div>
			</div>
			<div class="main">
				<div class="tips">
					<div class="tip">{{view.tip}}</div>
				</div>

				{{#view.connected && !view.restarting}}
					{{#view.page.status}}
						{{>tstatus}}
					{{/view.page.status}}

					{{#view.page.remotes}}
						{{>tremotes}}
					{{/view.page.remotes}}

					{{#view.page.settings}}
						{{>tconfig}}
					{{/view.page.settings}}

					{{#view.page.log}}
						{{>tlog}}
					{{/view.page.log}}

					{{#view.page.about}}
						{{>tabout}}
					{{/view.page.about}}
				{{else}}
					{{>tconnecting}}
				{{/view.connected}}
			</div>
		</div>
		{{#if config.updates.pending}}
			<div class="update">
				<table>
					<tr>
						<td align="left">
							<a href="{{config.updates.response.Link}}" target="_blank">A newer version of the server is available.</a>
						</td>
						<td align="right">
							<button on-click="update-clear">Later</button>
						</td>
					</tr>
				</table>
			</div>
		{{/if}}
	</script>

	<script id="tconnecting" type="text/ractive">
		<div class="page">
			<h2>
				<i class="fa fa-refresh fa-spin" /> &nbsp;
				{{#view.restarting}}
					Restarting, please wait...
				{{else}}
					Connecting, please wait...
				{{/view.restarting}}
			</h2>
		</div>
	</script>

	<script id="tremotes" type="text/ractive">
		<div class="header">
			<h1>Remotes</h1>
			<!--<ul class="tabs">
				<li><a href="#/remotes/ready" class="{{ view.tab.ready || view.tab.default ? 'active' : '' }}">Ready</a></li>
				<li><a href="#/remotes/install" class="{{ view.tab.install ? 'active' : '' }}">Install</a></li>
				<li><a href="#/remotes/find" class="{{ view.tab.find ? 'active' : '' }}">Find</a></li>
				<li><a href="#/remotes/build" class="{{ view.tab.build ? 'active' : '' }}">Build</a></li>
			</ul>-->
			<div class="clear"></div>
		</div>
		<div class="page">

			{{#view.remote}}
			<h2>Settings</h2>
			<table class="table">
				<thead>
					<tr>
						<th>Key</th>
						<th>Value</th>
						<th></th>
					</tr>
				</thead>
				<tbody>
					{{#view.remote.settings:i}}
					<tr>
						<td><input type="text" placeholder="Key" value="{{key}}" /></td>
						<td><input type="text" placeholder="Value" value="{{value}}" /></td>
						<td><div class="button raised" on-click="remove-remote-setting" data-index="{{i}}">Remove</div></td>
					</tr>
					{{/view.remote.settings}}
				</tbody>
			</table>
			<div class="button raised" on-click="add-remote-setting">Add</div>

			<div class="buttons">
				<div class="button raised" on-click="save-remote-settings">Save</div>
				<div class="button raised" on-click="cancel-remote-settings">Cancel</div>
			</div>

			{{else}}

			<h2>Available</h2>
			<table class="table remotes">
				<tbody>
					{{#remotes:i}}
						{{# !hidden || ../../view.showhidden}}
						<tr class="{{ (isRemoteDisabled(id) ? 'disabled' : '') }}">
							<td>
								{{#icon}}
									<img src="data:image/png;base64,{{icon}}" />
								{{else}}
									<img src="/img/noicon.png" />
								{{/icon}}
							</td>
							<td>
							   <div class="remotes-name"><abbr title="{{id}}">{{name}}</abbr></div>
							   <div class="remotes-desc">{{description}}</div>
							</td>
							<td align="right">
								{{#if isRemoteDisabled(id) }}
								<div class="button raised" on-click="enable-remote" data-id="{{id}}">Enable {{#if isRemoteUnsaved(id) }} (unsaved) {{/if}}</div> &nbsp;
								{{else}}
								<div class="button raised" on-click="disable-remote" data-id="{{id}}">Disable {{#if isRemoteUnsaved(id) }} (unsaved) {{/if}}</div> &nbsp;
								{{/if}}
								<div class="button raised" on-click="configure-remote" data-index="{{i}}">Configure</div>
							</td>
						</tr>
						{{/hidden}}
					{{else}}
						<tr>
							<td colspan="2"><i>No remotes</i></td>
						</tr>
					{{/remote}}
				</tbody>
			</table>
			<div class="buttons">
				<div class="pull-right">
					<div class="button raised" on-click="enable-all-remotes">Enable All</div>
					<div class="button raised" on-click="disable-all-remotes">Disable All</div>
					<div class="button raised" on-click="save-remotes">Save Changes</div>
				</div>
				<div class="pull-left">
					<input type="checkbox" id="show-hidden-remotes" checked="{{view.showhidden}}" /> Show hidden remotes.
				</div>
				<div class="clear"></div>
			</div>

			{{/view.remote}}

		</div>
	</script>

	<script id="tstatus" type="text/ractive">
		<div class="header">
			<h1>Status</h1>
			<ul class="tabs">
				<li><a href="#/status/dashboard" on-click="navigate" class="{{ view.tab.dashboard || view.tab.default ? 'active' : '' }}">Dashboard</a></li>
				<li><a href="#/status/connect" on-click="navigate" class="{{ view.tab.connect ? 'active' : '' }}">Accounts</a></li>
				<li><a href="#/status/connections" on-click="navigate" class="{{ view.tab.connections ? 'active' : '' }}">Connections</a></li>
				<li><a href="#/status/instances" on-click="navigate" class="{{ view.tab.instances ? 'active' : '' }}">Instances</a></li>
				<li><a href="#/status/addresses" on-click="navigate" class="{{ view.tab.addresses ? 'active' : '' }}">Addresses</a></li>
			</ul>
			<div class="clear"></div>
		</div>
		<div class="page">
			{{#view.tab.dashboard || view.tab.default}}
				<h2>{{ status.running ? "Server Started" : "Server Stopped" }}</h2>
				<ul class="list">
					<li class="{{status.interfaces.wifi.view.style}}">
						<i class="fa fa-{{status.interfaces.wifi.view.icon}}" />
						WiFi: {{ status.interfaces.wifi.view.text }}
					</li>
					<li class="{{status.interfaces.bt.view.style}}">
						<i class="fa fa-{{status.interfaces.bt.view.icon}}" />
						Bluetooth: {{ status.interfaces.bt.view.text }}
					</li>
					<li class="{{status.interfaces.ad.view.style}}">
						<i class="fa fa-{{status.interfaces.ad.view.icon}}" />
						Auto-Discovery: {{ status.interfaces.ad.view.text }}
					</li>
					<li class="{{status.network.lan.view.style}}">
						<i class="fa fa-{{status.network.lan.view.icon}}" />
						LAN: {{ status.network.lan.view.text }} ( {{ status.network.lan.address }} )
					</li>
					<li class="{{status.network.wan.view.style}}">
						<i class="fa fa-{{status.network.wan.view.icon}}" />
						WAN: {{ status.network.wan.view.text }} (
							<span id="wan-address">
								<a href="#" on-click="toggle-wan-address">&lt;Show IP&gt;</a>
								<a href="#" on-click="toggle-wan-address" class="hide">{{ status.network.wan.address }}</a>
							</span>
						)
					</li>
					{{#status.firewall.available}}
						<li class="{{status.firewall.view.style}}">
							<i class="fa fa-{{status.firewall.view.icon}}" />
							Firewall: {{ status.firewall.view.text }}
						</li>
					{{/status.firewall.available}}

					{{#status.input.available}}
						<li class="{{status.input.view.style}}">
							<i class="fa fa-{{status.input.view.icon}}" />
							Input Mode: {{ status.input.view.text }}
						</li>
					{{/status.input.available}}
				</ul>

				<div class="buttons">
					<div class="button raised" on-click="restart">Restart Server</div>
					<div class="button raised" on-click="reload">Reload Remotes</div>
				</div>

			{{/view.tab.dashboard}}

			{{#view.tab.connect}}

				<h2>Spotify</h2>
				{{#if !config.connect.spotify}}
					<p>Connect to your Spotify account to enable the Spotify Advanced remote.</p>
				{{else}}
					<p>Account connected.</p>
				{{/if}}
				<a class="button raised" href="https://services.unifiedremote.com/connect/spotify?return=manager">
					{{#if !config.connect.spotify}}
						Connect Spotify
					{{else}}
						Re-Connect Spotify
					{{/if}}
				</a>
				{{#if config.connect.spotify}}
				&nbsp; <a class="button raised" href="/system/disconnect/spotify">Disconnect</a>
				{{/if}}

				<h2>Telldus</h2>
				{{#if !config.connect.telldus}}
					<p>Connect to your Telldus Live account to enable the TellStick Live remote.</p>
				{{else}}
					<p>Account connected.</p>
				{{/if}}
				<a class="button raised" href="https://services.unifiedremote.com/connect/telldus?return=manager">
					{{#if !config.connect.telldus}}
						Connect Telldus
					{{else}}
						Re-Connect Telldus
					{{/if}}
				</a>
				{{#if config.connect.telldus}}
				&nbsp; <a class="button raised" href="/system/disconnect/telldus">Disconnect</a>
				{{/if}}
			{{/view.tab.connect}}

			{{#view.tab.connections}}
				<h2>Connections</h2>
				<table class="table">
					<thead>
						<tr>
							<th width="40%">Identity</th>
							<th width="20%">Status</th>
							<th width="20%">Connected</th>
							<th width="20%">Active</th>
						</tr>
					</thead>
					<tbody>
						{{#status.connections}}
						<tr>
							<td>{{destination}}</td>
							<td>{{ (authenticated ? "Authenticated" : "Not Authenticated") + (encrypted ? " Encrypted" : "") }}</td>
							<td>{{started}}</td>
							<td>{{active}}</td>
						</tr>
						{{else}}
						<tr>
							<td colspan="4"><i>No connections</i></td>
						</tr>
						{{/status.connections}}
					</tbody>
				</table>
			{{/view.tab.connections}}

			{{#view.tab.instances}}
				<h2>Instances</h2>
				<table class="table">
					<thead>
						<tr>
							<th width="60%">Remote</th>
							<th width="40%">Type</th>
						</tr>
					</thead>
					<tbody>
						{{#status.instances}}
						<tr>
							<td>{{remote}}</td>
							<td>{{type}}</td>
						</tr>
						{{else}}
						<tr>
							<td colspan="2"><i>No instances</i></td>
						</tr>
						{{/status.connections}}
					</tbody>
				</table>
			{{/view.tab.instances}}

			{{#view.tab.addresses}}
				<h2>Addresses</h2>
				<table class="table">
					<thead>
						<tr>
							<th width="40%">Name</th>
							<th width="30%">Network</th>
							<th width="30%">Physical</th>
						</tr>
					</thead>
					<tbody>
						{{#status.addresses}}
						<tr>
							<td>{{name}}</td>
							<td>{{network}}</td>
							<td>{{physical}}</td>
						</tr>
						{{else}}
						<tr>
							<td colspan="3"><i>No addresses</i></td>
						</tr>
						{{/status.addresses}}
					</tbody>
				</table>
			{{/view.tab.addresses}}
		</div>
	</script>

	<script id="tabout" type="text/ractive">
		<div class="header">
			<h1>About</h1>
		</div>
		<div class="page">
			<h2>Updates</h2>
			<ul class="list">
				{{#if config.updates.pending}}
					<li><a href="{{config.updates.response.Link}}" target="_blank">A newer version of the server is available.</a></li>
				{{else}}
					<li><i>No updates available</i></li>
				{{/if}}
			</ul>
			<div class="buttons">
				<div class="button raised" on-click="update-check">Check</div>
				{{#if config.updates.pending}}
					<div class="button raised" on-click="update-clear">Later</div>
				{{/if}}
			</div>

			<h2>Version</h2>
			<table class="table">
				<tbody>
					<tr>
						<td>Version</td>
						<td>{{ status.version }} ({{ status["version-code"] }})</td>
					</tr>
					<tr>
						<td>OS</td>
						<td>{{ status.os }}</td>
					</tr>
					<tr>
						<td>Platform</td>
						<td>{{ status.platform }}</td>
					</tr>
					<tr>
						<td>Machine</td>
						<td>{{ status.machine }}</td>
					</tr>
					<tr>
						<td>Command</td>
						<td>{{ status.command }}</td>
					</tr>
					<tr>
						<td>Uptime</td>
						<td>{{ status.started }}</td>
					</tr>
				</tbody>
			</table>
		</div>
	</script>

	<script id="tlog" type="text/ractive">
		<div class="header">
			<h1>Log</h1>
		</div>
		<div class="page">
			<div id="log-output">
				<div class="pure-g">
					<div class="form-inline">
						<div class="pull-right pure-u-1-3">
							<label># lines</label>
							<div class="form-group">
								<input type="text" id="log-lines" class="form-control" value="{{view.log.lines}}" >
							</div>
							<div class="button raised pause" on-click="toggle-pause-log">
								{{ #view.log.paused }}
									<i class="fa fa-play"></i> Resume
								{{ else }}
									<i class="fa fa-pause"></i> Pause
								{{/}}
							</div>
						</div>
						<div class="pure-u-2-3">
							<label>Filter</label>
							<div class="form-group filter" width="400px">
								<input id="log-filter" type="text" value="{{view.log.filter}}" class="filter" class="form-control" placeholder="e.g. Connection" >
							</div>
							<label>Level</label>
							<div class="form-group">
								<select class="level" id="log-level" value="{{view.log.level}}" class="form-control" >
									{{#each view_log_levels}}
										<option value="{{value}}">{{name}}</option>
									{{/each}}
								</select>
							</div>
						</div>
					</div>
				</div>
				<div class="log" id="log-data">
					<div class="log-line">
						<span class="log-msg-trace">Loading...</span>
					</div>
				</div>
			</div>
		</div>
	</script>

	<script id="tlogline" type="text/ractive">
		{{#log:i}}
			<div class="log-line" data-text="{{text}}">
				<span class="log-date">{{date}}</span>
				<span class="log-time">{{time}}</span>
				<span class="log-msg {{ "log-msg-" + tag }}">{{msg}}</span>
			</div>
		{{/log}}
	</script>

	<script id="tconfig" type="text/ractive">
		<div class="header">
			<h1>Settings</h1>
			<ul class="tabs">
				<li><a href="#/settings/general" on-click="navigate" class="{{ view.tab.general || view.tab.default ? 'active' : '' }}">General</a></li>
				<li><a href="#/settings/network" on-click="navigate" class="{{ view.tab.network ? 'active' : '' }}">Network</a></li>
				<li><a href="#/settings/security" on-click="navigate" class="{{ view.tab.security ? 'active' : '' }}">Security</a></li>
				<li><a href="#/settings/remotes" on-click="navigate" class="{{ view.tab.remotes ? 'active' : '' }}">Remotes</a></li>
				<li><a href="#/settings/advanced" on-click="navigate" class="{{ view.tab.advanced ? 'active' : '' }}">Advanced</a></li>
			</ul>
			<div class="clear"></div>
		</div>
		<div class="page">

			{{#view.tab.general || view.tab.default}}
				<h2>General</h2>
				<div class="section">
					<div class="checkbox" id="auto-start">
						<label>
							<input type="checkbox" checked="{{ config.general["auto-start"] }}" /> Automatically start server when OS starts up.
						</label>
					</div>
					<div class="checkbox">
						<label>
							<input type="checkbox" checked="{{ config.updates["auto-check"] }}" /> Automatically check for server updates.
						</label>
					</div>
					<div class="checkbox">
						<label>
							<input type="checkbox" checked="{{ config.general.notifications }}" /> Show important error notifications.
						</label>
					</div>
					<div class="checkbox">
						<label>
							<input type="checkbox" checked="{{ config.general.icon }}" /> Show icon in system notification area.
						</label>
					</div>
				</div>
			{{/view.tab.general}}

			{{#view.tab.network}}
				<h2>Connections</h2>
				<div class="checkbox">
					<label>
						<input type="checkbox" checked="{{ config.interfaces.tcp.enable }}" /> Enable WiFi connections on port <input type="number" placeholder="9512" value="{{config.interfaces.tcp.port}}" /> (TCP).
					</label>
				</div>
				<div class="checkbox">
					<label>
						<input type="checkbox" checked="{{ config.interfaces.udp.enable }}" /> Enable fast connections on port <input type="number" placeholder="9512" value="{{config.interfaces.udp.port}}" /> (UDP).
					</label>
				</div>
				<div class="checkbox">
					<label>
						<input type="checkbox" checked="{{ config.interfaces.ad.enable }}" /> Enable automatic server discovery on port <input type="number" placeholder="9511" value="{{config.interfaces.ad.port}}" /> (UDP).
					</label>
				</div>
				<div class="checkbox">
					<label>
						<input type="checkbox" checked="{{ config.interfaces.bt.enable }}" /> Enable Bluetooth connections (if available depending on OS).
					</label>
				</div>
				<div class="checkbox">
					<label>
						<input type="checkbox" checked="{{ config.interfaces.web.enable }}" /> Enable web-based client (<a href="http://localhost:9510/client">http://localhost:9510/client</a>).
					</label>
				</div>

				<h2>Web Manager</h2>
				<p>Warning: If you disable web access then you must <a href="https://www.unifiedremote.com/tutorials/54e308394e5ec1da50a44fca" target="_blank">manually re-enable</a> it to use it later.</p>
				<div class="checkbox">
					<label>
						<input type="checkbox" checked="{{ config.manager.enable }}" /> Enable web manager and client (HTTP).
					</label>
				</div>
				<div class="checkbox">
					<label>
						<input type="checkbox" checked="{{ config.manager.remote }}" /> Allow remote web access from other computers.
						<div style="color: red; margin-top: 4px">
							Warning: Enabling remote web access will allow access to your computer from any other device on your network, giving them access to change any server settings, including security settings. We recommend leaving this disabled.
						</div>
					</label>
				</div>
			{{/view.tab.network}}

			{{#view.tab.security}}
				<h2>Authentication</h2>
				<div class="radio">
					<label>
						<input type="radio" name="{{ config.security.mode }}" value="none" /> Do not require apps to enter a password before connecting.
					</label>
					<div class="form-extra"></div>
				</div>
				<div class="radio">
					<label>
						<input type="radio" name="{{ config.security.mode }}" value="anonymous" /> Use the same password for all users.
					</label>
					<div class="form-extra">
						<input type="password" placeholder="Password" disabled="{{ config.security.mode != 'anonymous' ? 'disabled' : '' }}" value="{{config.security.password}}" />
					</div>
				</div>
				<div class="radio">
					<label>
						<input type="radio" name="{{ config.security.mode }}" value="users" /> Use individual usernames and passwords.
					</label>
				</div>

				{{#config.security.mode == "users"}}
				<h2>Users</h2>
				<table class="table">
					<thead>
						<tr>
							<th>Username</th>
							<th>Password</th>
							<th></th>
						</tr>
					</thead>
					<tbody>
						{{#each config.security.users:i}}
						<tr>
							<td><input type="text" placeholder="Username" value="{{username}}" /></td>
							<td><input type="password" placeholder="Password" value="{{password}}" /></td>
							<td><div class="button raised" on-click="remove-user" data-index="{{i}}">Remove</div></td>
						</tr>
						{{/each}}
					</tbody>
				</table>
				<div class="button raised" on-click="add-user">Add</div>
				{{/config.security.mode == "users"}}

				<h2>Encryption</h2>
				<div class="checkbox">
					<label>
						<input type="checkbox" checked="{{ config.security.encryption }}" /> Encrypt all network (recommended for non-LAN use but impacts performance).
					</label>
				</div>
			{{/view.tab.security}}

			{{#view.tab.remotes}}
				<h2>Remotes</h2>
				<div class="checkbox">
					<label>
						<input type="checkbox" checked="{{ config.loader.watch }}" /> Automatically detect new or modified remotes.
					</label>
				</div>
				<h2>Paths</h2>
				<p>Change where Unified Remote Server looks for remotes on your system.</p>

				<table class="table">
					<thead>
						<tr>
							<th>Local Path</th>
							<th></th>
						</tr>
					</thead>
					<tbody>
						{{#config.loader.paths:i}}
						<tr>
							<td><input type="text" placeholder="Path" value="{{this}}" /></td>
							<td><div class="button raised" on-click="remove-path" data-index="{{i}}">Remove</div></td>
						</tr>
						{{/config.loader.paths}}
					</tbody>
				</table>

				<div class="button raised" on-click="add-path">Add</div>
			{{/view.tab.remotes}}

			{{#view.tab.advanced}}
				<h2>Logging</h2>
				<div class="checkbox">
					<label>
						<input type="checkbox" checked="{{ config.log.enable }}" /> Enable server activity logging (recommended).
					</label>
				</div>
				<div class="checkbox">
					<label>
						<input type="checkbox" checked="{{ config.log.trace }}" /> Enable trace level logging (for troubleshooting).
					</label>
				</div>
				<div class="checkbox">
					<label>
						<input type="checkbox" checked="{{ config.log.dumps }}" /> Enable crash dumps.
					</label>
				</div>

				<h2>Advanced</h2>
				<div class="checkbox">
					<label>
						<input type="checkbox" checked="{{ config.advanced.debug }}" /> Run in debug mode (not recommended).
					</label>
				</div>
				<div class="checkbox">
					<label>
						<input type="checkbox" checked="{{ config.advanced.driver }}" /> Enable driver on Windows.
					</label>
				</div>
				<div>
					<form class="form-inline">
						<div class="form-group" style="width: 120px">
							Force LAN IP:
						</div>
						<div class="form-group">
							<input type="text" value="{{ config.advanced['lan-ip'] }}" placeholder="Automatic" class="form-control" width="300px" />
						</div>
					</form>
				</div>

				<div class="form-extra">
					<br><br>
					<a href="/system/config" target="_blank">Show Configuration</a>
				</div>
			{{/view.tab.advanced}}

			<div class="buttons">
				<div class="button raised" on-click="save-config">Save</div>
				<div class="button raised" on-click="cancel-config">Cancel</div>
			</div>

		</div>
	</script>

	<script id="tdragdrop" type="text/ractive">
		{{#view.dragdrop.dragging}}
			<h1>Drop your files here...</h1>
			<p class="droparea">Drag the file onto this page to import it into the custom remote folder</p>
		{{/}}
		{{#view.dragdrop.uploading}}
			<h1>
				<i class="fa fa-spin fa-spinner"></i>
				Uploading...
			</h1>
		{{/}}
		{{#view.dragdrop.result}}
			<h1>Done!</h1>
			<p>{{msg}}</p>
			<a class="button raised pull-right grayer" on-click="file-drag-dismiss">
				  <i class="fa fa-check"></i>
				  Continue
			</a>
			<br>
			<br>
			<br>
		{{/}}
	</script>


	<!-- Load JavaScript last to improve load times -->
	<script type="text/javascript" src="/jquery/jquery.min.js"></script>
	<script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="/lodash/lodash.compat.js"></script>
	<script type="text/javascript" src="/ractive/ractive.js"></script>
	<script type="text/javascript" src="/default.js"></script>

</body>
</html>
