cityssm/lottery-licence-manager

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

<div class="columns is-variable is-4-mobile is-4-tablet is-block-print" id="is-site-layout">
  <%- include("_sideMenu-locations"); -%>
  <div class="column">
    <nav class="breadcrumb">
      <ul>
        <li><a href="<%= urlPrefix %>/dashboard">Home</a></li>
        <li class="is-active"><a href="#" aria-current="page">
          <span class="icon is-small"><i class="fas fa-map-marker-alt" aria-hidden="true"></i></span>
          <span>Locations</span>
        </a></li>
      </ul>
    </nav>

    <h1 class="title is-1">
      Find a Location
    </h1>

    <% if (user.userProperties.canCreate) { %>
      <div class="fixed-container is-fixed-bottom-right mx-4 my-4 has-text-right is-hidden-print">
        <a class="button is-circle is-primary has-tooltip-left" data-tooltip="Create a New Location" href="<%= urlPrefix %>/locations/new">
          <i class="fas fa-plus" aria-hidden="true"></i>
          <span class="sr-only">Create a New Location</span>
        </a>
      </div>
    <% } %>

    <div class="box">
      <form id="form--searchFilters">
        <input id="filter--limit" name="limit" type="hidden" value="50" />
        <input id="filter--offset" name="offset" type="hidden" value="0" />

        <div class="columns">
          <div class="column">
            <div class="field">
              <label class="label" for="filter--locationNameAddress">Location Name or Address</label>
              <div class="control has-icons-left">
                <input class="input" id="filter--locationNameAddress" name="locationNameAddress" type="text" />
                <span class="icon is-small is-left">
                  <i class="fas fa-filter" aria-hidden="true"></i>
                </span>
              </div>
            </div>
          </div>
          <div class="column">
            <div class="field">
              <label class="label" for="filter--locationIsManufacturer">Manufacturer Status</label>
              <div class="control has-icons-left">
                <div class="select is-fullwidth">
                  <select id="filter--locationIsManufacturer" name="locationIsManufacturer">
                    <option value="">(Unfiltered)</option>
                    <option value="1">Show Only Manufacturers</option>
                    <option value="0">Hide Manufacturers</option>
                  </select>
                </div>
                <span class="icon is-small is-left">
                  <i class="fas fa-filter" aria-hidden="true"></i>
                </span>
              </div>
            </div>
          </div>
          <div class="column">
            <div class="field">
              <label class="label" for="filter--locationIsDistributor">Distributor Status</label>
              <div class="control has-icons-left">
                <div class="select is-fullwidth">
                  <select id="filter--locationIsDistributor" name="locationIsDistributor">
                    <option value="">(Unfiltered)</option>
                    <option value="1">Show Only Distributors</option>
                    <option value="0">Hide Distributors</option>
                  </select>
                </div>
                <span class="icon is-small is-left">
                  <i class="fas fa-filter" aria-hidden="true"></i>
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="field">
          <div class="control has-text-right">
            <div class="facheck facheck-fas-checked facheck-inline has-checked-primary">
              <input id="filter--locationIsActive" name="locationIsActive" type="checkbox" />
              <label for="filter--locationIsActive">
                Used on an Active Licence
              </label>
            </div>
          </div>
        </div>
      </form>
    </div>

    <div id="container--searchResults">
      <p class="has-text-centered has-text-grey-lighter">
        <i class="fas fa-3x fa-circle-notch fa-spin" aria-hidden="true"></i><br />
        <em>Loading locations...</em>
      </p>
    </div>
  </div>
</div>

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

<script src="<%= urlPrefix %>/javascripts/location-search.min.js"></script>

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