{% extends popup_view|yesno:"base/popup.html,base.html" %}
{% load custom_tags_and_filters %}
{% load tz %}
{% if not popup_view %}
    {% block extrahead %}
        <script type="text/javascript">
    function callback_success(){
        // if on a standalone page, reload the browser window to display the results of the change to the reservation
        location.reload()
    }

    function cancel_reservation(url, reservation_id, reason)
    {
        let failure_dialog = ajax_failure_callback("Unable to cancel this reservation");
        let contents = undefined;
        if(reason)
        {
            contents = {'reason': reason};
        }
        ajax_post(url, contents, callback_success, [failure_dialog, callback_success]);
    }


    function set_reservation_title(url, reservation_id, title)
    {
        let failure_dialog = ajax_failure_callback("Unable to set reservation title");
        ajax_post(url, {'title': title}, callback_success, [failure_dialog]);
    }

    function change_reservation_date(url, reservation_id, param, value)
    {
        let failure_dialog = ajax_failure_callback("Unable to change reservation date");
        let data = {'id': reservation_id};
        data[param] = value;
        ajax_post(url, data, callback_success, [failure_dialog]);
    }

    function change_reservation_project(url, project_id)
    {
        let failure_dialog = ajax_failure_callback("Unable to change reservation project");
        function callback_failure(){
            $('#reservation_project').show();
            $('#reservation_change_project').hide();
        }
        ajax_post(url, {'project_id': project_id}, callback_success, [failure_dialog, callback_failure]);
    }
        </script>
    {% endblock %}
{% endif %}
{% block title %}{{ reservation.reservation_item }} reservation details{% endblock %}
{% block content %}
    {% if not popup_view %}<h1>{{ reservation.reservation_item }} reservation details</h1>{% endif %}
    {% if reservation.short_notice %}
        <div class="alert alert-danger">
            {{ facility_name }} staff were not given sufficient notice to configure this tool. There is no guarantee that this tool will be configured properly at time of use.
        </div>
    {% endif %}
    {% if reservation.missed %}
        <div class="alert alert-danger">
            This reservation was automatically removed from the calendar due to {{ reservation.reservation_item_type.value }} inactivity.
        </div>
    {% endif %}
    <table class="table table-striped" style="margin-bottom: 0">
        {% if user.is_staff %}
            <tr>
                <td style="vertical-align: middle">
                    <label for="title">Title:</label>
                </td>
                <td>
                    <div class="input-group">
                        <input type="text"
                               id="title"
                               class="form-control"
                               placeholder="{{ reservation.user }}"
                               maxlength="200"
                               value="{{ reservation.title }}">
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-success" data-dismiss="modal" onclick="{% if popup_view %}$('#dialog').one('hidden.bs.modal', function() {
                            {% endif %}
                            set_reservation_title('{% url 'set_reservation_title' reservation.id %}', {{ reservation.id }}, $('#title').val()) {% if popup_view %}}){% endif %}
                        ">Set title</button>
                </span>
            </div>
        </td>
    </tr>
{% elif reservation.title %}
    <tr>
        <td>Title:</td>
        <td>{{ reservation.title }}</td>
    </tr>
{% endif %}
<tr>
    <td>User:</td>
    <td>
        <a title="Click to email this user" href="{% url 'get_email_form_for_user' reservation.user.id %}">{{ reservation.user }}</a>
    </td>
</tr>
<tr>
    <td>Created by:</td>
    <td>{{ reservation.creator }}</td>
</tr>
<tr>
    <td>Created on:</td>
    <td>{{ reservation.creation_time }}</td>
