{% extends "base-layout.html" %}

{% block css %}
{{ super() }}
{% endblock %}

{% macro completeness_cutoffs() %}
<!-- Grey with black text -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <ul class="navbar-nav">
		{% for level_id, _ in levels.items() %}
			<li class="nav-item">
				<a class="nav-link {% if level_id == extras.default_level %}active{% endif %}" href="#" onclick="updateOverview({{level_id}});">Completeness {{ level_id }}x</a>
			</li>
		{% endfor%}
    </ul>
  </div>
</nav>
{% endmacro %}


{% macro incompletely_covered_intervals(active_level) %}
 <form id="geneStatsForm" action="{{url_for('gene_overview')}}" method="post">
	 <input type="hidden" name="build" value="{{extras.build}}"/>
	 <input type="hidden" name="default_level" value="{{extras.default_level}}"/>
	 <input type="hidden" name="completeness_thresholds" value="{{extras.completeness_thresholds|join(',')}}"/>
	 <input type="hidden" name="samples" value="{{extras.samples|safe}}"/>
	 <input type="hidden" name="interval_type" value="{{extras.interval_type}}"/>
</form>
	<div class="row">
		<div class="col-md-12">
			<table class="table table-bordered">
			<caption>Incompletely covered {{ extras.interval_type }}</caption>
				<thead>
					<tr>
						<th scope="col">Gene</th>
						<th scope="col">{{ extras.interval_type }}</th>
						<th scope="col">Sample</th>
						<th scope="col">Completeness {{ extras.default_level }}x [%]</th>
					</tr>
				</thead>
				<tbody>
					{% for row in incomplete_coverage_rows %}
						<tr>
							<td>
								<a href="#" onclick="getGeneStatsPage({{row[1]}});" target="_blank" rel="noopener">
									{{row[0]}}
								</a>
							</td>
							<td>{{ row[2] }}</td>
							<td>{{ row[3] }}</td>
							<td class="text-right">{{ row[4] }}</td>
						</tr>
					{% else %}
						<tr>
							<td colspan="4">No intervals found..</td>
						</tr>
					{% endfor %}
				</tbody>
			</table>
		</div>
	</div>

	{{samples_coverage_stats}}

{% endmacro %}

{% block title %}
<title>Chanjo2 genes coverage overview</title>
{% endblock %}


{% block content %}
	<div class="col-md-12">
		<div class="panel panel-default">
			<div class="panel-heading">
				<h4>Incomplete {{ extras.interval_type }}</h4>
			</div>
			<ul class="list-group">
				<li class="list-group-item">
					Samples:
					{% for sample in extras.samples %}
						<strong>{{ sample.name }}</strong>
					{% endfor %}
				</li>
			</ul>
		</div>
	</div>

	{{ completeness_cutoffs() }}

	<br>

	{{ incompletely_covered_intervals() }}

{% endblock %}


{% block js_code %}
	{{ super() }}
	<script>

		// Extracts the content of the body element of an HTML page as a string
		function updatedReportBody(html)
		{
			return /<body.*?>([\s\S]*)<\/body>/.exec(html)[1];
		}

		function updateOverview(customLevel)
		{
			let formDict = {
				'build' : '{{ extras.build }}',
				'completeness_thresholds' : {{ extras.completeness_thresholds }},
				'hgnc_gene_ids' : {{ extras.hgnc_gene_ids }},
				'interval_type' : '{{ extras.interval_type }}',
				'default_level' : customLevel,
				'samples' : {{ extras.samples|safe }},
			}

			fetch('/overview', {
					method: 'POST',
					headers: {
						'Content-Type': 'application/json'
					},
					body: JSON.stringify(formDict)
				})
				.then(resp => resp.text())
				.then(html => {
					document.body.innerHTML = updatedReportBody(html);
				})
				.catch(error => {
					console.error(error);
			});
		}


		function getGeneStatsPage(hgncId)
		{
			event.preventDefault();
			var theForm = document.getElementById("geneStatsForm");
			var geneInput = document.createElement("input");
			geneInput.setAttribute("type", "hidden");
			geneInput.setAttribute("name", "hgnc_gene_id");
			geneInput.setAttribute("value", hgncId);
			theForm.appendChild(geneInput);
			theForm.submit();
		}
	</script>
{% endblock %}
