{% extends "courses/base_course.html" %}

{% load i18n asset_tags %}

{% block nav-course-reservations %}class="active"{% endblock %}

{% block extrajs %}

<script type="text/javascript">
    var cancelationForm;
    $(document).ready(function () {
        $('#past-reservations-message').css('cursor', 'pointer');
        $("#course-past-reservations").hide();
        $("#past-message-btn").click(function(){
            $("#course-past-reservations").toggle();
            if ($('#course-past-reservations').is(':visible')){
                $("#past-message").text("{% trans "Hide past reservations" %}");
            }else {
                $("#past-message").text("{% trans "Display past reservations" %}");
            }
        });
        $(".btn-remove").click(function(evt) {
            evt.preventDefault();
            cancelationForm = evt.target.form;
            $("#confirm-cancelation").modal({ show: true });
        });
        $("#confirmBtn").click(function(evt) {
            evt.preventDefault();
            $("#confirm-cancelation").modal("hide");
            cancelationForm.submit();
        });
    });
</script>
{% endblock %}

{% block content %}

<div id="confirm-cancelation" class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>{% trans "Confirm cancelation" %}</h3>
    </div>
    <div class="modal-body">
        <p>{% trans "Are you completely sure you want to cancel the registration? You cannot undo this action." %}</p>
    </div>
    <div class="modal-footer">
        <!-- Using "Cancel" for closing the modal doing nothing might be confusing, the user might think that
             the reservation is what is being cancelled. -->
        <button type="button" class="btn" data-dismiss="modal">{% trans "Back" %}</button>
        <button type="button" class="btn btn-danger" id="confirmBtn">{% trans "Confirm cancelation" %}</button>
    </div>
</div>

{% if active_reservations %}
<h2>{% trans "Active Reservations" %}</h2>
<div id="course-active-reservations" class="well">
    {% for reservation in active_reservations %}
    <h3>{% blocktrans with asset_name=reservation.asset kq_title=reservation.reserved_from.kq.title%}
    {{ asset_name}} of {{kq_title }}   {% endblocktrans %} </h3>
    <ul id="active-reservation{{ reservation.id }}" >
        {% blocktrans with from=reservation.reservation_begins to=reservation.reservation_ends slot_id=reservation.slot_id concurrent=reservation.concurrent %}
        <li> From: {{ from }} </li>
        <li> To:  {{ to }} </li>
        <li> Slot: {{slot_id}} </li>
        <li> Students sharing this slot: {{concurrent}} </li>
        {% endblocktrans %}
        <div class="row">
            <div class="align-right ">
                <form action="{{ reservation.asset.asset_url }}" id="r{{ reservation.id }}-form" method="post">{% csrf_token %}
                    <input type="hidden" name="reservation_id" value="{{ reservation.id }}" />
                    <input type="submit" value="{% trans "Activate" %}" class="btn" id="r{{ reservation.id }}-goBtn" />
                </form>
            </div>
        </div>
    </ul>
    {% endfor %}
</div>
{% endif %}

<h2>{% trans "Pending Reservations" %}</h2>
{% if pending_reservations %}
<div id="course-pending-reservations" class="well">
    {% for reservation in pending_reservations %}
    <h3>{% blocktrans with asset_name=reservation.asset kq_title=reservation.reserved_from.kq.title%}
    {{ asset_name}} of {{kq_title }}   {% endblocktrans %} </h3>
    <ul id="pending-reservation{{ reservation.id }}" >
        {% blocktrans with from=reservation.reservation_begins to=reservation.reservation_ends slot_id=reservation.slot_id concurrent=reservation.concurrent %}
        <li> From: {{ from }} </li>
        <li> To:  {{ to }} </li>
        <li> Slot: {{ slot_id }} </li>
        <li> Students sharing this slot: {{concurrent}} </li>
        {% endblocktrans %}
        <div class="row">
            <div class="align-right ">
                <form action="{% url cancel_reservation course.slug reservation.id %}" id="r{{ reservation.id }}-form" method="post">{% csrf_token %}
                    <input type="submit" value="{% trans "Remove" %}" class="btn btn-danger btn-remove" id="r{{ reservation.id }}-removeBtn" />
                </form>
            </div>
        </div>
    </ul>
    {% endfor %}
</div>
{% else %}
{% trans "You do not have any pending asset reservation for this course." %}
{% endif %}

{% if past_reservations %}
<h2>{% trans "Past Reservations" %}</h2>
<div id="past-reservations-message">
    <button class="btn" id="past-message-btn">
    <span class="icon-info-sign"></span>
    <span id="past-message">{% trans "Display past reservations" %}</span>
    </button>
</div>
<br/>

<div id="course-past-reservations" class="well">
    {% for reservation in past_reservations %}
    <h3>{% blocktrans with asset_name=reservation.asset kq_title=reservation.reserved_from.kq.title%}
    {{ asset_name}} of {{kq_title }}   {% endblocktrans %} </h3>
    <ul id="past-reservation{{ reservation.id }}" >
        {% blocktrans with from=reservation.reservation_begins to=reservation.reservation_ends slot_id=reservation.slot_id concurrent=reservation.concurrent %}
        <li> From: {{ from }} </li>
        <li> To:  {{ to }} </li>
        <li> Slot: {{slot_id}} </li>
        <li> Students sharing this slot: {{concurrent}} </li>
        {% endblocktrans %}
    </ul>
    {% endfor %}
</div>
{% endif %}

{% endblock %}