</tr>
{% if reservation.tool %}
    <tr>
        <td>Tool:</td>
        <td>
            <a title="Click to go to the tool control page for this tool"
               href="{% url 'tool_control' reservation.tool.id %}">{{ reservation.tool }}</a>
        </td>
    </tr>
    {% if reservation.tool_accessories %}
        <tr>
            <td>Selected accessories:</td>
            <td>{{ reservation.tool_accessories.all|join:", " }}</td>
        </tr>
    {% endif %}
{% elif reservation.area %}
    <tr>
        <td>Area:</td>
        <td>{{ reservation.area }}</td>
    </tr>
{% endif %}
{% if reservation.project %}
    <tr id="reservation_project">
        <td style="vertical-align: middle;">Project:</td>
        <td>
            {{ reservation.project }}
            {% if reservation_project_can_be_changed %}
                <span class="glyphicon glyphicon-pencil pull-right"
                      title="Change the project"
                      onclick="$('#reservation_project').hide();$('#reservation_change_project').show();"></span>
            {% endif %}
        </td>
    </tr>
    {% if reservation_project_can_be_changed %}
        <tr id="reservation_change_project" style="display: none;">
            <td style="vertical-align: middle;">
                <label for="change_project">Project:</label>
            </td>
            <td>
                <div class="input-group">
                    <select id="change_project" name="project" aria-label="Reservation project" class="form-control">
                        {% for p in reservation.user.active_projects %}
                            <option value="{{ p.id }}" {% if reservation.project.id == p.id %}selected{% endif %}>
                                {% project_selection_display p %}
                            </option>
                        {% endfor %}
                    </select>
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-success" data-dismiss="modal" onclick="{% if popup_view %}$('#dialog').one('hidden.bs.modal', function() {
                        {% endif %}
                        change_reservation_project('{% url 'change_reservation_project' reservation.id %}', $('#change_project').val()) {% if popup_view %}}){% endif %}
                    ">Change project</button>
            </span>
        </div>
    </td>
</tr>
{% endif %}
{% endif %}
<tr>
    {% if request.user == reservation.user and reservation.has_not_ended and reservation.has_not_started %}
        <td style="vertical-align: middle">
            <label for="reservation_start" style="margin-bottom: 0">Start:</label>
        </td>
        <td id="reservation_display_start">
            {{ reservation.start }}
            <span class="glyphicon glyphicon-pencil pull-right"
                  title="Change the start date"
                  onclick="$('#reservation_display_start').hide();$('#reservation_change_start').show();"></span>
        </td>
        <td id="reservation_change_start" style="display: none">
            <div class="input-group">
                <input type="text"
                       id="reservation_start"
                       class="form-control"
                       value="{{ reservation.start|localtime|input_date_format }}">
                <span class="input-group-btn">
                    <button type="button" class="btn btn-success" data-dismiss="modal" onclick="{% if popup_view %}$('#dialog').one('hidden.bs.modal', function() {
                    {% endif %}
                    change_reservation_date('{% url 'change_reservation_date' %}', {{ reservation.id }}, 'new_start', $('#reservation_start').val()) {% if popup_view %}}){% endif %}
                ">Change start</button>
        </span>
    </div>
</td>
{% else %}
<td>Start:</td>
<td>{{ reservation.start }}</td>
{% endif %}
</tr>
<tr>
    {% if request.user == reservation.user and reservation.has_not_ended and reservation.has_not_started %}
        <td style="vertical-align: middle">
            <label for="reservation_end" style="margin-bottom: 0">End:</label>
        </td>
        <td id="reservation_display_end">
            {{ reservation.end }}
            <span class="glyphicon glyphicon-pencil pull-right"
                  title="Change the end date"
                  onclick="$('#reservation_display_end').hide();$('#reservation_change_end').show();"></span>
        </td>
        <td id="reservation_change_end" style="display: none">
            <div class="input-group">
                <input type="text"
                       id="reservation_end"
                       class="form-control"
                       value="{{ reservation.end|localtime|input_date_format }}">
                <span class="input-group-btn">
                    <button type="button" class="btn btn-success" data-dismiss="modal" onclick="{% if popup_view %}$('#dialog').one('hidden.bs.modal', function() {
                    {% endif %}
                    change_reservation_date('{% url 'change_reservation_date' %}', {{ reservation.id }}, 'new_end', $('#reservation_end').val()) {% if popup_view %}}){% endif %}
                ">Change end</button>
        </span>
    </div>
</td>
{% else %}
<td>End:</td>
<td>{{ reservation.end }}</td>
{% endif %}
</tr>
<tr>
    <td>Identifier:</td>
    <td>{{ reservation.id }}</td>
