<commit_before><template>
  <div id="product">
    <section class="bg-cl-secondary px20 product-top-section">
      <div class="container">
        <section class="row m0 between-xs">
          <div class="col-xs-12 col-md-6 center-xs middle-xs image">
            <product-gallery
              :gallery="gallery"
              :offline="offlineImage"
              :configuration="configuration"
            />
          </div>
          <div class="col-xs-12 col-md-5 data">
            <breadcrumbs
              class="pt40 pb20 hidden-xs"
              :routes="breadcrumbs.routes"
              :active-route="breadcrumbs.name"
            />
            <h1 class="mb20 mt0 cl-mine-shaft product-name">
              {{ product.name | htmlDecode }}
            </h1>
            <div class="mb20 uppercase cl-secondary">
              sku: {{ product.sku }}
            </div>
            <div
              class="mb40 price serif"
              v-if="product.type_id !== 'grouped'"
            >
              <div
                class="h3 cl-secondary"
                v-if="product.special_price && product.priceInclTax && product.originalPriceInclTax"
              >
                <span class="h2 cl-mine-shaft weight-700">
                  {{ product.priceInclTax | price }}
                </span>&nbsp;
                <span class="price-original h3">
                  {{ product.originalPriceInclTax | price }}
                </span>
              </div>
              <div
                class="h2 cl-mine-shaft weight-700"
                v-if="!product.special_price && product.priceInclTax"
              >
                {{ product.priceInclTax | price }}
              </div>
            </div>
            <div
              class="cl-primary variants"
              v-if="product.type_id =='configurable' && !loading"
            >
              <div class="error" v-if="product.errors && Object.keys(product.errors).length > 0">
                {{ product.errors | formatProductMessages }}
              </div>
              <div
                class="h5"
                v-for="(option, index) in product.configurable_options"
                v-if="!product.errors || Object.keys(product.errors).length === 0"
                :key="index"
              >
                <div class="variants-label">
                  {{ option.label }}
                  <span class="weight-700">
                    {{ configuration[option.attribute_code ? option.attribute_code : option.label.toLowerCase()].label }}
                  </span>
                </div>
                <div class="row top-xs m0 pt15 pb40 variants-wrapper">
                  <div v-if="option.label == 'Color'">
                    <color-selector
                      v-for="(c, i) in options.color"
                      :key="i"
                      :id="c.id"
                      :label="c.label"
                      context="product"
                      code="color"
                      :class="{ active: c.id == configuration.color.id }"
                    />
                  </div>
                  <div class="sizes" v-else-if="option.label == 'Size'">
                    <size-selector
                      v-for="(s, i) in options.size"
                      :key="i"
                      :id="s.id"
                      :label="s.label"
                      context="product"
                      code="size"
                      class="mr10 mb10"
                      :class="{ active: s.id == configuration.size.id }"
                      v-focus-clean
                    />
                  </div>
                  <div :class="option.attribute_code" v-else>
                    <generic-selector
                      v-for="(s, i) in options[option.attribute_code]"
                      :key="i"
                      :id="s.id"
                      :label="s.label"
                      context="product"
                      :code="option.attribute_code"
                      class="mr10 mb10"
                      :class="{ active: s.id == configuration[option.attribute_code].id }"
                      v-focus-clean
                    />
                  </div>
                  <router-link
                    to="/size-guide"
                    v-if="option.label == 'Size'"
                    class="
                      p0 ml30 inline-flex middle-xs no-underline h5
                      action size-guide pointer cl-secondary
                    "
                  >
                    <i class="pr5 material-icons">accessibility</i>
                    <span>
                      {{ $t('Size guide') }}
                    </span>
                  </router-link>
                </div>
              </div>
            </div>
            <product-links
              v-if="product.type_id =='grouped' && !loading"
              :products="product.product_links"
            />
            <product-bundle-options
              v-if="product.bundle_options && product.bundle_options.length > 0 && !loading"
              :product="product"
            />
            <product-custom-options
              v-else-if="product.custom_options && product.custom_options.length > 0 && !loading"
              :product="product"
            />
            <div class="row m0">
              <add-to-cart
                :product="product"
                class="col-xs-12 col-sm-4 col-md-6"
              />
            </div>
            <div class="row py40 add-to-buttons">
              <div class="col-xs-6 col-sm-3 col-md-6">
                <button
                  @click="isOnWishlist ? removeFromList('wishlist') : addToList('wishlist')"
                  class="
                    p0 inline-flex middle-xs bg-cl-transparent brdr-none
                    action h5 pointer cl-secondary
                  "
                  type="button"
                >
                  <i class="pr5 material-icons">{{ favoriteIcon }}</i>
                  <template v-if="!isOnWishlist">
                    {{ $t('Add to favorite') }}
                  </template>
                  <template v-else>
                    {{ $t('Remove') }}
                  </template>
                </button>
              </div>
              <div class="col-xs-6 col-sm-3 col-md-6">
                <button
                  @click="isOnCompare ? removeFromList('compare') : addToList('compare')"
                  class="
                    p0 inline-flex middle-xs bg-cl-transparent brdr-none
                    action h5 pointer cl-secondary
                  "
                  type="button"
                >
                  <i class="pr5 material-icons">compare</i>
                  <template v-if="!isOnCompare">
                    {{ $t('Add to compare') }}
                  </template>
                  <template v-else>
                    {{ $t('Remove from compare') }}
                  </template>
                </button>
              </div>
            </div>
          </div>
        </section>
      </div>
    </section>
    <section class="container pt50 pb20 px20 cl-accent details">
      <h2 class="h3 m0 mb10 serif lh20 details-title">
        {{ $t('Product details') }}
      </h2>
      <div
        class="h4 details-wrapper"
        :class="{'details-wrapper--open': detailsOpen}"
      >
        <div class="row between-md m0">
          <div class="col-xs-12 col-sm-6">
            <div
              class="lh30 h5"
              v-html="product.description"
            />
          </div>
          <div class="col-xs-12 col-sm-5">
            <ul class="attributes p0 pt5 m0">
              <product-attribute
                :key="attr.attribute_code"
                v-for="attr in customAttributes"
                :product="product"
                :attribute="attr"
                empty-placeholder="N/A"
              />
            </ul>
          </div>
          <div
            class="details-overlay"
            @click="showDetails"
          />
        </div>
      </div>
    </section>
    <related-products
      type="upsell"
      :heading="$t('We found other products you might like')"
    />
    <promoted-offers single-banner />
    <related-products type="related" />
  </div>
