cityssm/lottery-licence-manager

<div class="panel">
  <div class="panel-heading">
    <div class="level">
      <div class="level-left">
        <h2 class="has-text-weight-bold">Lottery Licences</h2>
      </div>
      <div class="level-right has-text-weight-normal is-hidden-print">
        <div class="field is-grouped justify-flex-end">
          <div class="control">
            <a class="button is-small" href="<%= urlPrefix %>/reports/licences-byLocation?locationID=<%= location.locationID %>" download>
              <span class="icon is-small">
                <i class="fas fa-file-download" aria-hidden="true"></i>
              </span>
              <span>Export Licences</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <%
    let licenceTheadHTML = "<tr>" +
      "<th class=\"has-width-150\">" + configFunctions.getProperty("licences.externalLicenceNumber.fieldLabel") + "</th>" +
      "<th class=\"has-width-50 is-nowrap\">Licence Type</th>" +
      "<th>Event Details</th>" +
      "<th>Organization</th>" +
      "<th class=\"has-width-50\">From</th>" +
      "<th class=\"has-width-50\">To</th>" +
      "<th class=\"has-width-50 is-hidden-print\"><span class=\"sr-only\">Options</span></th>" +
      "</tr>";

    let rows_active = "";
    let count_active = 0;
    let rows_past = "";
    let count_past = 0;

    const licenceTypes = configFunctions.getProperty("licenceTypes");

    for (let licenceIndex = 0; licenceIndex < licences.length; licenceIndex += 1) {

      const licence = licences[licenceIndex];

      let licenceType = {};
      for (let typeIndex = 0; typeIndex < licenceTypes.length; typeIndex += 1) {
        if (licenceTypes[typeIndex].licenceTypeKey === licence.licenceTypeKey) {
          licenceType = licenceTypes[typeIndex];
          break;
        }
      }

      let canEdit = licence.canUpdate;

      let rowHTML = "<tr>" +
        "<td>" +
          "<a href=\"" + urlPrefix + "/licences/" + licence.licenceID + "\">" +
          htmlFns.escapeHTML(licence.externalLicenceNumber || "(None)") + "<br />" +
          "<small>Licence #" + licence.licenceID + "</small>" +
          "</a>" +
          "</td>" +
        "<td>" + (licenceType.licenceType || licence.licenceTypeKey) + "</td>" +
        "<td class=\"has-newline-chars\">" + htmlFns.escapeHTML(licence.licenceDetails) + "</td>" +
        "<td>" +
          "<a href=\"" + urlPrefix + "/organizations/" + licence.organizationID + "\">" +
          htmlFns.escapeHTML(licence.organizationName) +
          "</a>" +
          "</td>" +
        "<td class=\"is-nowrap\">" +
          "<span class=\"icon\"><i class=\"fas fa-play\" aria-hidden=\"true\"></i></span> " + licence.startDateString +
          "</td>" +
        "<td class=\"is-nowrap\">" +
          "<span class=\"icon\"><i class=\"fas fa-stop\" aria-hidden=\"true\"></i></span> " + licence.endDateString +
          "</td>" +
        "<td class=\"is-nowrap has-text-right is-hidden-print\">" +
          (canEdit ?
            "<a class=\"button is-small\" href=\"" + urlPrefix + "/licences/" + licence.licenceID + "/edit\" data-tooltip=\"Edit Licence\"><span class=\"icon\"><i class=\"fas fa-pencil-alt\" aria-hidden=\"true\"></i></span><span>Edit</span></a> " :
            "") +
          (licence.issueDate ?
            "<a class=\"button is-small\" href=\"/licences/" + licence.licenceID + "/print\" data-tooltip=\"Print Licence\">" +
            "<i class=\"fas fa-print\" aria-hidden=\"true\"></i>" +
            "<span class=\"sr-only\">Print Licence</span>" +
            "</a>" :
            "<span class=\"tag is-warning\">Not Issued</span>") +

          "</td>" +
        "</tr>";

      if (licence.endDate < currentDateInteger) {
        rows_past += rowHTML;
        count_past += 1;
      } else {
        rows_active += rowHTML;
        count_active += 1;
      }
    }
  %>

  <div class="panel-tabs" id="tabs--licences" role="tablist">
    <a class="is-active" id="tab--licences-active" role="tab" href="#tabContent--licences-active">
      Active Licences
      <span class="tag is-info is-rounded ml-2"><%= count_active %></span>
    </a>
    <a id="tab--licences-past" role="tab" href="#tabContent--licences-past">
      Past Licences
      <span class="tag is-rounded ml-2"><%= count_past %></span>
    </a>
  </div>

  <div class="tab-container">
    <div class="tab-content is-active" id="tabContent--licences-active" role="tabpanel" aria-labelledby="tab--licences-active">
      <% if (rows_active === "") { %>
      <div class="panel-block is-block">
        <div class="message is-info">
          <div class="message-body">
            There are no active licences at
            <%= location.locationDisplayName %>.
          </div>
        </div>
      </div>
      <% } else { %>
      <table class="table is-fullwidth is-striped is-hoverable">
        <thead>
          <%- licenceTheadHTML %>
        </thead>
        <tbody>
          <%- rows_active %>
        </tbody>
      </table>
      <% } %>
    </div>
    <div class="tab-content" id="tabContent--licences-past" role="tabpanel" aria-labelledby="tab--licences-past">
      <% if (rows_past === "") { %>
      <div class="panel-block is-block">
        <div class="message is-info">
          <div class="message-body">
            There are no past licences at
            <%= location.locationDisplayName %>.
          </div>
        </div>
      </div>
      <% } else { %>
      <table class="table is-fullwidth is-striped is-hoverable">
        <thead>
          <%- licenceTheadHTML %>
        </thead>
        <tbody>
          <%- rows_past %>
        </tbody>
      </table>
      <% } %>
    </div>
  </div>
</div>