{% load i18n %}
{% load tz %}
<div id="openassessment__staff-area" class="wrapper--staff-area">

    <div id="openassessment__staff-toolbar" class="wrapper--staff-toolbar">
        <button class="ui-staff__button button-staff-tools" data-panel="openassessment__staff-tools">{% trans "Staff Tools" %}</button>
        <button class="ui-staff__button button-staff-info" data-panel="openassessment__staff-info">{% trans "Staff Info" %}</button>
    </div>

    <div id="openassessment__staff-tools" class="wrapper--staff-tools wrapper--ui-staff is--hidden">
        <div class="staff-info ui-staff">
            <h2 class="staff-info__title ui-staff__title">
                <span class="staff-info__title__copy">{% trans "Course Staff Tools" %}</span>
                <button class="ui-staff_close_button"><span class="sr">{% trans "Close" %}</span> <i class="icon fa fa-close" aria-hidden="true"></i></button>
            </h2>

            <div class="staff-info__content ui-staff__content">

                <div class="staff-info__student ui-staff__content__section">
                    <div class="wrapper--input" class="staff-info__student__form">
                        <form id="openassessment_student_info_form">
                            <label for="openassessment__student_username" class="label">{% trans "Enter an individual learner's username or email" %}</label>
                            <input id="openassessment__student_username" type="text" class="value" maxlength="255">
                            <ul class="list list--actions">
                                <li class="list--actions__item">
                                    <a aria-role="button" href="" id="submit_student_username" class="action--submit"><span class="copy">{% trans "Submit" %}</span></a>
                                </li>
                            </ul>
                        </form>
                    </div>
                    <div id="openassessment__student-info" class="staff-info__student__report"></div>
                </div>

                {% if display_schedule_training %}
                    <div class="staff-info__classifierset ui-staff__content__section">
                        {% if classifierset %}
                            <table class="staff-info__classifierset__table">
                                <caption class="title">{% trans "Classifier set" %}</caption>
                                <thead>
                                <th abbr="Field" scope="col">{% trans "Field" %}</th>
                                <th abbr="Value" scope="col">{% trans "Value" %}</th>
                                </thead>
                                <tbody>
                                <tr>
                                    <td class="value">{% trans "Created at" %}</td>
                                    <td class="value">{{ classifierset.created_at }}</td>
                                </tr>
                                <tr>
                                    <td class="value">{% trans "Algorithm ID" %}</td>
                                    <td class="value">{{ classifierset.algorithm_id }}</td>
                                </tr>
                                <tr>
                                    <td class="value">{% trans "Course ID" %}</td>
                                    <td class="value">{{ classifierset.course_id }}</td>
                                </tr>
                                <tr>
                                    <td class="value">{% trans "Item ID" %}</td>
                                    <td class="value">{{ classifierset.item_id }}</td>
                                </tr>
                                </tbody>
                            </table>
                        {% else %}
                            {% trans "No classifiers are available for this problem" %}
                        {% endif %}
                    </div>

                    <div class="staff-info__status ui-staff__content__section">
                        <a aria-role="button" href="" id="schedule_training" class="action--submit"><span class="copy">{% trans "Schedule Example-Based Assessment Training" %}</span></a>
                        <div id="schedule_training_message"></div>
                    </div>
                {% endif %}

                {% if display_reschedule_unfinished_tasks %}
                    <div class="staff-info__status ui-staff__content__section">
                        <a aria-role="button" href="" id="reschedule_unfinished_tasks" class="action--submit"><span class="copy">{% trans "Reschedule All Unfinished Example-Based Assessment Grading Tasks" %}</span></a>
                        <div id="reschedule_unfinished_tasks_message"></div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

    <div id="openassessment__staff-info" class="wrapper--staff-info wrapper--ui-staff is--hidden">
        <div class="staff-info ui-staff">
            <h2 class="staff-info__title ui-staff__title">
                <span class="staff-info__title__copy">{% trans "Course Staff Information" %}</span>
                <button class="ui-staff_close_button"><span class="sr">{% trans "Close" %}</span> <i class="icon fa fa-close" aria-hidden="true"></i></button>
            </h2>

            <div class="staff-info__content ui-staff__content">

                <div class="staff-info__summary ui-staff__content__section">
                    <dl class="submissions--total">
                        <dt class="label">{% trans "Response total" %}:</dt>
                        <dd class="value">{{ num_submissions }}</dd>
                    </dl>
                </div>

                <div class="staff-info__status ui-staff__content__section">
                    {% trans "Location" %}: {{ item_id }}
                </div>

                <div class="staff-info__status ui-staff__content__section">
                    <table class="staff-info__status__table">

                        <caption class="title">{% trans "Learner Progress" %}</caption>

                        <thead>
                        <tr>
                            <th abbr="Step" scope="col">{% trans "Problem Step" %}</th>
                            <th abbr="# of Learners" scope="col">{% trans "Active Learners in Step" %}</th>
                        </tr>
                        </thead>

                        <tbody>
                        {% for item in status_counts %}
                            <tr>
                                <td class="label">{{ item.status }}</td>
                                <td class="value">{{ item.count }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>

                <div class="staff-info__status ui-staff__content__section">
                    <table class="staff-info__status__table">

                        <caption class="title">{% trans "Dates" %}</caption>

                        <thead>
                        <tr>
                            <th abbr="Problem Step" scope="col">{% trans "Problem Step" %}</th>
                            <th abbr="Release" scope="col">{% trans "Release Date" %}</th>
                            <th abbr="Due" scope="col">{% trans "Due Date" %}</th>
                        </tr>
                        </thead>

                        <tbody>
                        {% for item in step_dates %}
                            <tr>
                                <td class="label">{{ item.step }}</td>

                                {% if item.start %}
                                    <td class="value">{{ item.start|utc|date:"N j, Y H:i e" }}</td>
                                {% else %}
                                    <td class="value">{% trans "N/A" %}</td>
                                {% endif %}

                                {% if item.due %}
                                    <td class="value">{{ item.due|utc|date:"N j, Y H:i e" }}</td>
                                {% else %}
                                    <td class="value">{% trans "N/A" %}</td>
                                {% endif %}
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>