cityssm/lottery-licence-manager

<div class="panel">
  <div class="panel-heading">
    <div class="level">
      <div class="level-left">
        <h2 class="has-text-weight-bold">Remarks</h2>
      </div>
      <div class="level-right has-text-weight-normal is-hidden-print">
        <div class="field is-grouped is-justify-content-end is-align-items-center">
          <% if (remarks.length > 0) { %>
            <span class="tag is-dark has-cursor-default mr-3" data-tooltip="Remarks Displayed">
              <span id="remark--displayCount"><%= remarks.length %></span>/<%= remarks.length %>
            </span>
            <div class="control has-icons-left">
              <input class="input is-small" id="remark--searchStr" type="text" placeholder="Filter Remarks" aria-label="Remark Filter" />
              <span class="icon is-small is-left">
                <i class="fas fa-filter" aria-hidden="true"></i>
              </span>
            </div>
          <% } %>
          <% if (user.userProperties.canCreate) { %>
            <div class="control is-hidden-status-view">
              <button class="button is-primary is-small is-add-remark-button" type="button">
                <span class="icon is-small">
                  <i class="fas fa-comment" aria-hidden="true"></i>
                </span>
                <span>Add a Remark</span>
              </button>
            </div>
          <% } %>
          <div class="control">
            <a class="button is-link is-small" href="<%= urlPrefix %>/organizations/<%= organization.organizationID %>/print-remarks" target="_blank">
              <span class="icon is-small">
                <i class="fas fa-print" aria-hidden="true"></i>
              </span>
              <span>Print Remarks</span>
            </a>
          </div>
          <div class="control">
            <a class="button is-small" href="<%= urlPrefix %>/reports/remarks-byOrganization?organizationID=<%= organization.organizationID %>" download>
              <span class="icon is-small">
                <i class="fas fa-file-download" aria-hidden="true"></i>
              </span>
              <span>Export Remarks</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="container--remarks" data-organization-id="<%= organization.organizationID %>">
    <%
      if (remarks.length === 0) {
    %>
      <div class="panel-block is-block">
        <div class="message is-info">
          <p class="message-body">
            There are no remarks associated with <%= organization.organizationName %>.
          </p>
        </div>
      </div>
    <%
      } else {
        const rightNow = new Date();
        for (const remark of remarks) {
    %>
        <div class="panel-block is-block is-remark-block">
          <div class="columns is-mobile">
            <div class="column is-narrow">
              <% if (remark.isImportant) { %>
                <i class="fas fa-fw fa-star" aria-hidden="true"></i>
              <% } else { %>
                <i class="far fa-fw fa-comment" aria-hidden="true"></i>
              <% } %>
            </div>
            <div class="column">
              <p class="has-newline-chars is-remark"><%= remark.remark %></p>
              <p class="is-size-7">
                <% if (remark.recordCreate_timeMillis !== remark.recordUpdate_timeMillis) { %>
                  <i class="fas fa-pencil-alt" aria-hidden="true"></i>
                <% } %>
                <%= remark.recordUpdate_userName %>
                -
                <span class="has-tooltip-right" data-tooltip="<%= dateDiff(dateTimeFns.dateStringToDate(remark.remarkDateString, remark.remarkTimeString), rightNow).formatted %> ago">
                  <%= remark.remarkDateString %> <%= remark.remarkTimeString %>
                </span>
              </p>
            </div>
            <% if (remark.canUpdate) { %>
              <div class="column is-narrow is-hidden-print is-hidden-status-view">
                <div class="buttons is-right has-addons">
                  <button class="button is-small is-edit-remark-button" data-remark-index="<%= remark.remarkIndex %>" data-tooltip="Edit Remark" 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-remark-button" data-remark-index="<%= remark.remarkIndex %>" data-tooltip="Delete Remark" type="button">
                    <i class="fas fa-trash" aria-hidden="true"></i>
                    <span class="sr-only">Delete</span>
                  </button>
                </div>
              </div>
            <% } %>
          </div>
        </div>
    <%
        }
      }
    %>
  </div>
</div>