<html>

<head>
    <meta charset="UTF-8" />
    <title>Event Schedule</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
        rel="stylesheet">

    <style>
        /* Existing 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;
            font-size: 12.5pt;
        }

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

        /* 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;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {

            /* Adjust for medium devices */
            .col1,
            .col2,
            .col3 {
                display: block;
                width: 100%;
                box-sizing: border-box;
            }

            .col1 {
                text-align: left;
                font-weight: bold;
            }

            .col3 {
                text-align: left;
                font-style: italic;
            }

            table,
            thead,
            tbody,
            th,
            td,
            tr {
                display: block;
            }

            thead tr {

                display: block;
                border: none;
            }


            tr {
                border: 1px solid #ccc;
            }

            td {
                border: none;
                position: relative;
                padding-left: 10%;
                text-align: right;
            }

            td:before {
                position: absolute;
                top: 6px;
                left: 6px;
                width: 45%;
                padding-right: 10px;
                white-space: nowrap;
                text-align: left;
                font-weight: bold;
            }

        }

        @media (max-width: 480px) {
            /* Adjust for small devices */
            /* Further adjustments if needed for smaller screens */
        }
    </style>

</head>

<body>
    {{#each events}}
    {{!-- <div class="block md:hidden">
        <!-- Iterate over your data, creating a card for each row -->
        <div class="p-4 bg-white shadow rounded-lg mb-3">
            <div class="week{{week}}"><strong>{{dayOfWeek}} {{dayOfMonth}}:</strong> {{placeOfEvent}}</div>
            {{#each shifts}}

            <div><strong>{{time}}:</strong>{{names}} </div>
            <div>{{notes}}<strong>{{notes_bold}}</strong></div>

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

</html>