{% extends "mobile/base.html" %}

{% block content %}

<script>

function identify() {
    var loader = document.getElementById("loader");
    var question_p = document.getElementById("question_p");
    var options_p = document.getElementById("options_p");
    var image_in = document.getElementById("image_in");
    var btn_identify = document.getElementById("btn_identify");
    var p_result = document.getElementById("identification_result");
    var p_upload = document.getElementById("p_upload");
    var p_help = document.getElementById("p_help");
    btn_identify.classList.toggle("hidden");
    image_in.classList.toggle("hidden");
    loader.classList.toggle("hidden");
    p_upload.classList.toggle("hidden");
    setTimeout(function () {
            question_p.classList.toggle("hidden");
            options_p.classList.toggle("hidden");
            loader.classList.toggle("hidden");
            p_result.classList.toggle("hidden");
            p_help.classList.toggle("hidden");
        }, 2000);
}

</script>

<h1>Scan a blooming tree!</h1>

<p id="p_help">We will help you identifying the tree you are hunting.</p>

<p id="p_upload">Just upload a picture of your tree<p>

<input id="image_in" type="file" accept="image/*" capture="camera" />

<br>

<button id="btn_identify" class="btn btn-default" onclick="identify()">Identify the tree</button>

<div id="loader" class="loader hidden"></div> 

<p id="identification_result" class="hidden">We were able to identify your tree as a <b>Apple
    Tree</b>. We need only some further questions to identify the exact species</p>

<p id="question_p" class="hidden">{{ question.text }}</p>

<table id="options_p" class="hidden">
    <tr>

{% for option in question.options %}
<td width=30%>
<form action="" method="post">
    {% csrf_token %}
    <input name="question" type="hidden" value="{{ question.key }}">
    <input name="chosen_option" class="btn btn-default" type="submit" value="{{ option.text }}">
</form>
</td>
{% endfor %}
    </tr>
</table>

{% endblock %}