{% extends "layout.html" %}
{% block content %}
	<!-- <div class="jumbotron">
    	<div class="container">
			<h2>Threads dataset containing 23718 datapoints</h2>
		</div>
	</div> -->
	<div class="row" id="feedback">
		<div class="col-xl-8 offset-xl-2 my-2">
			<script id="alert-template" type="text/x-custom-template">
				<div class="alert alert-danger alert-dismissable fade show" role="alert" id="alert">
					<button type="button" class="close" data-dismiss="alert" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<span id="alert-content"></span>
				</div>
			</script>
		</div>
	</div>
	<div class="row">
		<div class="col-xl-12 my-2" id="chart"></div>
	</div>
	<div class="row">
		<div class="col-xl-4 my-2" id="info">
			<h4>Information</h4>
				<ul class="list-group mb-2" id="point">
					<li class="list-group-item active" id="point-info">select point by clicking</li>
				</ul>
				<div class="mb-2">
					<h5>Content retrieval</h5>
					<button type="button" id="btn-post" class="btn btn-success btn-block" disabled>show post</button>
					<button type="button" id="btn-nn" class="btn btn-success btn-block" disabled>compute nearest neighbors</button>
				</div>
				<div class="mb-2">
					<h5>Navigation</h5>
					<div class="btn-group btn-group-justified mb-2">
						<button type="button" id="subcluster-red" class="btn btn-success">load red subcluster</button>
						<button type="button" id="subcluster-blue" class="btn btn-success">load blue subcluster</button>
					</div>
					<button type="button" id="cluster-return" class="btn btn-success btn-block">return to previous view</button>
				</div>
		</div>
		<div class="col-xl-4 my-2" id="post">
			<h4>Post <small>(random post from selected thread)</small></h4>
			<div class="card">
				<div class="card-header" id="post-header"></div>
				<div class="card-block" id="post-content"></div>
				<div class="card-footer" id="post-footer"></div>
			</div>
		</div>
		<div class="col-xl-4 my-2" id="neighbors">
			<h4>Neighbors <small>(random posts from nearest neighbor threads)</small></h4>
			<div id="neighbors-list" role="tablist">
				<div class="card">
					<div class="card-header" id="neighbor-1-header" role="tab">
						<a href="#neighbor-1-content" data-toggle="collapse" data-parent="neighbors-list" aria-expanded="false" aria-controls="neighbor-1-content"></a>
					</div>
					<div class="card-block collapse" id="neighbor-1-content" role="tabpanel" aria-labelledby="neighbor-1-header"></div>
				</div>
				<div class="card">
					<div class="card-header" id="neighbor-2-header" role="tab">
						<a href="#neighbor-2-content" data-toggle="collapse" data-parent="neighbors-list" aria-expanded="false" aria-controls="neighbor-2-content"></a>
					</div>
					<div class="card-block collapse" id="neighbor-2-content" role="tabpanel" aria-labelledby="neighbor-2-header"></div>
				</div>
				<div class="card">
					<div class="card-header" id="neighbor-3-header" role="tab">
						<a href="#neighbor-3-content" data-toggle="collapse" data-parent="neighbors-list" aria-expanded="false" aria-controls="neighbor-3-content"></a>
					</div>
					<div class="card-block collapse" id="neighbor-3-content" role="tabpanel" aria-labelledby="neighbor-3-header"></div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}