{% load custom_tags_and_filters %}
<div class="row" style="margin-top:30px">
    <div class="col-xs-offset-3 col-xs-6" onclick="revert()">
        <div class="alert alert-warning" style="text-align:center; margin-bottom:0">
            <span style="font-size:x-large">I've finished using this kiosk</span>
        </div>
    </div>
</div>
{% if messages %}
    {% for message in messages %}
        <div class="alert alert-{{ message.level_tag }} alert-dismissible show-on-load"
             {% if message.extra_tags %}{{ message.extra_tags }}{% endif %}
             style="display: none;
                    margin-top: 15px">
            <button type="button" class="close" data-dismiss="alert" aria-label="Modal close button">&times;</button>
            {{ message }}
        </div>
    {% endfor %}
{% endif %}
{% if usage_events %}
    <h1>Current {{ facility_name }} use</h1>
    <div class="row">
        {% for u in usage_events %}
            <div class="col-xs-6">
                <div class="alert alert-info"
                     onclick="tool_information('{% url 'kiosk_tool_information' u.tool.tool_or_parent_id customer.id 'back_to_start' %}')">
                    <span style="font-size:x-large">{{ u.tool }}</span>
                    <br>
                    You are using this tool for the project named <strong>{{ u.project }}</strong> since <strong>{{ u.start|date:"MONTH_DAY_FORMAT" }} @ {{ u.start|time }}</strong>
                </div>
            </div>
        {% endfor %}
    </div>
{% endif %}
<h1>Find a tool</h1>
{% include 'kiosk/tool_categories.html' %}
{% if upcoming_reservations %}
    <h1>Upcoming Reservations</h1>
    <div>
        {% for reservation in upcoming_reservations %}
            <div class="col-xs-6">
                {% include 'kiosk/individual_reservation.html' with reservation=reservation customer=customer %}
            </div>
        {% endfor %}
    </div>
{% endif %}
<script>revert(75);</script>
