{% load custom_tags_and_filters %}
{# Panel is used to make table borders rounded. #}
<div class="panel panel-default" {% if transparent_bg %}style="background:transparent"{% endif %}>
    <table class="table table-bordered table-condensed"
           {% if transparent_bg %}style="background:transparent"{% endif %}>
        <thead>
            <tr>
                <th colspan="4" style="font-size:large;">
                    <span class="primary-highlight">{{ area.name }}</span>
                    <span class="pull-right" style="font-size: medium">{% include 'occupancy/occupancy_count.html' with area=area %}</span>
                </th>
            </tr>
            <tr>
                <th {% if center_th %}style="text-align:center;"{% endif %}>User</th>
                <th {% if center_th %}style="text-align:center;"{% endif %}>Since</th>
                {% if "dashboard"|customization:"dashboard_hide_project" != "enabled" %}
                    <th {% if center_th %}style="text-align:center;"{% endif %}>Working on project...</th>
                {% endif %}
            </tr>
        </thead>
        <tbody>
            {% for o in occupants %}
                <tr {% if o.customer.is_any_part_of_staff %}class="success" {% elif o.customer.is_service_personnel %}class="warning" {% elif o.customer.is_logged_in_area_without_reservation or o.customer.is_logged_in_area_outside_authorized_schedule %}class="danger" {% endif %}>
                    <td style="white-space: nowrap;width:20%">
                        {% if show_force_logout and user.is_staff or show_force_logout and user.is_user_office %}
                            <span class="glyphicon glyphicon-remove-circle grey pointer"
                                  onclick="force_user_out_of_the_area('{% url 'force_area_logout' o.customer_id %}')"
                                  title="Force {{ o.customer }} to log out of the {{ o.area }}"></span>
                        {% endif %}
                        <span>{{ o.customer.first_name }} {{ o.customer.last_name }}</span>
                    </td>
                    <td style="white-space: nowrap;width:25%">{{ o.start|date:"MONTH_DAY_FORMAT" }} @  {{ o.start|time }}</td>
                    {% if "dashboard"|customization:"dashboard_hide_project" != "enabled" %}
                        <td>
                            <div style="width: 0; min-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                                {{ o.project }}
                            </div>
                        </td>
                    {% endif %}
                </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
