cityssm/attendance-tracking

<%- include('_header-print'); -%>

<div class="column is-3 is-hidden-print">
  <div class="panel m-2">
    <div class="panel-heading">Report Options</div>
    <label class="panel-block has-background-white">
      <input id="option--showRowNumber" type="checkbox" />
      Include Row Numbers
    </label>
    <label class="panel-block has-background-white">
      <input id="option--showSortKey" type="checkbox" checked />
      Include Sort Key Column
    </label>
  </div>
</div>

<%- include('_middle-print'); -%>

<% for (const callOutListColumn of callOutLists) { %>
  <div class="columns">
  <% for (const callOutList of callOutListColumn) { %>
    <div class="column" style="break-inside: avoid;">
      <h1 class="title is-5 mb-0">
        <%= callOutList.listName %>
      </h1>

      <p class="is-size-7">
        <%- (callOutList.listDescription ?? '').replace(/\n/g, '<br />') %>
      </p>

      <%
        const rowNumberColumnWidth = Math.max(callOutList.callOutListMembers.length + 1, 1).toString().length
      %>

      <table class="table is-narrow is-fullwidth is-fixed my-2 is-size-7">
        <thead>
          <tr>
            <th class="column--rowNumber has-text-right is-hidden" style="width: <%= rowNumberColumnWidth %>em;">#</th>
            <th>Employee</th>
            <th>Home Contact</th>
            <th class="column--sortKey">Sort Key</th>
          </tr>
        </thead>
        <tbody>
          <% for (const [rowNumber, member] of callOutList.callOutListMembers.entries()) { %>
            <tr>
              <td class="column--rowNumber has-text-right is-hidden" style="width: <%= rowNumberColumnWidth %>em;"><%= rowNumber + 1 %></td>
              <td>
                <%= member.employeeSurname %>, <%= member.employeeGivenName %>
              </td>
              <td>
                <%= member.homeContact1 %><br />
                <%= member.homeContact2 %>
              </td>
              <td class="column--sortKey">
                <%= member.sortKey %>
              </td>
            </tr>
          <% } %>
        </tbody>
      </table>
    </div>
  <% } %>
  </div>
<% } %>

<p class="has-text-right is-size-7 is-italic">
  <% const currentDate = new Date() %>
  Printed <%= currentDate.toLocaleDateString() %> at <%= currentDate.toLocaleTimeString() %>
</p>

<script src="<%= urlPrefix %>/javascripts/print.callOutList.min.js"></script>

<%- include('_footer-print'); -%>