{{ block title }}
<center> Encryption trial </center>
{{ endblock }}

{{ block content }}

<div class="d-flex flex-column align-items-center">
    <h5> Example #<span id="iter-trial"></span> </h5>
    <p>Solved: <span id="solved-trial"></span> / 3 </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="Enter the 'code'"
               autocorrect="off" autocapitalize="off" spellcheck="false">
        <button type="button" id="submit-btn" class="btn btn-outline-secondary">Submit</button>
    </div>
    <p class="warn" id="warning-txt"></p>

    <button type="button" id="answer-btn" class="btn btn-green">Show answer</button>

</div>
<br>

{{ include Constants.instructions_template }}

{{ endblock }}

{{ block style }}
    <link href="{% static 'trial/trial.css' %}" rel="stylesheet"/>
    <style>
        .btn-green {
            background-color: #008C3C;
            color: white;
        }
        .btn-green:hover {
            background-color: #008C3C;
            color: white;
        }
        #answer-btn {
            display: none;
        }
    </style>
{{ endblock }}

{{ block scripts }}
<script src="{{ static 'trial/trial.js' }}"></script>
<script src="{{ static 'trial/trial_answer.js' }}"></script>
{{ endblock }}