{% extends 'base.html' %}
{% load static %}

{% block style %}
<link rel="stylesheet" href="{% static 'css/home.css' %}">
<link rel="stylesheet" href="{% static 'css/annotations.css' %}">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<link rel="icon" href="{% static 'image/favicon.ico' %}">
{% endblock %}

{% block body %}

<div class="container-fluid">
	<h5> {{ message }} </h5>
	<ul id="errors">
	  {% if downloader_form.non_field_errors %}
		<li>{{ downloader_form.non_field_errors }}</li>
	  {% endif %}
	  {% for field in downloader_form %}
		{% if field.errors %}
		  <li>
			{{ field.label }}
			<ul>
			  {% for error in field.errors %}
				<li>{{ error }}</li>
			  {% endfor %}
			</ul>
		  </li>
		{% endif %}
	  {% endfor %}
	</ul>
{% if is_valid %}
	<h6> For any update on your previous information, contact <a href="mailto:contact@cogstack.org">contact@cogstack.org</a>. </h6>
	<form action="{% url 'download-model' %}" method="post">
		{% csrf_token %}
		{% for field in downloader_form.visible_fields %}
			{% if field.name != 'consent' and field.name != 'modelpack' %}
				<div class="form-group">
					<label for="id_{{ field.name }}">{{ field.label }}:</label><br>
					{{ field }}
				</div>
			{% endif %}
		{% endfor %}
		<div class="form-group">
			{{ downloader_form.modelpack.label }}:<br>
            {% for radio in downloader_form.modelpack %}
				{{ radio }}<br>
			{% endfor %}
	</div>
		{{ downloader_form.consent }} {{ downloader_form.consent.label }} <br><br>
		<input type="submit" value="Submit" class="btn btn-primary" onClick="document.querySelector('#errors').remove(); this.form.submit(); this.disabled=true; this.value='Downloading'; ">
	</form>
{% endif %}
</div>

<!-- external js -->
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
<script type="text/javascript">
    function getData() {
        let doc_json = {{doc_json | safe}};
        return doc_json;
    };
</script>
<script src="{% static 'js/anns.js' %}"></script>
{% endblock %}