</template>

<script>
import Product from 'core/pages/Product'

import RelatedProducts from 'theme/components/core/blocks/Product/Related.vue'
import AddToCart from 'theme/components/core/AddToCart.vue'
import GenericSelector from 'core/components/GenericSelector'
import ColorSelector from 'theme/components/core/ColorSelector.vue'
import SizeSelector from 'theme/components/core/SizeSelector.vue'
import Breadcrumbs from 'theme/components/core/Breadcrumbs.vue'
import ProductAttribute from 'theme/components/core/ProductAttribute.vue'
import ProductTile from 'theme/components/core/ProductTile.vue'
import ProductLinks from 'theme/components/core/ProductLinks.vue'
import ProductCustomOptions from 'theme/components/core/ProductCustomOptions.vue'
import ProductBundleOptions from 'theme/components/core/ProductBundleOptions.vue'
import ProductGallery from 'theme/components/core/ProductGallery'
import PromotedOffers from 'theme/components/theme/blocks/PromotedOffers/PromotedOffers.vue'
import focusClean from 'theme/components/theme/directives/focusClean'

export default {
  components: {
    AddToCart,
    Breadcrumbs,
    ColorSelector,
    GenericSelector,
    ProductAttribute,
    ProductBundleOptions,
    ProductCustomOptions,
    ProductGallery,<commit_msg>#649 - removed file ext<commit_after><template>
  <div id="product">
    <section class="bg-cl-secondary px20 product-top-section">
      <div class="container">
        <section class="row m0 between-xs">
          <div class="col-xs-12 col-md-6 center-xs middle-xs image">
            <product-gallery
              :gallery="gallery"
              :offline="offlineImage"
              :configuration="configuration"
            />
          </div>
          <div class="col-xs-12 col-md-5 data">
            <breadcrumbs
              class="pt40 pb20 hidden-xs"
              :routes="breadcrumbs.routes"
              :active-route="breadcrumbs.name"
            />
            <h1 class="mb20 mt0 cl-mine-shaft product-name">
              {{ product.name | htmlDecode }}
            </h1>
            <div class="mb20 uppercase cl-secondary">
              sku: {{ product.sku }}
            </div>
            <div
              class="mb40 price serif"
              v-if="product.type_id !== 'grouped'"
            >
              <div
                class="h3 cl-secondary"
                v-if="product.special_price && product.priceInclTax && product.originalPriceInclTax"
              >
                <span class="h2 cl-mine-shaft weight-700">
                  {{ product.priceInclTax | price }}
                </span>&nbsp;
                <span class="price-original h3">
                  {{ product.originalPriceInclTax | price }}
                </span>
              </div>
              <div
                class="h2 cl-mine-shaft weight-700"
                v-if="!product.special_price && product.priceInclTax"
              >
                {{ product.priceInclTax | price }}
              </div>
            </div>
            <div
              class="cl-primary variants"
              v-if="product.type_id =='configurable' && !loading"
            >
              <div class="error" v-if="product.errors && Object.keys(product.errors).length > 0">
                {{ product.errors | formatProductMessages }}
              </div>
              <div
                class="h5"
                v-for="(option, index) in product.configurable_options"
                v-if="!product.errors || Object.keys(product.errors).length === 0"
                :key="index"
              >
                <div class="variants-label">
                  {{ option.label }}
                  <span class="weight-700">
                    {{ configuration[option.attribute_code ? option.attribute_code : option.label.toLowerCase()].label }}
                  </span>
                </div>
                <div class="row top-xs m0 pt15 pb40 variants-wrapper">
                  <div v-if="option.label == 'Color'">
                    <color-selector
                      v-for="(c, i) in options.color"
                      :key="i"
                      :id="c.id"
                      :label="c.label"
                      context="product"
                      code="color"
                      :class="{ active: c.id == configuration.color.id }"
                    />
                  </div>
                  <div class="sizes" v-else-if="option.label == 'Size'">
                    <size-selector
                      v-for="(s, i) in options.size"
                      :key="i"
                      :id="s.id"
                      :label="s.label"
                      context="product"
                      code="size"
                      class="mr10 mb10"
                      :class="{ active: s.id == configuration.size.id }"
                      v-focus-clean
                    />
                  </div>
                  <div :class="option.attribute_code" v-else>
                    <generic-selector
                      v-for="(s, i) in options[option.attribute_code]"
                      :key="i"
                      :id="s.id"
                      :label="s.label"
                      context="product"
                      :code="option.attribute_code"
                      class="mr10 mb10"
                      :class="{ active: s.id == configuration[option.attribute_code].id }"
                      v-focus-clean
                    />
                  </div>
                  <router-link
                    to="/size-guide"
                    v-if="option.label == 'Size'"
                    class="
                      p0 ml30 inline-flex middle-xs no-underline h5
                      action size-guide pointer cl-secondary
                    "
                  >
                    <i class="pr5 material-icons">accessibility</i>
                    <span>
                      {{ $t('Size guide') }}
                    </span>
                  </router-link>
                </div>
              </div>
            </div>
            <product-links
              v-if="product.type_id =='grouped' && !loading"
              :products="product.product_links"
            />
            <product-bundle-options
              v-if="product.bundle_options && product.bundle_options.length > 0 && !loading"
              :product="product"
            />
            <product-custom-options
              v-else-if="product.custom_options && product.custom_options.length > 0 && !loading"
              :product="product"
            />
            <div class="row m0">
              <add-to-cart
                :product="product"
                class="col-xs-12 col-sm-4 col-md-6"
              />
            </div>
            <div class="row py40 add-to-buttons">
              <div class="col-xs-6 col-sm-3 col-md-6">
                <button
                  @click="isOnWishlist ? removeFromList('wishlist') : addToList('wishlist')"
                  class="
                    p0 inline-flex middle-xs bg-cl-transparent brdr-none
                    action h5 pointer cl-secondary
                  "
                  type="button"
                >
                  <i class="pr5 material-icons">{{ favoriteIcon }}</i>
                  <template v-if="!isOnWishlist">
                    {{ $t('Add to favorite') }}
                  </template>
                  <template v-else>
                    {{ $t('Remove') }}
                  </template>
                </button>
              </div>
              <div class="col-xs-6 col-sm-3 col-md-6">
                <button
                  @click="isOnCompare ? removeFromList('compare') : addToList('compare')"
                  class="
                    p0 inline-flex middle-xs bg-cl-transparent brdr-none
                    action h5 pointer cl-secondary
                  "
                  type="button"
                >
                  <i class="pr5 material-icons">compare</i>
                  <template v-if="!isOnCompare">
                    {{ $t('Add to compare') }}
                  </template>
                  <template v-else>
                    {{ $t('Remove from compare') }}
                  </template>
                </button>
              </div>
            </div>
          </div>
        </section>
      </div>
    </section>
    <section class="container pt50 pb20 px20 cl-accent details">
      <h2 class="h3 m0 mb10 serif lh20 details-title">
        {{ $t('Product details') }}
      </h2>
      <div
        class="h4 details-wrapper"
        :class="{'details-wrapper--open': detailsOpen}"
      >
        <div class="row between-md m0">
          <div class="col-xs-12 col-sm-6">
            <div
              class="lh30 h5"
              v-html="product.description"
            />
          </div>
          <div class="col-xs-12 col-sm-5">
            <ul class="attributes p0 pt5 m0">
              <product-attribute
                :key="attr.attribute_code"
                v-for="attr in customAttributes"
                :product="product"
                :attribute="attr"
                empty-placeholder="N/A"
              />
            </ul>
          </div>
          <div
            class="details-overlay"
            @click="showDetails"
          />
        </div>
      </div>
    </section>
    <related-products
      type="upsell"
      :heading="$t('We found other products you might like')"
    />
    <promoted-offers single-banner />
    <related-products type="related" />
  </div>
</template>

<script>
import Product from 'core/pages/Product'

import RelatedProducts from 'theme/components/core/blocks/Product/Related.vue'
import AddToCart from 'theme/components/core/AddToCart.vue'
import GenericSelector from 'core/components/GenericSelector'
import ColorSelector from 'theme/components/core/ColorSelector.vue'
import SizeSelector from 'theme/components/core/SizeSelector.vue'
import Breadcrumbs from 'theme/components/core/Breadcrumbs.vue'
import ProductAttribute from 'theme/components/core/ProductAttribute.vue'
import ProductTile from 'theme/components/core/ProductTile.vue'
import ProductLinks from 'theme/components/core/ProductLinks.vue'
import ProductCustomOptions from 'theme/components/core/ProductCustomOptions.vue'
import ProductBundleOptions from 'theme/components/core/ProductBundleOptions.vue'
import ProductGallery from 'theme/components/core/ProductGallery'
import PromotedOffers from 'theme/components/theme/blocks/PromotedOffers/PromotedOffers'
import focusClean from 'theme/components/theme/directives/focusClean'

export default {
  components: {
    AddToCart,
    Breadcrumbs,
    ColorSelector,
    GenericSelector,
    ProductAttribute,
    ProductBundleOptions,
    ProductCustomOptions,
    ProductGallery,
{'fraction_non_alphanumeric': 0.12102077027450162, 'fraction_numerical': 0.011115749921720071, 'mean_word_length': 1.2815811406119777, 'pattern_counts': {'":': 0, '<': 215, '<?xml version=': 0, '>': 221, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1769972', 'n_tokens_mistral': 5184, 'n_tokens_neox': 4883, 'n_words': 932}