<html>

<head>
    <meta charset="UTF-8" />
    <title>Event Schedule</title>
    <style>
        /* template */
        /* Word-specific styles */
        table {
            width: 100%;
            border-collapse: collapse;
            border: none;
            margin-top: 20px;
            font-family: Arial, Helvetica, sans-serif;
        }

        th {
            font-weight: bold;
            text-align: center;
            border: 1px solid black;
            padding: 4px;
            margin-top: 6px;
            margin-bottom: 6px;
            font-size: 12.5pt;
        }

        td {
            border: 1px solid black;
            padding: 2px;
            margin-top: 2px;
            margin-bottom: 2px;
            padding-left: 8px;
            padding-right: 8px;
            font-size: 12.5pt;
        }


        /* Word-specific styles */
        @media screen and (min-width: 0\0) {
            table {
                width: auto !important;
            }

            table td,
            table th {
                border: 1px solid #000000 !important;
            }

        }

        /* custom styles */
        .col1 {
            text-align: center;
            width: 15%;
        }

        .col2 {
            width: 60%;
        }

        /* Define different header colors for each week */
        .week1 {
            background-color: #FFF766;
        }

        .week2 {
            background-color: #B4C6E7;
        }

        .week3 {
            background-color: #ED7D31;
        }

        .week4 {
            background-color: #BFBFBF;
        }

        .week5 {
            background-color: #C785C8;
        }
        
    </style>
</head>

<body>
    {{#each events}}
    <div style="page-break-before: always;" class="hidden md:block"></div>
    <table>
        <thead class="week{{week}}">
            <tr>
                <th colspan="3">{{dayOfWeek}} {{dayOfMonth}}<br />
                    {{placeOfEvent}}
                </th>
            </tr>
        </thead>
        <tbody>
            {{#each shifts}}
            <tr>
                <td class="col1">{{time}}</td>
                <td class="col2">{{names}}</td>
                <td class="col3 md:table-cell">{{notes}}<strong>{{notes_bold}}</strong></td>
            </tr>
            {{/each}}
        </tbody>
    </table>
    <div style="page-break-before: always;"></div>
    <div style="margin-bottom: 50px;"></div>
    {{#if @last}}
    <!-- Don't add margin after the last table -->
    {{else}}
    <!-- Add margin after the table -->
    <br><br><br>
    {{/if}}
    {{/each}}
</body>

</html>