nearest.html

---
title: titles.nearest
layout: default
permalink: /near-me
---

<div
  class="py-4 sticky top-0 z-10 bg-white border-b border-gray-200"
>
  <div class="flex flex-row flex-wrap sm:flex-nowrap justify-center
              items-center">
    {% include search_form.html %}
    <div class="relative pt-4 sm:pt-0 sm:ps-4">
      <select
        id="js-nearest-filter"
        class="border border-gray-200 bg-transparent text-gray-700 rounded-full px-5 py-2"
      >
        <option value="reports">{% t nearest.dropdown_1 %}</option>
        <option selected value="stocked">{% t nearest.dropdown_2 %}</option>
        <option value="any">{% t nearest.dropdown_3 %}</option>
      </select>

    </div>
  </div>
<div class="lg:container mx-auto">
  <div class="bg-gray-50 p-4 shadow mt-4 text-sm">
    <p>{% t pre_list_disclaimer.disclaimer %}</p>
  </div>
  <div id="js-loading" class="mt-4 hidden">{% t global.loading %}</div>
  <div class="results flex flex-col-reverse lg:grid lg:grid-cols-2">
    <div id="main" class="pt-4">
      {% capture translated_message %}
      {% t nearest_js.alert_zipcode %}
      {% endcapture %}
      {% include alert.html message=translated_message %}
      <section class="mt-0 md:mt-10 hidden">
        {% include vaccine_section_title.html has_report=true
        has_vaccine=true %}
        <ol class="js-sites" id="js-sites-with-vaccine">
        </ol>
      </section>

      <section class="md:mt-5 hidden">
        {% include vaccine_section_title.html has_report=true
        has_vaccine=false %}
        <ol class="js-sites" id="js-sites-without-vaccine">
        </ol>
      </section>

      <section class="md:mt-5 hidden">
        {% include vaccine_section_title.html has_report=false %}
        <ol class="js-sites" id="js-sites-without-report">
        </ol>
      </section>
    </div>
    <div class="pt-4 h-72 lg:ps-4 lg:h-screen lg:sticky lg:top-0 lg:left-0 lg:self-start">
      {% include map.html %}
    </div>
  </div>

  <div id="js-post-list-container" class="hidden">
    <div class="text-sm my-6">
      {% t post_list_disclaimer.disclaimer %}
    </div>
  </div>
</div>