<div class="ecp-component ecp_RemixCart">
  <h2 aria-describedby="ecpi_remixcart_info">{message:RemixCart/Title}</h2>
  <div id="ecpi_remixcart_info" class="ecp-html-content">{message:club_event_remix_intro_message}</div>
  <form class="ecp-form">
    <div class="ecp-section" data-ecp-handle="requirements_section" role="region" aria-labelledby="ecpi_requirements_title">
      <h3 id="ecpi_requirements_title">{message:RemixCart/RequirementsTitle}</h3>
      <p class="ecp-micro-summary">{message:RemixCart/RequirementsInfo}</p>
      <ul class="ecp-item-list ecp-diamonds">
        <li data-ecp-handle="event_minimum_quantity_one">{message:RemixCart/MinimumQuantityRuleSingular_template}</li>
        <li data-ecp-handle="event_minimum_quantity_many">{message:RemixCart/MinimumQuantityRulePlural_template}</li>
        <li data-ecp-handle="event_maximum_quantity_one">{message:RemixCart/MaximumQuantityRuleSingular_template}</li>
        <li data-ecp-handle="event_maximum_quantity_many">{message:RemixCart/MaximumQuantityRulePlural_template}</li>
        <li data-ecp-handle="event_minimum_value">{message:RemixCart/MinimumValueRule_template}</li>
      </ul>
    </div>
    <div class="ecp-section" data-ecp-handle="required_products_section" role="region" aria-labelledby="ecpi_required_title">
      <h3 id="ecpi_required_title">{message:RemixCart/SP_RequiredProductsTitle}</h3>
      <p class="ecp-micro-summary">{message:RemixCart/SP_RequiredProductsInfo}</p>
      <div data-ecp-handle="required_products" role="list">
        <!--
          | RemixCart__EditableItem template |
          or
          | RemixCart__ReadOnlyItem template |
        -->
      </div>
    </div>
    <div class="ecp-section" data-ecp-handle="optional_products_section" role="region" aria-labelledby="ecpi_optional_title">
      <h3 id="ecpi_optional_title">{message:RemixCart/SP_OptionalProductsTitle}</h3>
      <p class="ecp-micro-summary">{message:RemixCart/SP_OptionalProductsInfo}</p>
      <div data-ecp-handle="optional_products" role="list">
        <!--
          | RemixCart__EditableItem template |
          or
          | RemixCart__ReadOnlyItem template |
        -->
      </div>
    </div>
    <div class="ecp-section" role="region" aria-labelledby="ecpi_summary_title" aria-live="polite">
      <h3 id="ecpi_summary_title">{message:RemixCart/SelectionSummaryTitle}</h3>
      <!-- <p class="ecp-micro-summary">{SelectionSummaryInfo}</p> -->
      <div class="ecp-grid" role="table">
        <div class="ecp-grid-row ecp-clearfix" role="row">
          <span class="ecp-grid-col-8" role="rowheader">{message:RemixCart/TotalQuantity}</span>
          <span class="ecp-grid-col-4 ecp-text-right" role="cell">
            <span data-ecp-handle="total_quantity"></span>
          </span>
        </div>
        <div class="ecp-grid-row ecp-clearfix" role="row">
          <span class="ecp-grid-col-8" role="rowheader">{message:RemixCart/TotalValue}</span>
          <span class="ecp-grid-col-4 ecp-text-right" role="cell">
            <span data-ecp-handle="total_value"></span>
          </span>
        </div>
      </div>
    </div>
    <div data-ecp-handle="requirements_failed_section" aria-live="polite">
      <div class="ecp-notification-box">
        <div class="ecp-notification-box-header">{message:RemixCart/RequirementsValidationTitle}</div>
        <div class="ecp-notification-box-content">
          <ul class="ecp-item-list ecp-diamonds">
            <li data-ecp-handle="event_minimum_quantity_issue_one">{message:RemixCart/MinimumQuantityRuleIssueSingular_template}</li>
            <li data-ecp-handle="event_minimum_quantity_issue_many">{message:RemixCart/MinimumQuantityRuleIssuePlural_template}</li>
            <li data-ecp-handle="event_maximum_quantity_issue_one">{message:RemixCart/MaximumQuantityRuleIssueSingular_template}</li>
            <li data-ecp-handle="event_maximum_quantity_issue_many">{message:RemixCart/MaximumQuantityRuleIssuePlural_template}</li>
            <li data-ecp-handle="event_minimum_value_issue">{message:RemixCart/MinimumValueRuleIssue_template}</li>
          </ul>
        </div>
      </div>
    </div>
    <div data-ecp-handle="requirements_passed_section" aria-live="polite">
      <div class="ecp-callout-box">{message:RemixCart/OKToCheckoutMessage}</div>
    </div>
    <button data-ecp-action="review" data-ecp-handle="review_button" disabled="true">{message:RemixCart/ReviewButton}</button>
  </form>
  <a href="#" class="ecp-option" data-ecp-action="cancel">{message:RemixCart/CancelLink}</a>
</div>