{% block styles  %}
    <link href="{{ static 'count_numbers_group/count_numbers.css' }}" rel="stylesheet"/>
{% endblock %}

{{ block title }}
Ziffer {{C.COUNTED_CHARS}} zählen
{{ endblock }}

{{ block content }}
<div class="d-flex flex-column align-items-center">
    <h3>
        Bitte zählen Sie die Anzahl der Ziffer {{C.COUNTED_CHARS}} in dem angezeigten Zahlenblock.
        <!--Iteration <span id="iter-txt"></span>-->
    </h3>
    <p>richtig gelöst: <span id="solved-txt"></span></p>
    <img class="captcha m-1" id="captcha-img">

    <div class="input-group m-1">
        <input type="{{ input_type }}" id="answer-inp" class="form-control"
               placeholder="{{ placeholder }}"
               autocorrect="off" autocapitalize="off" spellcheck="false">


        <button type="button" id="submit-btn" class="btn btn-outline-secondary next nexttab ">OK</button>


    </div>

    <p class="warn" id="warning-txt"></p>

    {{ if DEBUG }}

    {{ endif }}
</div>
<br>

<p>
    <i>(Der "Weiter"-Button erscheint nach 60 Sekunden.)</i>
</p>

<div id="next-button" style="text-align: center; display: none;">
{{ next_button }}
</div>

<script>
    setTimeout(function() {
    document.getElementById('next-button').style.display = 'block';
    }, 60 * 1000);
</script>
{{ endblock }}


{{ block scripts }}
<script src="{{ static 'unmasking_corporate_hypocrisy/count_numbers.js' }}"></script>
{{ if DEBUG }}<script src="{{ static 'unmasking_corporate_hypocrisy/count_numbers_cheating.js' }}"></script>{{ endif }}

{{ endblock }}