cityssm/lottery-licence-manager

<div class="panel">
  <div class="panel-heading">
    <div class="level">
      <div class="level-left">
        <h2 class="has-text-weight-bold">Reminders</h2>
      </div>
      <div class="level-right has-text-weight-normal is-hidden-print">
        <div class="field is-grouped justify-flex-end">
          <% if (user.userProperties.canCreate) { %>
            <div class="control is-hidden-status-view">
              <button class="button is-primary is-small" id="is-add-reminder-button" type="button">
                <span class="icon is-small">
                  <i class="fas fa-bell" aria-hidden="true"></i>
                </span>
                <span>Add a Reminder</span>
              </button>
            </div>
          <% } %>
          <div class="control">
            <a class="button is-small" href="<%= urlPrefix %>/reports/reminders-byOrganization?organizationID=<%= organization.organizationID %>" download>
              <span class="icon is-small">
                <i class="fas fa-file-download" aria-hidden="true"></i>
              </span>
              <span>Export Reminders</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <table class="table is-striped is-hoverable is-fullwidth has-sticky-header">
    <thead>
      <tr>
        <th>Reminder Type</th>
        <th>Status</th>
        <th class="has-text-centered">
          Dismissed Date<br />
          <i class="fas fa-check" aria-hidden="true"></i>
        </th>
        <th class="has-text-centered">
          Due Date<br />
          <i class="fas fa-bell" aria-hidden="true"></i>
        </th>
        <th></th>
      </tr>
    </thead>
    <tbody id="container--reminders" data-organization-id="<%= organization.organizationID %>">
      <% for (const reminder of reminders) { %>
        <%
          const reminderType = configFunctions.getReminderType(reminder.reminderTypeKey);
        %>
        <tr>
          <td>
            <% if (reminderType) { %>
              <%= reminderType.reminderType %><br />
              <span class="is-size-7"><%= reminderType.reminderCategory %></span>
            <% } else { %>
              <%= reminder.reminderTypeKey %>
            <% } %>
          </td>
          <td>
            <%= reminder.reminderStatus %>
          </td>
          <td class="has-text-centered">
            <% if (reminder.dismissedDateString === "") { %>
              <span class="has-text-grey">(Active)</span>
              <% if (reminder.canUpdate) { %>
                <br />
                <button class="button is-small is-light is-success is-dismiss-reminder-button mt-1" data-reminder-index="<%=reminder.reminderIndex %>" type="button">
                  <span class="icon is-small">
                    <i class="fas fa-check" aria-hidden="true"></i>
                  </span>
                  <span>Dismiss</span>
                </button>
              <% } %>
            <% } else { %>
              <%= reminder.dismissedDateString %>
            <% } %>
          </td>
          <td class="has-text-centered">
            <% if (reminder.dueDateString === "") { %>
              <span class="has-text-grey">(No Due Date Set)</span>
            <% } else if (reminder.dismissedDateString !== "") { %>
              <span class="has-text-grey is-linethrough"><%= reminder.dueDateString %></span>
            <% } else { %>
              <%= reminder.dueDateString %>
            <% } %>
          </td>
          <td class="is-hidden-print">
            <% if (reminder.canUpdate) { %>
              <div class="buttons is-right has-addons is-hidden-status-view">
                <button class="button is-small is-edit-reminder-button" data-reminder-index="<%= reminder.reminderIndex %>" data-tooltip="Edit Reminder" type="button">
                  <span class="icon is-small">
                    <i class="fas fa-pencil-alt" aria-hidden="true"></i>
                  </span>
                  <span>Edit</span>
                </button>
                <button class="button is-small has-text-danger is-delete-reminder-button" data-reminder-index="<%= reminder.reminderIndex %>" data-tooltip="Delete Reminder" type="button">
                  <i class="fas fa-trash" aria-hidden="true"></i>
                  <span class="sr-only">Delete</span>
                </button>
              </div>
            <% } %>
          </td>
        </tr>
      <% } %>
    </tbody>
  </table>
</div>