<div class="ecp-component ecp_ReservationTimes">
  <h2>{message:name}</h2>
  <div class="ecp-section">
    <div class="ecp-html-content">{message:description}</div>
    <ul class="ecp-item-list">
      <li>{message:ReservationList/Hours} {message:ReservationList/Minutes}</li>
      <li data-ecp-handle="price">{currency:price}</li>
      <li data-ecp-handle="party_size_min">{message:ReservationTimes/PartySize}</li>
      <li data-ecp-handle="party_size_max">{message:ReservationTimes/PartySizeUpTo}</li>
      <li data-ecp-handle="party_size_min_max">{message:ReservationTimes/PartySizeBetween}</li>
    </ul>

    <dl class="ecp-address">
      <dt>{message:ReservationTimes/Location}</dt>
      <dd>{message:location_name}</dd>
      <dd>{message:location_address}</dd>
      <dd>{message:location_city}, {message:location_state} {message:location_zip}</dd>
    </dl>
  </div>

  <div class="ecp-section" data-ecp-handle="search_form">
    <h3>{message:ReservationTimes/CriteriaHeading}</h3>
    <form class="ecp-form">
      <select name="guest_count" data-ecp-action="adjust_guest_count" aria-label="{message:ReservationTimes/GuestCountLabel}">
        <!-- | ReservationTimes__Option template | -->
      </select>
      <input type="date" name="request_date" data-ecp-action="adjust_date" aria-label="{message:ReservationTimes/RequestDateInputLabel}">
      <button data-ecp-action="refresh" data-ecp-handle="refresh_button">{message:ReservationTimes/RefreshButton}</button>
      <button data-ecp-action="refresh" data-ecp-handle="search_button">{message:ReservationTimes/SearchButton}</button>
    </form>
  </div>

  <div class="ecp-section">
    <div class="ecp-x-list" data-ecp-handle="reservation_time_list" aria-live="polite">
      <!-- | ReservationTimes__Time template | -->
    </div>
    <p class="ecp-callout-box" data-ecp-handle="no_times" role="alert">{message:ReservationTimes/NoTimes}</p>
    <div class="ecp-x-list" data-ecp-handle="reservation_date_list" aria-live="polite">
      <!-- | ReservationTimes__Date template | -->
    </div>
    <p class="ecp-callout-box" data-ecp-handle="no_dates" role="alert">{message:ReservationTimes/NoDates}</p>
    <p class="ecp-callout-box" data-ecp-handle="restricted" role="alert">{message:ReservationTimes/Restricted}</p>
  </div>
</div>