{% extends "base.html" %}
{% block main %}
<div class='col-md-9'>
	<div role="tabpanel">
		<ul id='datasetTabs' class='nav nav-tabs' role="tablist">
			<li role='presentation' class='active'><a href='#all' aria-controls="all" role="tab" data-toggle='tab'>All</a></li>
		</ul>
		<div id='datasetTabsContent' class='tab-content'>
			<div role="tabpanel" class='tab-pane active' id='all'>
				<table class='table table-condensed table-hover' id='dataset'>
					<tr><th><h3>Populating table...</h3></th></tr>
				</table>
			</div>
		</div>
	</div>
</div>
{% endblock %}

{% block custom_head %}
<script type="text/javascript" src="{{ url_for('static', filename='custom_js/dataset.js') }}" charset="utf-8"></script>
{%endblock%}

{%block sidebar %}
<div class='col-md-3 toolbar'>
	{% include "flash.html" %}

	<ul id='datasetSideTabs' class='nav nav-tabs' role='tablist'>
		<li class='active'><a href='#search' aria-controls="search" role="tab" data-toggle='tab'>Search</a></li>
		{% if not g.config['PUBLIC'] %}
		<li><a href='#tags' aria-controls="tags" role="tab" data-toggle='tab'>Tags</a></li>
		<li><a href='#add' aria-controls="add" role="tab" data-toggle='tab'>Quick add</a></li>
		{% endif %}
	</ul>

	<div id='datasetSideTabsContent' class='tab-content'>

		<div role="tabpanel" class='tab-pane active' id='search'>
			<form>
				<div class='input-group'>
	    			<input id="query" class="form-control input-sm" data-url="{{ url_for('malcom_api.query') }}" placeholder='tags=evil'>
					<span class="input-group-btn">
						<button id='dataset-search' class='btn btn-primary btn-sm' type='button' data-source="{{ url_for('malcom_api.query') }}" onclick="get_dataset($('#query').val(), '{{ url_for('malcom_api.query') }}')">Go</button>
					</span>
				</div>

				<div class="checkbox input-group-lg">
					<label class="checkbox">
					      <input id='regex' type="checkbox"> Regex search (slower)
					</label>
				</div>

				<a href='#' onclick="javascript:get_dataset_csv($('#query').val(), '{{url_for('dataset_csv')}}')">Export filter results as csv</a>

				<table id='stats' class='table table-condensed'>
					<tr> <th>Total results</th> <td id='total-results'></td></tr>
				</table>

				<nav>
				  <ul class="pagination">
				    <li><a id='pagination-prev' href="javascript:void(0)" data-nav="0" onclick="change_page($(this).attr('data-nav'), '{{ url_for('malcom_api.query') }}')" aria-label="Previous">Prev</a></li>
				    <li><a id='pagination-page' href="javascript:void(0)"></a></li>
				    <li><a id='pagination-next' href="javascript:void(0)" data-nav="1" onclick="change_page($(this).attr('data-nav'), '{{ url_for('malcom_api.query') }}')" aria-label="Next">Next</a></li>
				  </ul>
				  <br />
				  <img id='loading-spinner' src="{{ url_for('static', filename='custom_img/ajax-loader.gif')}}">
				</nav>
			</form>

		</div>

		<div role="tabpanel" class='tab-pane' id='tags'>
			<table class='table table-condensed' id='tag-table' data-source='{{ url_for("malcom_api.tags")}}'>
				<tr><td>Tag</td><td>Count</td></tr>
			</table>
		</div>

		{% if not g.config['PUBLIC'] %}
		<div role="tabpanel" class='tab-pane' id='add'>
			<form id='addform' method='POST' enctype='multipart/form-data' action='{{ url_for("add_data") }}'>
				<div class='form-group'>
				    <label for='element'>Element</label>
				    <input class="form-control" type="text" placeholder="" name='value' id='element'>
				    <span class="help-block">e.g. http://google.com; tomchop.me; 127.0.0.1</span>
				<!-- </div>
				<div class='form-group'> -->
				  	<label for='tags'>Tags</label>
				    <input class="form-control" id='tags' type="text" name="tags" placeholder="">
				    <span class="help-block">Tags must be a series of comma-separated values</span>
				</div>
				<p class='divider'></p>
				<div class='form-group'>
					<label for='bulk'>Bulk add</label>
				    <span class="help-block">Or choose a file to upload</span>
				    <input id='bulk' type="file" placeholder="" name='bulk-file'>
				</div>

			</form>
			<button onclick='javascript:$("#addform").submit()' class="btn btn-default">Add</button>
			{% if current_user.admin %}
			<a href="#" onclick="javascript:clear_db()" class="btn btn-danger">Clear DB</a>
			{% endif %}
		</div>
		{% endif %}
	</div> <!-- end tab contents -->


</div>
{% endblock%}
