<div class="ecp-component ecp_ReservationBook">
  <h2 aria-describedby="ecpi_reservationbook_info">{message:ReservationBook/Title}</h2>
  <p id="ecpi_reservationbook_info" class="ecp-summary">{message:ReservationBook/Summary}</p>
  <form class="ecp-form">
    <div class="ecp-section-topline" role="region" aria-labelledby="ecpi_reservation_title">
      <h3 id="ecpi_reservation_title">{message:name}</h3>
      <ul class="ecp-item-list">
        <li>{datetime:dddd:RequestTime}, {datetime:LL:RequestTime}</li>
        <li>{datetime:LT:RequestTime} {forcedTimezone:RequestTime}
          <a href="#" data-ecp-action="change_time" class="ecp-option" aria-label="{message:ReservationBook/ChangeTimeLinkLabel}">{message:ReservationBook/ChangeTimeLink}</a>
        </li>
        <li>{message:ReservationBook/GuestCount}</li>
      </ul>
    </div>

    <div data-ecp-handle="reservation_included_products" class="ecp-section" role="region" aria-label="{message:ReservationBook/IncludedItemsLabel}">
      <h3>{message:ReservationBook/IncludedItemsTitle}</h3>
      <div class="ecp-x-list" data-ecp-handle="included_products" role="list">
        <!-- | ReservationBook__Product template | -->
        <!-- | ReservationBook__ReservationProduct template | -->
      </div>
    </div>

    <div data-ecp-handle="reservation_optional_products" class="ecp-section" role="region" aria-label="{message:ReservationBook/OptionalItemsLabel}">
      <h3>{message:ReservationBook/OptionalItemsTitle}</h3>
      <div class="ecp-x-list" data-ecp-handle="optional_products" role="list">
        <!-- | ReservationBook__OptionalProduct template | -->
      </div>
    </div>

    <div data-ecp-handle="reservation_price_detail" class="ecp-section" role="region" aria-label="{message:ReservationBook/SummaryLabel}">
        <!-- | ReservationBook__Summary template | -->
    </div>

    <div data-ecp-handle="reservation_price_summary" class="ecp-section" role="region" aria-label="{message:ReservationBook/SummaryLabel}">
      <div class="ecp-grid" role="table">
        <div class="ecp-grid-row ecp-clearfix">
          <span class="ecp-grid-col-12"><label>{message:ReservationBook/SummaryTitle}</label></span>
        </div>
        <div class="ecp-grid-row ecp-clearfix" role="row">
          <span class="ecp-grid-col-9" role="cell">
            {currency:price} {message:ReservationBook/PerPerson} x {message:ReservationBook/GuestCount}
          </span>
          <span class="ecp-grid-col-3 ecp-text-right" role="cell">{currency:TotalPrice}</span>
        </div>
        <div class="ecp-grid-row ecp-grid-row-topline ecp-clearfix" role="row">
          <span class="ecp-grid-col-9" role="rowheader"><label>{message:ReservationBook/Total}</label></span>
          <span class="ecp-grid-col-3 ecp-text-right" role="cell">{currency:TotalPrice}</span>
        </div>
      </div>
    </div>

    <div class="ecp-section" role="region" aria-labelledby="ecpi_rb_payment_title">
      <div data-ecp-handle="payment_method">
        <!-- | ReservationBook__SelectPayMethod template | -->
      </div>
      <button class="ecp-secondary ecp-add-payment-method" data-ecp-handle="add-first-payment-method" data-ecp-action="add-payment-method">{message:ReservationBook/AddPaymentMethodButton}</button>
    </div>

    <div class="ecp-section" role="region" aria-labelledby="ecpi_rb_contact_title" aria-describedby="ecpi_rb_contact_summary">
      <div data-ecp-handle="contact_information">
        <!-- | ReservationBook__Contact template | -->
      </div>
    </div>

    <div class="ecp-section" data-ecp-handle="prompt-assistance">
      <div class="ecp-form-fieldset">
        <label for="ecpi_rb_assistance_instructions">{message:ReservationBook/AssistanceNote}</label>
        <textarea id="ecpi_rb_assistance_instructions" name="assistance_instructions" rows="4"></textarea>
      </div>
    </div>

    <div class="ecp-section" data-ecp-handle="prompt-dietary">
      <div class="ecp-form-fieldset">
        <label for="ecpi_rb_dietary_instructions">{message:ReservationBook/DietaryNote}</label>
        <textarea id="ecpi_rb_dietary_instructions" name="dietary_instructions" rows="4"></textarea>
      </div>
    </div>

    <div class="ecp-section">
      <div class="ecp-form-fieldset">
        <label for="ecpi_rb_instructions">{message:ReservationBook/Note}</label>
        <textarea id="ecpi_rb_instructions" name="instructions" rows="4"></textarea>
      </div>
    </div>

    <p class="ecp-summary">{message:ReservationBook/NotificationPrimary}</p>

    <div class="ecp-form-buttonset-2 ecp-clearfix">
      <button class="ecp-secondary" data-ecp-action="cancel">{message:ReservationBook/CancelButton}</button>
      <button data-ecp-action="reserve">{message:ReservationBook/ReserveButton}</button>
    </div>
  </form>
</div>