alykhank/FoodMenu

<div data-role="page" id="Locations">
  <div data-role="header" data-position="fixed" data-disable-page-zoom="true" data-tap-toggle="false">
    <h1 class="title title-fixed">Locations</h1>
  </div><!-- header -->
  <div role="main" class="ui-content">
    <form class="ui-filterable">
      <input id="filter-input" data-type="search" placeholder="Search locations…">
    </form>
    <ul data-role="listview" data-inset="false" data-filter="true" data-input="#filter-input" class="ui-alt-icon ui-nodisc-icon">
    {% for outlet_id, restaurant in menu.eateries.items() if "location" in restaurant %}
      <li class="ui-li-has-thumb" onclick="mixpanel.track('Location View', {'ID': '{{restaurant.outlet_id}}', 'Name': '{{restaurant.outlet_name}}', 'Location': '{{restaurant.location.building}}'})">
        <a href="#loc{{ outlet_id }}{{ restaurant.location.building }}" data-transition="slidefade">
          <img src="static/img/logos/{{outlet_id}}.png" alt="{{ restaurant.location.outlet_name }}">
          <h2>{{ restaurant.location.outlet_name }}</h2>
          <p>
            {% set mdash = joiner("—") %}
            {% if restaurant.meals %} {{ mdash() }}
              {{ restaurant.meals | map('first') | join(", ") }}
            {% endif %}
            {% if restaurant.location.building %} {{ mdash() }}
              {{ restaurant.location.building }}
            {% endif %}
          </p>
          <span class="ui-li-count">
            {% if restaurant.location.is_open_now %}
            Open
            {% else %}
            Closed
            {% endif %}
          </span>
        </a>
      </li>
    {% endfor %}
    </ul>
  </div><!-- content -->
  {% import 'footer.html' as footer %}
  {{ footer.setFooter('Locations') }}
</div><!-- page -->