{% extends "otree/Base.html" %}
{% load i18n %}
{% load otree static %}

{% block body_main %}
    <div class="otree-body container">
        <h2 class="otree-title page-header text-center">{% block title %}{% endblock %}</h2>

        <div class="instructions" style="max-width: 768px;">
            <div style="margin-left: auto; margin-right: auto">
                <p>
                    To get started, we need to identify you.<br>
                    Information on your first and last names and date of birth appears
                    only on the first page to allow us to identify you.
                    They are not recorded among the data collected.
                    Only a 10-digit number is stored.
                </p>
                <p>
                    When you enter the letters of your first and last name,
                    a drop-down menu with different options will appear,
                    in which you can search for your first and last name.
                </p>
                <p>
                    Warning: It is important that you <u> type all letters </u>
                    in order to see your name appear (and possibly that you test the options with and
                    without accent). When you enter only the first few letters,
                    you may not see your name appear.
                </p>
                {% if form.errors %}
                    <p style="text-align: center; color: red">
                        The last name, first name, and date of birth you entered do not appear
                        not coincide with our data. Could you please verify this information?
                    </p>
                {% endif %}
                <br>
                <form action="" method="post" role="form" id="form" autocomplete="off">
                    {% csrf_token %}
                    <div class="form-group row">
                        <div for="id_first_name" class="col-sm-4 col-form-label"><b>First and last name :</b></div>
                        <div class="col">{{ form.first_name }}</div>
                        <div class="col">{{ form.last_name }}</div>
                    </div>
                    <div class="form-group row">
                        <div for="id_first_name" class="col-sm-4 col-form-label"><b>Date of Birth :</b></div>
                        <div class="col-xs-6 ml-3">{{ form.dob_day }}</div>
                        <div class="col ml-4">{{ form.dob_month }}</div>
                    </div>
                    <br>
                    {% if form.errors %}
                        <input type="hidden" name="not_in_db" value="True">
                        <div class="form-group row">
                            <div for="id_first_name" class="col-sm-4 col-form-label"><b>Academy:</b></div>
                            <div class="col">{{ form.region }}</div>
                        </div>
                        <div class="form-group row">
                            <div for="id_first_name" class="col-sm-4 col-form-label"><b>Educational establishment :</b></div>
                            <div class="col">{{ form.school }}</div>
                        </div>
                        <div class="form-group row">
                            <div for="id_first_name" class="col-sm-4 col-form-label"><b>Discipline taught:</b></div>
                            <div class="col">{{ form.subject }}</div>
                        </div>
                        <div class="form-group row">
                            <div for="id_first_name" class="col-sm-12 col-form-label">
                                <b>Which class are you currently logging into the platform with?</b><br>
                                    <span style="font-size: smaller">(This information will allow us to send you a report on
                                        the non-cognitive skills of this particular class)</span></div>
                            <div class="col"><div class="">{{ form.classroom }}</div></div>
                        </div>
                        <br>
                    {% endif %}
                    <button class="otree-btn-next btn btn-primary">Confirm</button>
                </form>
            </div>
        </div>
    </div>
{% endblock %}

{% block internal_styles %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'otree/css/page.css' %}">
{% endblock %}

{% block internal_scripts %}
    {{ block.super }}
    {% comment %}
    <script id="websocket-redirect" src="{% static 'otree/js/page-websocket-redirect.js' %}"
            data-socket-url="{{ view.socket_url|safe }}"
            data-redirect-url="{{ view.redirect_url|safe }}">
    </script>
    {% endcomment %}
    {{ form.media|default:"" }}
{% endblock %}

{% block styles %}
    <link rel="stylesheet" type="text/css" href="{% static "intro/css/main.css" %}">
    <link rel="stylesheet" type="text/css" href="{% static "intro/css/typeahead.css" %}">
    <style>
        ul {list-style: none;}
    </style>
{% endblock %}

{% block scripts %}
    <script type="text/javascript" src="{% static "intro/js/typeahead.bundle.min.js" %}"></script>
    <script type="text/javascript" src="{% static "intro/js/teach_names.typeahead.js" %}"></script>
    <script type="text/javascript" src="{% static "intro/js/schools_classrooms.typeahead.js" %}"></script>
    <script>
        $(function () {
            if ($('#extra_fields').css('display') === 'block'){
                $("#extra_fields :input").prop('required', true);
            }
        })
    </script>
{% endblock %}