.grid
  .grid__cell.grid__cell--60-at-medium
    = render 'workarea/storefront/products/media', product: product

  .grid__cell.grid__cell--40-at-medium
    .product-details__info
      .product-details__name
        %h1.product-details__heading{ itemprop: 'name' }= product.name

      .product-prices.product-prices--details{ itemprop: 'offers', itemscope: true, itemtype: 'http://schema.org/Offer' }
        = render 'workarea/storefront/products/pricing', product: product

      - if product.description.present?
        .product-details__description
          %p= truncated_product_description(product, t('workarea.storefront.products.read_more'))

      %p.product-details__id
        %span{ itemprop: 'productID' }= product.id

      = form_tag cart_items_path, method: 'post', class: 'product-details__add-to-cart-form', data: { dialog_form: { dialogOptions: { closeAll: true, initModules: true } }, analytics: add_to_cart_analytics_data(product).to_json } do
        = hidden_field_tag :product_id, product.id, id: dom_id(product, 'product_id')
        = hidden_field_tag :sku, product.current_sku
        = hidden_field_tag :via, params[:via], id: dom_id(product, 'via')

        - product.options_for_selection.each_with_index do |option, index|
          .property
            = label_tag option.slug, nil, class: 'property__name', for: "#{option.slug}_#{dom_id(product)}", id: "aria_product_option_#{option.slug}_#{index}" do
              %span.property__text= option_label(option)
            .value
              - option.selections.each do |selection|
                = radio_button_tag option.slug, selection, option.current == selection, required: true, title: selection, class: 'visually-hidden', aria: { labelledby: "aria_product_option_#{option.slug}_#{index}" }
                = link_to option_selection_url_for(product, option, selection), title: selection, class: "option-button option-button--#{selection.downcase.dasherize}#{' option-button--active' if option.current == selection}", data: { option_button: '' } do
                  - if product.images_by_option[selection.optionize].present?
                    = image_tag(product_image_url(product.images_by_option[selection.optionize].first, :swatch_thumb), alt: selection, class: 'option-button__image')
                  - else
                    %span.option-button__text= selection

        - unless product.currently_selected_options.blank?
          = link_to t('workarea.storefront.products.clear_selections'), product_path(product), class: 'text-button text-button--block', data: { option_button: '' }

        - if product.current_sku.present?
          %p.product-details__inventory-status= product.inventory_status

        = append_partials('storefront.add_to_cart_form', product: product)

        - if product.purchasable?
          .product-details__quantity
            .property
              = label_tag :quantity, nil, class: 'property__name', for: "quantity#{dom_id(product)}" do
                %span.property__text= t('workarea.storefront.products.quantity')
              .value
                = number_field_tag :quantity, params[:quantity] || 1, class: 'text-box text-box--x-small', required: true, min: 1, id: "quantity#{dom_id(product)}"

          .product-details__add-to-cart-action= button_tag t('workarea.storefront.products.add_to_cart'), value: 'add_to_cart', class: 'button button--solid button--large button--full'

        - else
          = hidden_field_tag :quantity, params[:quantity] || 1, id: "quantity#{dom_id(product)}"
          %p.product-details__unavailable= t('workarea.storefront.products.unavailable')

      = append_partials('storefront.product_details', product: product)

      %p.product-details__full-details=link_to t('workarea.storefront.products.view_full_details'), product_path(product, color: params[:color]), class: 'text-button', itemprop: 'url'