{% extends "head.html" %}
{% block content %}

	        <ul class="nav nav-pills nav-stacked">
						<li><a href="/dashboard">Dashboard</a></li>
	          <li><a href="/logs">Status Data Logs</a></li>
	          <li class="active"><a href="/access">Access Logs</a></li>
						<li><a href="/video_feed" target="_blank">Livestream</a></li>
						<li><a href="https://t.me/seroma_bot" id="telegrambtn" target="_blank">Telegram Bot</a></li>
						<li><a href="/logout" id="logoutbtn">Logout</a></li>
	        </ul>
	      </div>
	  </div>
	  <div class="main">
      <div class="col-md-12">
				<p class="visible-xs">
					<button type="button" class="btn btn-primary btn-xs" id="toggleSidebar" data-toggle="offcanvas"><i class="glyphicon glyphicon-chevron-left"></i></button>
				</p>
        <div class="sectionhead"> Access Logs </div>
				<div class="row">
          <div class="col-md-12">
						<div class="well">
							<div class="header"> Server Room Access Logs </div>
							<br />
							<br />
							<table class="table" id="table">
								<thead>
									<tr>
										<th>Date and Time</th><th>Access Card UID</th><th>First Name</th><th>Last Name</th>
									</tr>
								</thead>

								<tbody>
									{%- for timeinfo, uid, firstname, lastname in access %}
									<tr>
										<td>{{ timeinfo }}</td><td>{{uid}}</td><td>{{firstname}}</td><td>{{lastname}}</td>
									</tr>
									{%- endfor %}
								</tbody>
							</table>
			        </div>
						</div>
					</div>
	      </div>
	  </div>
	</div><!--/row-offcanvas -->
{% endblock %}