cityssm/parking-ticket-system

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

<div class="columns is-variable is-4-mobile is-4-tablet is-block-print" id="is-site-layout">
  <%- include("_sideMenu-plates"); -%>
  <div class="column">
    <nav class="breadcrumb">
      <ul>
        <li><a href="<%= urlPrefix %>/dashboard">Home</a></li>
        <li><a href="<%= urlPrefix %>/plates">Licence Plates</a></li>
        <li class="is-active"><a href="#" aria-current="page">MTO Licence Plate Export</a></li>
      </ul>
    </nav>

    <h1 class="title is-1">
      MTO Licence Plate Export
    </h1>

    <div class="columns">
      <div class="column">
        <h2 class="title is-3">Available Parking Tickets</h2>

        <div class="box">
          <div class="columns is-variable is-1">
            <div class="column">
              <div class="field">
                <div class="control has-icons-left">
                  <input class="input" id="available--licencePlateNumber" type="text" placeholder="Filter Licence Plates" />
                  <span class="icon is-small is-left">
                    <i class="fas fa-filter" aria-hidden="true"></i>
                  </span>
                </div>
              </div>
            </div>
            <div class="column is-narrow">
              <div class="level-right has-text-right">
                <button class="button" id="is-more-available-filters-toggle" type="button">
                  <span class="icon is-small"><i class="fas fa-cog" aria-hidden="true"></i></span>
                  <span>More</span>
                </button>
              </div>
            </div>
          </div>
          <div class="is-hidden" id="is-more-available-filters">
            <div class="message is-info is-small">
              <div class="message-body content">
                <p>All available licence plates displayed are automatically filtered in the following ways:</p>
                <ul>
                  <li>Plates must be from Ontario, Canada.</li>
                  <li>Plates must be from unresolved tickets.</li>
                  <li>Plates must not be from tickets included in a previous batch.</li>
                </ul>
              </div>
            </div>
            <div class="field">
              <label class="label" for="available--issueDaysAgo">Issued Date Offset</label>
              <div class="control is-expanded">
                <div class="select is-fullwidth">
                  <select id="available--issueDaysAgo">
                    <option value="-1">All Available Plates</option>
                    <option value="7">7 Days and Older</option>
                    <option value="14" selected>14 Days and Older</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div id="is-available-tickets-container"></div>
      </div>
      <div class="is-divider-vertical"></div>
      <div class="column">

        <h2 class="title is-3">Target Batch</h2>

        <div class="box">
          <div class="field has-addons">
            <div class="control is-expanded">
              <span class="button is-fullwidth is-static justify-flex-start" id="batchSelector--batchDetails">
                (No Batch Selected)
              </span>
            </div>
            <div class="control">
              <button class="button" id="is-select-batch-button" data-cy="select-batch" type="button">
                <span class="icon is-small"><i class="fas fa-search" aria-hidden="true"></i></span>
                <span>Select</span>
              </button>
            </div>
          </div>
          <div class="level">
            <div class="level-left">
              <div id="batchSelector--batchId">(No Batch Selected)</div>
            </div>
            <% if (user.canUpdate) { %>
              <div class="level-right">
                <button class="button is-primary" id="is-lock-batch-button" data-cy="lock-batch" type="button" disabled>
                  <span class="icon is-small"><i class="fas fa-lock" aria-hidden="true"></i></span>
                  <span>Lock Batch</span>
                </button>
              </div>
            <% } %>
          </div>
        </div>

        <div id="is-batch-entries-container"></div>
      </div>
    </div>

  </div>
</div>

<%- include('_footerA'); -%>

<% if (batch) { %>
  <script>
    exports.plateExportBatch = <%- JSON.stringify(batch) %>;
  </script>
<% } %>

<script src="<%= urlPrefix %>/javascripts/mto-plateExport.js"></script>

<%- include('_footerB'); -%>