<div class="ecp-list-item {message:css_class}" data-ecp-id="{message:product_id}" role="listitem" aria-level="2">
  <h3><a href="{message:__productdetail_link}" data-ecp-action="load-product" data-ecp-key="{message:slug}">{message:product_name}</a></h3>
  <ul class="ecp-item-list" data-ecp-handle="attributes">
    <li data-ecp-handle="attribute_1">{message:CategoriesList/Attribute1_template}</li>
    <li data-ecp-handle="attribute_2">{message:CategoriesList/Attribute2_template}</li>
    <li data-ecp-handle="attribute_3">{message:CategoriesList/Attribute3_template}</li>
  </ul>
  <div class="ecp-html-subtitle" data-ecp-handle="feature_text">{message:feature_text}</div>
  <div class="ecp-columns ecp-clearfix">
    <div class="ecp-columns-left">
      <img src="{message:image_1}" alt="{message:CategoriesList/ImageAlt_template}">
    </div>
    <div class="ecp-columns-right">
      <span data-ecp-handle="discounted">
        <span class="ecp-price-discounted" aria-label="{message:CategoriesList/DiscountPriceLabel}">{currency:cart_discount_price}</span><span class="ecp-price-regular" aria-label="{message:CategoriesList/RegularPriceLabel}">{currency:cart_regular_price}</span>
      </span>
      <span data-ecp-handle="not_discounted">
        <div class="ecp-price" aria-label="{message:CategoriesList/PriceLabel}">{currency:price}</div>
      </span>
      <div class="ecp-html-content">{message:display_title}</div>
    </div>
  </div>
  <div class="ecp-section" data-ecp-handle="available">
    <form class="ecp-form">
      <div class="ecp-form-row ecp-clearfix">
        <span class="ecp-form-row-col-25">
          <select name="product_qty" aria-label="{message:CategoriesList/ProductQuantityLabel_template}">
            <!-- | CategoriesList_Option template | -->
          </select>
        </span>
        <span class="ecp-form-row-col-75">
          <button data-ecp-action="add-to-cart" data-ecp-handle="add_to_cart" aria-label="{message:CategoriesList/AddToCartButtonLabel_template}" aria-haspopup="dialog">{message:CategoriesList/AddToCartButton}</button>
          <span data-ecp-handle="add_more_to_cart">
            <button data-ecp-action="add-to-cart" aria-label="{message:CategoriesList/AddMoreToCartButtonLabel_template}" aria-haspopup="dialog">{message:CategoriesList/AddMoreToCartButton}</button>
            <p class="ecp-form-tip ecp-text-center">{message:CategoriesList/CartCount_template}</p>
          </span>
        </span>
      </div>
    </form>
  </div>
  <div class="ecp-section" data-ecp-handle="not_available">
    <div class="ecp-callout-box">
      <span data-ecp-handle="status_back_ordered">{message:CategoriesList/Status/BackOrdered}</span>
      <span data-ecp-handle="status_call">{message:CategoriesList/Status/Call}</span>
      <span data-ecp-handle="status_discontinued">{message:CategoriesList/Status/Discontinued}</span>
      <span data-ecp-handle="status_pre_ordered">{message:CategoriesList/Status/PreOrdered}</span>
      <span data-ecp-handle="status_restricted_allocated">{message:CategoriesList/Status/RestrictedAllocated}</span>
      <span data-ecp-handle="status_restricted_wine_club">{message:CategoriesList/Status/RestrictedWineClub}</span>
      <span data-ecp-handle="status_sold_out">{message:CategoriesList/Status/SoldOut}</span>
      <span data-ecp-handle="status_maxed_out">{message:CategoriesList/Status/MaxedOut_template}</span>
      <span data-ecp-handle="status_">{message:CategoriesList/Status/Unknown}</span>
      <span data-ecp-handle="status_restricted_ship_state"></span>
    </div>
  </div>
  <div class="ecp-section" data-ecp-handle="variants">
    <form class="ecp-form">
      <div class="ecp-form-row ecp-clearfix">
        <span class="ecp-form-row">
          <button data-ecp-action="view-variants" data-ecp-handle="view_variants" aria-label="{message:CategoriesList/SelectOptionsButtonLabel_template}" aria-haspopup="dialog">{message:CategoriesList/SelectOptionsButton}</button>
        </span>
        <div class="ecp-slide-toggle" data-ecp-handle="variants-list-wrapper">
          <div class="ecp-section ecp-card" data-ecp-handle="variants-list" role="list">
            <!-- | CategoriesList__Variant template | -->
          </div>
          <div class="ecp-grid">
            <div class="ecp-grid-row ecp-clearfix">
              <span class="ecp-grid-col-6">
                <button class="ecp-secondary" data-ecp-action="cancel-variants">{message:CategoriesList/CancelProductVariantsButton}</button>
              </span>
              <span class="ecp-grid-col-6">
                <button data-ecp-action="add-variants">{message:CategoriesList/AddProductVariantsButton}</button>
              </span>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>