<!doctype html>
<html lang="en">
	<title>{{config.DOMAIN|capitalize}} looking glass</title>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/bootstrap-reboot.min.css') }}">
		<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
		<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/datatables.min.css') }}">
	</head>
	<body>
		<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>

			<div class="collapse navbar-collapse" id="navbarSupportedContent">
				<a class="navbar-brand" href="/">{{config.DOMAIN|capitalize}}</a>
				<ul class="nav nav-pills">
					<li class="nav-item hosts mr-1"><a class="nav-link" id="{{all_hosts}}" href="#">all</a></li>

					{% for host in config.PROXY %}
					<li class="nav-item hosts mr-1"><a class="nav-link" id="{{host}}" href="#">{{host}}</a></li>
					{% endfor %}
				</ul>

				<div class="btn-group">
					<a class="btn btn-primary proto" id="ipv4" href="#">ipv4</a>
					<a class="btn btn-primary proto" id="ipv6" href="#">ipv6</a>
        </div>

				<ul class="nav">
					<li class="nav-item dropdown request_type">
						<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
							Show protocols
							<b class="caret"></b>
						</a>

						<ul class="dropdown-menu">
							{% for id, text in commands %}
							<li><a class="dropdown-item" id="{{id}}" href="#">{{text}}</a></li>
							{% endfor %}
						</ul>
					</li>
					<form class="pull-left navbar-form" action="javascript:;">
						<input type="text" style="width:250px;" class="request_args search-query form-control" placeholder="...">
					</form>
					<li class="navbar-text"></li>

				</ul>
			</div>
		</nav>
		<div class="container-fluid mt-3">
			<div class="row">
				<div class="col-sm-8 col-md-8">
					{% if warnings %}
					<div class="alert alert-warning">
						{% for warning in warnings %}{{warning}}<br>{% endfor %}
					</div>
					{% endif %}
					{% if errors %}
					<div class="alert alert-error alert-warning">
						{% for error in errors %}{{error}}<br>{% endfor %}
					</div>
					{% endif %}

					{% block body %}{% endblock %}

				</div>
				<div class="col-sm-4 col-md-4">
					<div class="well" style="padding: 8px 0;">
            <h4>Request history</h4>
						<div class="list-group history">
							{% for hosts, proto, request_type, request_args in session.history %}
							<a class="list-group-item list-group-item-action {% if loop.first %}active{% endif %}"
              href="/{{ [request_type, hosts, proto]|join("/") }}{% if request_args %}?q={{request_args}}{% endif %}">
                  {{hosts}}/{{proto}}: {{ commands_dict[request_type]|replace("...", request_args) }}
              </a>

							{% endfor %}
						</div>
					</div>
				</div>
			</div>

			<div class="footer">
				<p>bird looking glass, <a href="https://github.com/sileht/bird-lg/">source code</a> under GPL 3.0, powered by <a href="http://flask.pocoo.org">Flask</a>, <a href="http://jquery.com/">jQuery</a> and <a href="https://getbootstrap.com/">Bootstrap</a></p>
			</div>

			<div class="progress progress-info progress-striped active" style="position:fixed;bottom:0px;right:10px;display:none;height:10px;width:200px;">
				<div class="progress-bar" style="width: 100%;"></div>
			</div>
			<div class="modal fade" style="display:none;">
				<div class="modal-header">
					<a class="close" data-dismiss="modal">×</a>
					<h3>Modal header</h3>
				</div>
				<div class="modal-body" style="height: 300px; overflow: auto;">
					<p>One fine body…</p>
				</div>
				<div class="modal-footer">
					<a href="#" class="btn btn-primary">Close</a>
				</div>
			</div>	
		</div>
		<script type="text/javascript" src="{{url_for('static', filename='js/jquery.js') }}"></script>
		<script type="text/javascript" src="{{url_for('static', filename='js/bootstrap.min.js') }}"></script>
    <script type="text/javascript" src="{{url_for('static', filename='js/datatables.min.js') }}"></script>
		<script type="text/javascript">
			request_type = "{{session.request_type}}";
request_args = "{{session.request_args|safe}}";
hosts = "{{session.hosts}}";
proto = "{{session.proto}}";
history_query = {{session.history|tojson|safe}};
		</script>
		<script type="text/javascript" src="{{url_for('static', filename='js/lg.js') }}"></script>

	</body></html>