<div class="ecp-component ecp_ProductDetail {message:css_class}">
  <div data-ecp-id="{message:product_id}">
    <div class="ecp-columns ecp-clearfix">
      <div class="ecp-columns-left">
        <img src="{message:header_image}" alt="{message:ProductDetail/ImageAlt_template}">
      </div>
      <div class="ecp-columns-right">
        <h2>{message:product_name}</h2>
        <div class="ecp-html-subtitle" data-ecp-handle="feature_text">{message:feature_text}</div>

        <ul class="ecp-item-list" data-ecp-handle="attributes">
          <li data-ecp-handle="attribute_1">{message:ProductDetail/Attribute1_template}</li>
          <li data-ecp-handle="attribute_2">{message:ProductDetail/Attribute2_template}</li>
          <li data-ecp-handle="attribute_3">{message:ProductDetail/Attribute3_template}</li>
        </ul>

        <span data-ecp-handle="discounted">
          <span class="ecp-price-discounted" aria-label="{message:ProductDetail/DiscountPriceLabel}">{currency:cart_discount_price}</span><span class="ecp-price-regular" aria-label="{message:ProductDetail/RegularPriceLabel}">{currency:cart_regular_price}</span>
        </span>
        <span data-ecp-handle="not_discounted">
          <div class="ecp-price" aria-label="{message:ProductDetail/PriceLabel}">{currency:price}</div>
        </span>
        <div class="ecp-section" data-ecp-handle="available" role="region" aria-label="{message:ProductDetail/CartRegionLabel}">
          <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:ProductDetail/ProductQuantityLabel}">
                  <!-- | ProductDetail_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:ProductDetail/AddToCartButtonLabel}" aria-haspopup="dialog">{message:ProductDetail/AddToCartButton}</button>
                <span data-ecp-handle="add_more_to_cart">
                  <button data-ecp-action="add-to-cart" aria-label="{message:ProductDetail/AddMoreToCartButtonLabel}" aria-haspopup="dialog">{message:ProductDetail/AddMoreToCartButton}</button>
                  <p class="ecp-form-tip ecp-text-center">{message:ProductDetail/CartCount_template}</p>
                </span>
              </span>
            </div>
          </form>
        </div>
        <div class="ecp-section" data-ecp-handle="not_available" role="region" aria-label="{message:ProductDetail/StatusRegionLabel}">
          <div class="ecp-callout-box">
            <span data-ecp-handle="status_back_ordered">{message:ProductDetail/Status/BackOrdered}</span>
            <span data-ecp-handle="status_call">{message:ProductDetail/Status/Call}</span>
            <span data-ecp-handle="status_discontinued">{message:ProductDetail/Status/Discontinued}</span>
            <span data-ecp-handle="status_pre_ordered">{message:ProductDetail/Status/PreOrdered}</span>
            <span data-ecp-handle="status_restricted_allocated">{message:ProductDetail/Status/RestrictedAllocated}</span>
            <span data-ecp-handle="status_restricted_wine_club">{message:ProductDetail/Status/RestrictedWineClub}</span>
            <span data-ecp-handle="status_sold_out">{message:ProductDetail/Status/SoldOut}</span>
            <span data-ecp-handle="status_maxed_out">{message:ProductDetail/Status/MaxedOut_template}</span>
            <span data-ecp-handle="status_">{message:ProductDetail/Status/Unknown}</span>
            <span data-ecp-handle="status_restricted_ship_state"></span>
          </div>
        </div>

        <div class="ecp-section ecp-variants" data-ecp-handle="variants" role="list">
          <!-- | ProductDetail__Variant template | -->
        </div>

        <div class="ecp-html-content" data-ecp-handle="description" role="region" aria-label="{message:ProductDetail/DescriptionRegionLabel}">{message:description}</div>
        <div class="ecp-section" data-ecp-handle="technical_notes">
          <h3>{message:ProductDetail/TechnicalNotesTitle}</h3>
          <div class="ecp-html-content">{message:technical_notes}</div>
        </div>
        <div class="ecp-section" data-ecp-handle="secondary_notes">
          <h3>{message:ProductDetail/SecondaryNotesTitle}</h3>
          <div class="ecp-html-content">{message:secondary_notes}</div>
        </div>
        <div class="ecp-section" data-ecp-handle="review_notes">
          <h3>{message:ProductDetail/ReviewNotesTitle}</h3>
          <div class="ecp-html-content">{message:review_notes}</div>
        </div>
        <div class="ecp-section" data-ecp-handle="view_pdf">
          <a href="{message:pdf}" target="_blank">{message:ProductDetail/ViewPDFLink}</a>
        </div>
      </div>
    </div>
  </div>
</div>