{% extends popup_view|yesno:"base/popup.html,base.html" %}
{% load custom_tags_and_filters %}

{% 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_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">

	{% if user.is_staff %}
    <tr>
        <td style="vertical-align: middle">Title:</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>
    {% 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;">Project:</td>
                <td>
                    <div class="input-group">
                        <select id="change_project" name="project" class="form-control">
                            {% for p in reservation.user.active_projects %}
                                <option value="{{ p.id }}" {% if reservation.project.id == p.id %}selected{% endif %}>{{ 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>
        <td>Start:</td>
        <td>{{ reservation.start }}</td>
    </tr>
    <tr>
        <td>End:</td>
        <td>{{ reservation.end }}</td>
    </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 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 %}
            {% 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.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 priviledge. #}
    {% 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">
                {# 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 %}">Cancel this reservation</button>
                {% else %}
                    <div class="input-group">
                        <input type="text" id="reason" class="form-control" placeholder="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 %}">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 %}