<!-- extend base layout -->
{% extends "base.html" %}
{% block css %}
    <!-- Ion.RangeSlider -->
    <link href="/vendors/normalize-css/normalize.css" rel="stylesheet">
        <!-- Switchery -->
    <link href="/vendors/switchery/dist/switchery.min.css" rel="stylesheet">
{% endblock %}
{% block content %}

<div class="row">
	<div class="col-md-12 col-sm-12 col-xs-12">
		<div class="x_panel">
			<div class="x_title">
				<h3><i class="fa fa-desktop"></i> External</h3>
				<ul class="nav navbar-right panel_toolbox">
					<li>
						<div class="item form-group">
							<label class="control-label col-md-3 col-sm-3 col-xs-12" for="action_role">Assign role: <span class="required">*</span></label>
							<div class="col-md-6 col-sm-6 col-xs-12">
								<select id="action_role" name="action_role" class="form-control action" required>
									<option value=''>Select role</option>
									<option value='manager'>Manager</option>
									<option value='teacher'>Teacher</option>
									<option value='student'>Student</option>
								</select>
							</div>
						</div>
					</li>
					<li>
						<a class="btn-sync"><span style="color: #5499c7; "><i class="fa fa-rocket"></i> Sync to system</span></a>
						<a class="btn-upload"><span style="color: #5499c7; "><i class="fa fa-upload"></i> Upload</span></a>
						<a class="btn-sample"><span style="color: #a9ddff; "><i class="fa fa-download"></i> (Sample upload)</span></a>
						<a class="btn-download"><span style="color: #5499c7; "><i class="fa fa-download"></i> Download</span></a>
						<a class="btn-clear-upload"><span style="color: #5499c7; "><i class="fa fa-cross"></i> Clear upload</span></a>
					</li>
				</ul>
				<div class="clearfix"></div>
			</div>
			<div class="x_content">
				<p class="text-muted font-13 m-b-30"></p>
				<table id="users" class="table" width="100%">
					<thead>
						<tr>
							<th></th>
							<th>Avatar</th>
							<th>Username</th>
							<th>First</th>
							<th>Last</th>
							<th>email</th>
							<th>groups</th>
							<th>paths</th>
							<th>roles</th>
							<th>quota</th>
							<th>password</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
			</div>
			<div class="x_content">
				<p class="text-muted font-13 m-b-30"></p>
				<table id="groups" class="table" width="100%">
					<thead>
						<tr>
							<th></th>
							<th>Name</th>
							<th>Description</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>

{% include 'pages/sysadmin/modals/external_modals.html' %}
{% endblock %}

{% block pagescript %}
   <!-- Ion.RangeSlider -->
    <script src="/vendors/ion.rangeSlider/js/ion.rangeSlider.min.js"></script>
    <!-- iCheck -->
    <script src="/vendors/iCheck/icheck.min.js"></script> 
    <!-- Switchery -->
    <script src="/vendors/switchery/dist/switchery.min.js"></script>
    <!-- Desktops sse & modals -->
    <script src="/static/js/sysadmin/external.js"></script>
{% endblock %}