</tr>
{% if reservation.question_data_json.items %}
    <tr>
        <td>Reservation questions:</td>
        <td style="padding: 0;">
            <table class="table table-striped" style="margin-bottom: 0;">
                {% for question_name, data in reservation.question_data_json.items %}
                    {% if not data.readonly %}
                        {% if data.type == 'group' %}
                            <tr>
                                <td {% if forloop.first %}style="border-top:none;"{% endif %}>
                                    {{ data.title }}
                                    {% if data.title|slice:"-1:" != ":" %}:{% endif %}
                                </td>
                                <td style="padding: 0;{% if forloop.first %}border-top:none;{% endif %}">
                                    <table class="table table-striped" style="margin-bottom: 0;">
                                        {% res_question_tbody data.user_input %}
                                    </table>
                                </td>
                            </tr>
                        {% else %}
                            <tr>
                                <td {% if forloop.first %}style="border-top:none;"{% endif %}>
                                    {{ data.title }}
                                    {% if data.title|slice:"-1:" != ":" %}:{% endif %}
                                </td>
                                <td {% if forloop.first %}style="border-top:none;"{% endif %}>{{ data.user_input|linebreaksbr }}</td>
                            </tr>
                        {% endif %}
                    {% endif %}
                {% endfor %}
            </table>
        </td>
    </tr>
{% endif %}
{% if reservation.self_configuration %}
    <tr>
        <td>Self-configuration:</td>
        <td>{{ reservation.user }} has opted to perform the tool configuration</td>
    </tr>
{% endif %}
{% if reservation.configurationoption_set.exists %}
    <tr>
        <td>Configuration:</td>
        <td>
            {% for config_option in reservation.configurationoption_set.all %}
                {{ config_option.name }}
                {% if config_option.precursor_configuration %}
                    {% if config_option.current_position is None %}
                        any position
                    {% else %}
                        position {{ config_option.current_position }}
                    {% endif %}
                {% endif %}
                :
                {% if config_option.get_color %}
                    <span class="configuration-reservation-option" style="background-color: {{ config_option.get_color }}">{{ config_option.current_setting }}</span>
                {% else %}
                    {{ config_option.current_setting }}
                {% endif %}
                <br>
            {% endfor %}
        </td>
    </tr>
{% endif %}
{% if reservation.additional_information %}
    <tr>
        <td>Additional information:</td>
        <td>{{ reservation.additional_information|linebreaksbr }}</td>
    </tr>
{% endif %}
</table>
{# Allow the user to cancel the reservation if they have that privilege. #}
{% if not reservation.missed and not reservation.cancelled %}
    {% if reservation.user.id == user.id and reservation.has_not_ended or user.is_staff %}
        <div class="modal-footer" style="padding: 15px 0 0 0;">
            {# You must provide a reason if you are cancelling someone else's reservation. #}
            {% if reservation.user == user %}
                <button type="button" class="btn btn-danger" data-dismiss="modal" onclick="{% if popup_view %}$('#dialog').one('hidden.bs.modal', function() {
                {% endif %}
                cancel_reservation('{% url 'cancel_reservation' reservation.id %}', 'Reservation {{ reservation.id }}') {% if popup_view %}}){% endif %}
            " title="Cancel this reservation">
            <i class="glyphicon glyphicon-trash"></i> Cancel this reservation
        </button>
    {% else %}
        <div class="input-group">
            <input type="text"
                   id="reason"
                   class="form-control"
                   placeholder="Reason for cancellation (required)"
                   aria-label="Reason for cancellation (required)"
                   maxlength="3000">
            <span class="input-group-btn">
                <button type="button" class="btn btn-danger" data-dismiss="modal" onclick="{% if popup_view %}$('#dialog').one('hidden.bs.modal', function() {
                {% endif %}
                cancel_reservation('{% url 'cancel_reservation' reservation.id %}', 'Reservation {{ reservation.id }}', $('#reason').val()) {% if popup_view %}}){% endif %}
            " title="Cancel this reservation">
            <i class="glyphicon glyphicon-trash"></i> Cancel this reservation
        </button>
    </span>
</div>
<script>autofocus("#reason");</script>
{% endif %}
</div>
{% endif %}
{% endif %}
{% if popup_view and reservation.question_data_json.items %}
    <script>$('#dialog .modal-dialog').addClass('modal-lg');</script>
{% endif %}
{% endblock %}
