{block name="eventlistbox_overdue"}
<style>

    .overdue-events {
        box-shadow: 0 0 3px 1px red;
    }

    a.lms-ui-button.event-info-short-button:not(.lms-ui-link-button) > i:before {
        color: inherit;
    }

</style>

<table id="event-all" class="lmsbox lms-ui-tab-container lms-ui-background-cycle event-day-table{if !empty($overdue_events)} overdue-events{/if}">
    <colgroup>
        <col style="width: 1%;">
        <col style="width: 1%; min-width:90px;">
        <col style="width: 95%;">
        <col style="width: 1%;">
        <col style="width: 1%;">
        <col style="width: 1%;" class="no-print">
    </colgroup>
    <thead>
        <tr class="hand lmsbox-titlebar" data-lmsbox-content="overdue-events-panel">
            <td class="bold nobr" colspan="6">
                {icon name="timetable"}
                {if !empty($overdue_events_only)}
                    {trans("Overdue events")}
                {else}
                    {trans("Overdue events assigned to You")}
                {/if}
                {if isset($overdue_limited)}
                    {trans("(limited to first 100)")}
                {/if}
            </td>
        </tr>
    </thead>
    <tbody id="overdue-events-panel" style="display: none;">
        {foreach $overdue_events as $event}
            {include file="event/eventlistboxrow.html" overdue=1 backid="event-all"}
        {/foreach}
    </tbody>
</table>

<script>

    $("#overdue-events-panel").toggle(getStorageItem("overdue-events-panel", "local") == "1");

</script>
{/block}
