{% extends "base.html" %}

{% block title %}
Topics to be Added
{% endblock %}

{% block content %}
	<a class="btn btn-primary float-right" href="{{ url_for('todo_topics_page', q=query, show_discarded=not show_discarded) }}">
		{% if not show_discarded %}
			Show
		{% else %}
			Hide
		{% endif %}

		Discarded Topics
	</a>

	<h1>Topics to be Added</h1>

	<p>
		{{ total - topic_count }} / {{ total }} topics have been added as packages to CDB.
		{{ topic_count }} remaining.
	</p>
	<div class="progress">
		{% set perc = 100 * (total - topic_count) /  total %}
		<div class="progress-bar bg-success" role="progressbar"
			style="width: {{ perc }}%" aria-valuenow="{{ perc }}" aria-valuemin="0" aria-valuemax="100"></div>
	</div>

	<form method="GET" action="{{ url_for('todo_topics_page') }}" class="my-4">
		<input class="" name="q" type="text" placeholder="Search topics" value="{{ query or ''}}">
		<input class="btn btn-secondary my-2 my-sm-0 mr-sm-2" type="submit" value="Search" />
	</form>

	{% from "macros/topics.html" import render_topics_table %}
	{{ render_topics_table(topics, show_discard=True) }}

	<ul class="pagination mt-4">
		<li class="page-item {% if not prev_url %}disabled{% endif %}">
			<a class="page-link" {% if prev_url %}href="{{ prev_url }}"{% endif %}>&laquo;</a>
		</li>
		{% for n in range(1, page_max+1) %}
			<li class="page-item {% if n == page %}active{% endif %}">
				<a class="page-link"
						href="{{ url_for('todo_topics_page', page=n) }}">
					{{ n }}
				</a>
			</li>
		{% endfor %}
		<li class="page-item {% if not next_url %}disabled{% endif %}">
			<a class="page-link" {% if next_url %}href="{{ next_url }}"{% endif %}>&raquo;</a>
		</li>
	</ul>
{% endblock %}

{% block scriptextra %}
	<script>
		var csrf_token = "{{ csrf_token() }}";
	</script>
	<script>
		$(".topic-discard").click(function() {
			var ele = $(this);
			var tid = ele.attr("data-tid");
			var discard = !ele.parent().parent().hasClass("discardtopic");
			fetch(new Request("{{ url_for('topic_set_discard') }}?tid=" + tid +
					"&discard=" + (discard ? "true" : "false"), {
				method: "post",
				credentials: "same-origin",
				headers: {
					"Accept": "application/json",
					"X-CSRFToken": csrf_token,
				},
			})).then(function(response) {
				response.text().then(function(txt) {
					console.log(JSON.parse(txt));
					if (JSON.parse(txt).discarded) {
						ele.parent().parent().addClass("discardtopic");
						ele.removeClass("btn-danger");
						ele.addClass("btn-success");
						ele.text("Show");
					} else {
						ele.parent().parent().removeClass("discardtopic");
						ele.removeClass("btn-success");
						ele.addClass("btn-danger");
						ele.text("Discard");
					}
				}).catch(console.log)
			}).catch(console.log)
		});
	</script>
{% endblock %}