{% extends "base_analyze.html" %}
{% set active_page = 'similarity' %}

{% block head %}
<script type="text/javascript" src="{{ url_for('static', filename='js/scripts_similarity.js') }}?ver={{version}}"></script>

<!-- Latest compiled and minified DataTables CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/u/bs/jszip-2.5.0,pdfmake-0.1.18,dt-1.10.12,b-1.2.1,b-html5-1.2.1,b-print-1.2.1,fc-3.2.2,fh-3.1.2,se-1.2.0/datatables.min.css"/>

<!-- Latest compiled and minified DataTables JS -->  
<script type="text/javascript" src="https://cdn.datatables.net/u/bs/jszip-2.5.0,pdfmake-0.1.18,dt-1.10.12,b-1.2.1,b-html5-1.2.1,b-print-1.2.1,fc-3.2.2,fh-3.1.2,se-1.2.0/datatables.min.js"></script>

<script>
	$(document).ready( function () {
		/* This event is handled in scripts_analyze.js, but for some reason it has to be 
		   repeated here to function. */
		$(".has-chevron").on("click", function() {
			$(this).find("span").toggleClass("down");
			$(this).next().collapse('toggle');
		});
	});

	var docsListScore = "{{ docsListScore.decode("utf-8", "replace") }}";
	docsListScore = docsListScore.split("***");
	var docsListName = "{{ docsListName.decode("utf-8", "replace") }}";
	docsListName = docsListName.split("***");

	var documentLabels = {{ encodedLabels|tojson|safe }};
</script>
{% endblock %}

{% block title %}analyzer{% endblock %}

{% block options %}
<input type="hidden" id="num_active_files" value="{{ labels|len }}" style="visibility: hidden;" />

<fieldset id="similarityoptions">
<legend>Select Comparison Document:<i style="font-size:18px;padding-left:4px;" class="fa fa-question-circle lexos-popover-trigger" data-toggle="popover" data-html="true" data-placement="right" data-container="body" title="Select one document to be the external comparison. All other documents shown below will be used to make the model, and will be ranked in order of most to least similar to the comparison document in your results. For more info click <a href='http://scalar.usc.edu/works/lexos/similarity-query?path=the-analyze-tab' target='_blank'>here.</a>"
 ></i></legend>

	<input type="hidden" value="{{ request.form['uploadname'] }}" id="uploadname"/>
	<div id="similarityFileselect" style="overflow:auto; width: 400px; height: 125px; float: left;">
		{% for fileID, label in labels.items() %}
			<label>{{label}} 
				<input type="radio" class="minifilepreview" {{ 'checked' if fileID|unicode == session['similarities']['uploadname'] or loop.first }} name="uploadname" id="{{fileID}}_selector" value="{{fileID}}">
			</label><br>
		{%- endfor %}
		{% if labels|len == 0 %}
			<span id="no-labels">No Documents are Selected</span>
		{%- endif %}
	</div>

</fieldset>

{#<fieldset id="similarityoptionscheck" style="margin-top: 30px; float:left; margin-right: -430px;">#}
{#	<label class="icon-checkbox">Remove words that only appear once (hapax legomena)#}
{#		<input type="checkbox" name="simsuniquetokens" {{'checked' if session['similarities']['simsuniquetokens'] }}>#}
{#			<i class="fa fa-question-circle lexos-tooltip-trigger" data-toggle="tooltip" data-html="true" data-placement="right" data-container="body" title="This option will remove words that only appear once in the set of active documents." style="padding-left:4px;"></i>#}
{#	</label>#}
{#</fieldset>#}
{% endblock %}

{% block results %}
<div style="margin-left:15px;">
<br/>
<input type="submit" class="bttn bttn-action" id="getsims" name="gen-sims" value="Get Similarity Rankings"/>
<input type="submit" class="bttn bttn-exit bttndownload" id="simsdownload" name="get-sims" value="Download Similarity CSV"/>
</div>

<div class="similaritiesresults" style="width: 100%; float:left; margin-top:30px;margin-right:300px">
	
{% if (similaritiesgenerated) and docsListScore != 'Error'%}
	<legend>Similarity Rankings:<i class="fa fa-question-circle lexos-tooltip-trigger" data-toggle="tooltip" data-html="true" data-placement="right" data-container="body" title="The module used to produce this ranking employs Latent Semantic Analysis to generate unique vectors for each document. The cosine angle between your comparison document's vector and the vector of each document of your corpus is calculated, and these values are then compared. Cosine similarity measures can be between (0, 1), and the higher the value, the closer the comparison document's vector is to that document's vector as opposed to the other documents' vectors." style="font-size:18px;padding-left:4px;"></i></legend>
	<br/><br/>

	<div id="selectedDocument"></div>

	<table id="simtable" class="table table-bordered table-striped table-condensed">
		<thead>
			<tr>
				<th>Rank</th>
				<th>Document</th>
				<th>Cosine Similarity</th>
			</tr>
		</thead>
		<tbody></tbody>
	</table>

{% elif docsListScore == 'Error' %}
	<div id="selectedDocument">
	</div>
	<div class="explanation" style="color: red; font-size: 1.25em"> Error: {{ docsListName }}</div>

{% endif %}

</div>
{% endblock %}


{% block submit %}
{% endblock %}