.grid.grid--rev
  .grid__cell.grid__cell--60-at-medium

    .product-details__name
      %h1= product.name

      %p.product-details__id
        %span= product.id

    .product-prices.product-prices--details
      = 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'))

    = form_tag cart_bulk_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 :via, params[:via], id: dom_id(product, 'via')

      %table.product-details__variant-table{ data: { sortable_table: '' } }
        %thead.product-details__variant-table-head
          %tr.product-details__variant-table-row
            %th.product-details__variant-table-cell.product-details__variant-table-cell--image
            %th.product-details__variant-table-cell.product-details__variant-table-cell--sku{ data: { sortable_table_header: '' } }= t('workarea.storefront.variant_list.products.sku')
            - product.all_options.each do |option|
              %th.product-details__variant-table-cell.product-details__variant-table-cell--detail{ data: { sortable_table_header: '' } }= option.titleize
            %th.product-details__variant-table-cell.product-details__variant-table-cell--price{ data: { sortable_table_header: '' } }= t('workarea.storefront.variant_list.products.price')
            %th.product-details__variant-table-cell.product-details__variant-table-cell--quantity= t('workarea.storefront.products.quantity')
        %tbody.product-details__variant-table-body
          - product.variant_list.each_with_index do |variant, index|
            %tr.product-details__variant-table-row
              %td.product-details__variant-table-cell.product-details__variant-table-cell--image
                = image_tag product_image_url(variant.primary_image, :small_thumb), alt: t('workarea.storefront.products.image_alt_attribute', name: variant.name)
              %td.product-details__variant-table-cell.product-details__variant-table-cell--name
                = variant.name

              - product.all_options.each do |option|
                %td.product-details__variant-table-cell.product-details__variant-table-cell--detail{ class: "product-details__variant-table-cell--detail-#{option}" }
                  - if variant.details[option].present?
                    = variant.details[option]
                  - else
                    \-

              %td.product-details__variant-table-cell.product-details__variant-table-cell--price= number_to_currency(variant.price.sell)
              %td.product-details__variant-table-cell.product-details__variant-table-cell--quantity
                - if variant.purchasable?
                  = hidden_field_tag 'items[][sku]', variant.sku, id: nil

                  .property
                    .value
                      = number_field_tag "items[][quantity]", params[:items].try(:[], index).try(:[], :quantity) || 0, class: 'text-box text-box--x-small', min: 0, id: "quantity_#{dom_id(variant)}"
                      .value__note= variant.inventory_status
                - else
                  %p= t('workarea.storefront.variant_list.products.variant_unavailable')

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

      - if product.purchasable?
        %p.product-details__add-to-cart-action= button_tag t('workarea.storefront.products.add_to_cart'), value: 'add_to_cart', class: 'button button--large'

      - 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'

  .grid__cell.grid__cell--40-at-medium

    .product-details__primary-image
      = link_to(product_image_url(product.primary_image, :zoom), target: '_blank', rel: 'noopener', class: 'product-details__primary-image-link', data: { dialog_button: '' }) do
        = image_tag product_image_url(product.primary_image, :detail), alt: t('workarea.storefront.products.image_alt_attribute', name: product.name), class: 'product-details__primary-image-link-image'

    - if product.images.length > 1
      .product-details__alt-images
        .grid.grid--auto
          - product.images.each_with_index do |image, index|
            .grid__cell
              .product-details__alt-image
                - button_class = index == 0 ? 'product-details__alt-image-link product-details__alt-image-link--selected' : 'product-details__alt-image-link'
                = link_to(image_tag(product_image_url(image, :small_thumb), alt: t('workarea.storefront.products.zoom')), product_image_url(image, :zoom), class: button_class, target: '_blank', rel: 'noopener', data: { alternate_image_button: { src: product_image_url(image, :detail) }.to_json })