{% extends 'portal/teach/base_registering.html' %}
{% load static %}
{% load app_tags %}

{% block content %}

{% if onboarding_done %}
<section class="banner banner--teacher row mx-0 flex-column">
    <h5>Class and class access code:</h5>
    <h1 class="banner__text--primary mt-3 mb-4">{{ class.name }}, ({{ class.access_code }})</h1>
    <h5>{{ user.new_teacher.school.name }}</h5>
</section>
{% endif %}

<div id="onboarding_student_list_page"></div>

<div id="sticky-warning" class="sub-nav--warning">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 sub-nav">
                <span class="iconify sub-nav--icon" data-icon="mdi:alert-outline"></span>
                <p class="flex-grow-1">
                    <small><strong>This is the only time you will be able to view this page. You can print reminder cards or download as a CSV file.</strong></small>
                </p>
                <form target="_blank" method="post" action="{% url 'teacher_print_reminder_cards' class.access_code %}">
                    {% csrf_token %}
                    <input type="hidden" name="data" value="{{ query_data }}"/>
                    <div class="section">
                        <button class="button button--secondary button--icon" type="submit">
                            Print reminder cards
                            <span class="iconify" data-icon="mdi:printer"></span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="background container">
    <div class="row">
        <div class="form col-sm-12">
            {% if not onboarding_done %}
                <h4>Student login details</h4>

                <p class="mb-3">Progress &lt; 4 of 4 &gt;</p>
                <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
                        <span class="sr-only">100% Complete</span>
                    </div>
                </div>
            {% endif %}

            {% if passwords_reset %}
            <h5>Students' passwords reset for class {{ class.name }} ({{ class.access_code }})</h5>
            <p>The following students have had their passwords reset:</p><br>
            {% else %}
            <p>
                The following credentials have been created for your class. When they log in for the first time, you may want students to change their
                passwords to something more memorable. You can reset these details for them at any time.
            </p>
            <p>
                To log on, they will need to enter their name and passwords. Alternatively, you can provide them with a direct access link from the
                table below.
            </p>
            <p class="text-danger">
                <strong>
                    You will not be shown this page again, so please make sure you retain a copy of the passwords for your records. You can print the
                    reminder cards from the button below. Please ensure you share student passwords securely.
                </strong>
            </p>
            {% endif %}
            <div class="d-flex">
                <table id="student_table" class="col-sm-12 header-primary data-primary">
                    <tr>
                        <th class="col-xs-6" colspan="2"><p>Option 1 Login details</p></th>
                        <th class="no-bg"></th>
                        <th class="col-xs-6"><p>Option 2 Login links</p></th>
                    </tr>
                    <tr>
                        <td colspan="2" class="mw-0">
                            <div class="d-flex">
                                <div><small>Class link:</small></div>
                                <div id="class_url" class="flex-grow-1 mx-1 text-truncate"><small>{{ class_url }}</small></div>
                                <div>
                                    <a onclick="copyToClipboardFromElement(this, '#class_url')" data-toggle="copyToClipboardTooltip">
                                        <span class="iconify" data-icon="mdi:content-copy" title="Copy to clipboard"></span>
                                    </a>
                                </div>
                            </div>
                        </td>
                        <td class="no-bg"><div class="or-circle d-none d-lg-block">OR</div></td>
                        <td><p><small><strong>No class code or password required</strong></small></p></td>
                    </tr>
                    <tr class="header-secondary">
                        <th><p>Name</p></th>
                        <th><p>Password</p></th>
                        <th class="no-bg"></th>
                        <th><p>Copy the links below and share with the student</p></th>
                    </tr>
                    {% for student_info in students_info %}
                    <tr>
                        <td><p><small>{{ student_info.name }}</small></p></td>
                        <td><p><small>{{ student_info.password }}</small></p></td>
                        <td class="no-bg"></td>
                        <td class="mw-0">
                            <div class="d-flex align-items-center">
                                <div id="student_{{ student_info.id }}_url" class="flex-grow-1 mx-1 text-truncate"><small>{{ student_info.login_url }}</small></div>
                                <div>
                                    <a onclick="copyToClipboardFromElement(this, '#student_{{ student_info.id }}_url')" data-toggle="copyToClipboardTooltip">
                                        <span class="iconify" data-icon="mdi:content-copy" title="Copy to clipboard"></span>
                                    </a>
                                </div>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </table>
            </div>
            <section>

                <div class="d-flex justify-content-between mb-5">
                    <form target="_blank" method="post" action="{% url 'teacher_print_reminder_cards' class.access_code %}" class="p-0">
                        {% csrf_token %}
                        <input type="hidden" name="data" value="{{ query_data }}"/>
                        <button class="button button--primary button--icon m-0" type="submit">
                            Print password reminder cards
                            <span class="iconify" data-icon="mdi:printer"></span>
                        </button>
                    </form>

                    <form target="_blank" method="post" action="{% url 'teacher_download_csv' class.access_code %}" class="p-0">
                        {% csrf_token %}
                        <input type="hidden" name="data" value="{{ query_data }}"/>
                        <button class="button button--primary button--icon m-0" type="submit">
                            Download CSV
                            <span class="iconify" data-icon="mdi:tray-arrow-down"></span>
                        </button>
                    </form>
                </div>

                {% if onboarding_done %}
                    <div class="d-flex">
                        <a id="back_to_class_button" href="{% url 'view_class' class.access_code %}" class="button button--secondary button--secondary--dark m-0">
                            <div class="d-flex align-items-center">
                                <span class="iconify mr-3" data-icon="mdi:chevron-left"></span>
                                <div>Back to class</div>
                            </div>
                        </a>
                    </div>
                {% else %}
                    <div class="d-flex justify-content-end">
                        <form method="post" action="{% url 'dashboard' %}" class="p-0">
                            {% csrf_token %}
                            <input type="hidden" name="show_onboarding_complete" value="1"/>
                            <button id="complete_setup_button" class="button button--secondary button--secondary--dark button--icon m-0" type="submit">
                                Complete set up
                                <span class="iconify" data-icon="mdi:check"></span>
                            </button>
                        </form>
                    </div>
                {% endif %}
            </section>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        if($(window).width() > 760) {
            toggleStickySubnav($('.banner').outerHeight());
        }
    });
</script>

{% endblock content %}
