<div class="alert {% if reservation.start < now %}alert-warning{% else %}alert-success{% endif %}" role="alert" onclick="tool_information('{% url 'kiosk_tool_information' reservation.tool.id customer.id 'back_to_start' %}')">
    <strong>
        {% if reservation.title %}{{ reservation.title }} ({% endif %}
        {% if reservation.start < now %}You're late for your {% endif %}
        <span style="cursor:pointer;text-decoration: underline">{{ reservation.tool }}</span>
        {% if reservation.start < now %} reservation!{% endif %}
        {% if reservation.title %}){% endif %}
    </strong>
    <br>
    Starting {{ reservation.start }}<br>
    Ending {{ reservation.end }}<br>
    <div>
        {% for question_name, data in reservation.question_data_json.items %}
            {{ question_name }}: {{ data.user_input }}<br>
        {% endfor %}
        <div style="height:10px">{# Vertical spacer #}</div>
        {% if reservation.project %}
            For project {{ reservation.project }}<br>
        {% endif %}
        <span style="white-space: pre-line">Created by {{ reservation.creator }} {% if reservation.user != reservation.creator %} on behalf of {{ reservation.user }}{% endif %} on {{ reservation.creation_time}}</span><br>
        {% if reservation.self_configuration %}
            <strong>You have elected to configure this tool yourself.</strong><br>
        {% else %}
            {% if reservation.short_notice %}
                <strong>This reservation was created on short notice. Tool configuration is not guaranteed upon start time.</strong><br>
            {% endif %}
        {% endif %}
        {% if reservation.additional_information %}
            Additional information:<br>
            {{ reservation.additional_information|linebreaksbr }}
        {% endif %}
        {# Allow the user to cancel the reservation if they have that priviledge. #}
        {% if not reservation.missed and not reservation.cancelled %}
            {% if reservation.user.id == customer.id and reservation.has_not_ended %}
                <div style="height:10px">{# Vertical spacer #}</div>
                <form id="cancel_reservation_{{ reservation.id }}" method="post">
                    {% csrf_token %}
                    <input type="hidden" name="customer_id" value="{{ customer.id }}">
                    <button id="cancel_reservation_button_{{ reservation.id }}" type="submit" class="btn btn-danger">Cancel this reservation</button>
                </form>
                <script>
                $("#cancel_reservation_button_{{ reservation.id }}").on('click', function(e)
                {
                    cancel_reservation('{% url 'cancel_reservation_from_kiosk' reservation.id %}', '{{ reservation.id }}');
                    e.stopPropagation();
                });
                </script>
            {% endif %}
        {% endif %}
    </div>
</div>