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

{% block subNav %}
    {% include "portal/partials/teacher_non_dashboard_subnav.html" %}
{% endblock subNav %}

{% block content %}
<div id="edit_student_page"></div>

<section id="student_details" class="background container">
    <h4>Edit student details for {{ student.new_user.first_name }} from class {{ student.class_field.name }} ({{ student.class_field.access_code }})</h4>
</section>

<div class="background">
    <div class="container">
        <p><a href="{% url 'view_class' class.access_code %}" class="button--menu button--menu--enabled" >&lt; Back to Edit class</a></p>
        <p>Edit this student's name and manage their password and direct access link.</p>
        <h5>Update name</h5>

        <p>Remember this is the name they use to log in with, so you should tell them what you've changed it to.</p>

        <form id="form-edit-student" method="post">

            {% csrf_token %}

            {{ name_form.non_field_errors }}
            <div class="row form-row">
                <div class="form--row__input col-sm-6 col-md-6">
                    {{ name_form.name }}
                    {{ name_form.name.errors }}
                    <small>{{ name_form.name.help_text }}</small>
                </div>
            </div>
            <button id="update_name_button" type="submit" name="update_details" class="button button--primary">Update</button>

        </form>

        <h5 id="set-password">Update password</h5>

        <p>You can set this student's password. Setting the password will also regenerate their direct access link.</p>

        <form id="edit-student-password-form" method="post">

            {% csrf_token %}

            <p>Enter and confirm the password in the boxes below. Try to prevent others from being able to guess the new
                password when making this decision.</p>

            {{ password_form.non_field_errors }}

            <div class="row form-row">
                <div class="form--row col-sm-6 col-md-6">
                    <div class="input--icon">
                        {{ password_form.password }} <span id="password-field-icon" class="iconify" data-icon="material-symbols:visibility-off"></span>
                    </div>
                    {{ password_form.password.errors }}
                    <small>{{ password_form.password.help_text}}</small>
                </div>
            </div>

            <div class="row form-row">
                <div class="form--row col-sm-6 col-md-6">
                    <div class="input--icon">
                        {{ password_form.confirm_password }} <span id="confirm-password-field-icon" class="iconify" data-icon="material-symbols:visibility-off"></span>
                    </div>
                    {{ password_form.confirm_password.errors }}
                    <small>{{ password_form.confirm_password.help_text }}</small>
                </div>
            </div>
            <button id="set_new_password_button" type="submit" name="set_password" class="button button--primary">Update</button>
        </form>
    </div>
</div>

<script type="text/javascript" src="{% static 'portal/js/teacherEditStudent.js' %}"></script>

{% endblock %}
