{{inject 'outOfStockDefaultMessage' (lang 'products.out_of_stock_default_message')}}

{{ assignVar "imageURL" product.main_image.data }}
{{ assignVar "imageURL" (join (split (getVar 'imageURL') "https://cdn11.bigcommerce.com/") "") }}
{{ assignVar "imageURL" (join (split (getVar 'imageURL') "?c=1") "") }}
{{ assignVar "imageURL" (join (split (getVar 'imageURL') "{:size}") "original") }}


<div class="productView"
    data-event-type="product"
    data-entity-id="{{product.id}}"
    data-name="{{product.title}}"
    data-product-category="
    {{#each product.category}}
        {{#if @last}}{{this}}{{else}}{{this}}, {{/if}}
    {{/each}}"
    data-product-brand="{{product.brand.name}}"
    data-product-price="
    {{#or customer (unless settings.hide_price_from_guests)}}
        {{#if product.price.with_tax}}
            {{product.price.with_tax.value}}
        {{else}}
            {{product.price.without_tax.value}}
        {{/if}}
    {{else}}
        {{lang 'common.login_for_pricing'}}
    {{/or}}"
    data-product-variant="single-product-option">

    {{#each product.reviews.messages}}
        {{#if error}}
            {{> components/common/alert/alert-error error}}
        {{/if}}
        {{#if success}}
            {{> components/common/alert/alert-success success}}
        {{/if}}
    {{/each}}

    <section class="productView-images" data-image-gallery>
        {{!--
            Note that these image sizes are coupled to image sizes used in /assets/js/theme/common/product-details.js
            for variant/rule image replacement
        --}}
        {{#if product.images.length '>' 1 }}
        {{> components/carousel-content-announcement}}
        {{/if}}
        <figure class="productView-image"
                data-image-gallery-main
                {{#if product.main_image}}
                data-zoom-image="https://your-sirv-account.sirv.com/{{ getVar 'imageURL' }}"
                {{/if}}
                >
            <div class="productView-img-container">
                {{!-- Remove the surrounding a-element if there is no main image. --}}
                {{#if product.main_image}}
                    <a href="https://your-sirv-account.sirv.com/{{ getVar 'imageURL' }}"
                        target="_blank">
                {{/if}}
                {{> components/common/responsive-img
                    image=product.main_image
                    class="productView-image--default"
                    fallback_size=theme_settings.product_size
                    lazyload=theme_settings.lazyload_mode
                    default_image=theme_settings.default_image_product
                    otherAttributes="data-main-image"
                }}
                {{!-- Remove the surrounding a-element if there is no main image. --}}
                {{#if product.main_image}}
                    </a>
                {{/if}}
            </div>
        </figure>
        <ul class="productView-thumbnails"{{#gt product.images.length 5}} data-slick='{
                "infinite": false,
                "mobileFirst": true,
                "dots": false,
                "accessibility": false,
                "slidesToShow": 5,
                "slidesToScroll": 5
            }'{{/gt}}>
            {{#each product.images}}
            
                {{ assignVar "imageURL" this.data }}
                {{ assignVar "imageURL" (join (split (getVar 'imageURL') "https://cdn11.bigcommerce.com/") "") }}
                {{ assignVar "imageURL" (join (split (getVar 'imageURL') "?c=1") "") }}
                {{ assignVar "imageURL" (join (split (getVar 'imageURL') "{:size}") "original") }}
            
                <li class="productView-thumbnail">
                    <a
                        class="productView-thumbnail-link"
                        href="https://your-sirv-account.sirv.com/{{ getVar 'imageURL' }}"
                        data-image-gallery-item
                        data-image-gallery-new-image-url="https://your-sirv-account.sirv.com/{{ getVar 'imageURL' }}"
                        data-image-gallery-new-image-srcset="https://your-sirv-account.sirv.com/{{ getVar 'imageURL' }}"
                        data-image-gallery-zoom-image-url="https://your-sirv-account.sirv.com/{{ getVar 'imageURL' }}"
                    >
                    {{> components/common/responsive-img
                        image=this
                        fallback_size=../theme_settings.productview_thumb_size
                        lazyload=../theme_settings.lazyload_mode
                    }}
                    </a>
                </li>
            {{/each}}
        </ul>
    </section>

    <section class="productView-details product-data">
        <div class="productView-product">
            <h1 class="productView-title">{{product.title}}</h1>
            {{#if product.brand}}
                <h2 class="productView-brand">
                    <a href="{{product.brand.url}}"><span>{{product.brand.name}}</span></a>
                </h2>
            {{/if}}
            {{#if product.call_for_price}}
                <p class="productView-price">
                    <span>{{product.call_for_price}}</span>
                </p>
            {{/if}}
            <div class="productView-price">
                {{#or customer (unless settings.hide_price_from_guests)}}
                    {{> components/products/price price=product.price}}
                {{else}}
                    {{> components/common/login-for-pricing}}
                {{/or}}
            </div>
            {{{region name="product_below_price"}}}
            <div class="productView-rating">
                {{#if settings.show_product_rating}}
                    {{> components/products/ratings rating=product.rating}}
                    {{#if product.num_reviews '>' 0}}
                        <a href="{{product.url}}{{#if is_ajax}}#product-reviews{{/if}}" id="productReview_link">
                            {{lang 'products.reviews.link_to_review' total=product.num_reviews}}
                        </a>
                    {{else}}
                        <span>{{lang 'products.reviews.link_to_review' total=product.num_reviews}}</span>
                    {{/if}}
                {{/if}}
                {{#if settings.show_product_reviews}}
                    <a href="{{product.url}}{{#if is_ajax}}#write_review{{/if}}"
                       class="productView-reviewLink productView-reviewLink--new"
                       {{#unless is_ajax}}data-reveal-id="modal-review-form"{{/unless}}
                       role="button"
                    >
                       {{lang 'products.reviews.new'}}
                    </a>
                    {{#unless is_ajax}}
                        {{> components/products/modals/writeReview}}
                    {{/unless}}
                {{/if}}
            </div>
            {{product.detail_messages}}
            <dl class="productView-info">
                <dt class="productView-info-name sku-label"{{#unless product.sku}} style="display: none;"{{/unless}}>{{lang 'products.sku'}}</dt>
                <dd class="productView-info-value" data-product-sku>{{product.sku}}</dd>
                <dt class="productView-info-name upc-label"{{#unless product.upc}} style="display: none;"{{/unless}}>{{lang 'products.upc'}}</dt>
                <dd class="productView-info-value" data-product-upc>{{product.upc}}</dd>
                {{#if product.condition}}
                    <dt class="productView-info-name">{{lang 'products.condition'}}</dt>
                    <dd class="productView-info-value">{{product.condition}}</dd>
                {{/if}}
                {{#if product.availability}}
                    <dt class="productView-info-name">{{lang 'products.availability'}}</dt>
                    <dd class="productView-info-value">{{product.availability}}</dd>
                {{/if}}
                {{#all product.weight theme_settings.show_product_weight}}
                    <dt class="productView-info-name">{{lang 'products.weight'}}</dt>
                    <dd class="productView-info-value" data-product-weight>{{product.weight}}</dd>
                {{/all}}
                {{#all product.width product.height product.depth theme_settings.show_product_dimensions}}
                    <dt class="productView-info-name">{{lang 'products.width'}}</dt>
                    <dd class="productView-info-value" data-product-width>
                        {{product.width}}
                        {{#if settings.measurements.length '==' 'Centimeters'}}
                        ({{lang 'products.measurement.metric'}})
                        {{else}}
                        ({{lang 'products.measurement.imperial'}})
                        {{/if}}
                    </dd>
                    <dt class="productView-info-name">{{lang 'products.height'}}</dt>
                    <dd class="productView-info-value" data-product-height>
                        {{product.height}}
                        {{#if settings.measurements.length '==' 'Centimeters'}}
                        ({{lang 'products.measurement.metric'}})
                        {{else}}
                        ({{lang 'products.measurement.imperial'}})
                        {{/if}}
                    </dd>
                    <dt class="productView-info-name">{{lang 'products.depth'}}</dt>
                    <dd class="productView-info-value" data-product-depth>
                        {{product.depth}}
                        {{#if settings.measurements.length '==' 'Centimeters'}}
                        ({{lang 'products.measurement.metric'}})
                        {{else}}
                        ({{lang 'products.measurement.imperial'}})
                        {{/if}}
                    </dd>
                {{/all}}
                {{#if product.min_purchase_quantity}}
                    <dt class="productView-info-name">{{lang 'products.min_purchase_quantity'}}</dt>
                    <dd class="productView-info-value">{{lang 'products.purchase_units' quantity=product.min_purchase_quantity}}</dd>
                {{/if}}
                {{#if product.max_purchase_quantity}}
                    <dt class="productView-info-name">{{lang 'products.max_purchase_quantity'}}</dt>
                    <dd class="productView-info-value">{{lang 'products.purchase_units' quantity=product.max_purchase_quantity}}</dd>
                {{/if}}
                {{#if product.gift_wrapping_available}}
                    <dt class="productView-info-name">{{lang 'products.gift_wrapping'}}</dt>
                    <dd class="productView-info-value">{{lang 'products.gift_wrapping_available'}}</dd>
                {{/if}}
                {{#if product.shipping}}
                    {{#if product.shipping.calculated}}
                        <dt class="productView-info-name">{{lang 'products.shipping'}}</dt>
                        <dd class="productView-info-value">{{lang 'products.shipping_calculated'}}</dd>
                    {{else}}
                        {{#if product.shipping.price.value '===' 0}}
                            <dt class="productView-info-name">{{lang 'products.shipping'}}</dt>
                            <dd class="productView-info-value">{{lang 'products.shipping_free'}}</dd>
                        {{else}}
                            <dt class="productView-info-name">{{lang 'products.shipping'}}</dt>
                            <dd class="productView-info-value">{{lang 'products.shipping_fixed' amount=product.shipping.price.formatted}}</dd>
                        {{/if}}
                    {{/if}}
                {{/if}}

                {{#if settings.bulk_discount_enabled}}
                    <div class="productView-info-bulkPricing">
                        {{> components/products/bulk-discount-rates bulk_discount_rates=product.bulk_discount_rates}}
                    </div>
                {{/if}}

                {{#if theme_settings.show_custom_fields_tabs '!==' true}}
                    {{> components/products/custom-fields }}
                {{/if}}
            </dl>
        </div>
    </section>

    <section class="productView-details product-options">
        <div class="productView-options">
            {{#if product.release_date }}
                <p>{{product.release_date}}</p>
            {{/if}}
            <form class="form" method="post" action="{{product.cart_url}}" enctype="multipart/form-data"
                  data-cart-item-add>
                <input type="hidden" name="action" value="add">
                <input type="hidden" name="product_id" value="{{product.id}}"/>
                <div data-product-option-change style="display:none;">
                    {{inject 'showSwatchNames' theme_settings.show_product_swatch_names}}
                    {{#each product.options}}
                        {{{dynamicComponent 'components/products/options'}}}
                    {{/each}}
                </div>
                <div class="form-field form-field--stock{{#unless product.stock_level}} u-hiddenVisually{{/unless}}">
                    <label class="form-label form-label--alternate">
                        {{lang 'products.current_stock'}}
                        <span data-product-stock>{{product.stock_level}}</span>
                    </label>
                </div>
                {{> components/products/add-to-cart with_wallet_buttons=true}}
                {{#if product.out_of_stock}}
                    {{#if product.out_of_stock_message}}
                        {{> components/common/alert/alert-error product.out_of_stock_message}}
                    {{else}}
                        {{> components/common/alert/alert-error (lang 'products.sold_out')}}
                    {{/if}}
                {{/if}}
            </form>
            {{#if settings.show_wishlist}}
                {{> components/common/wishlist-dropdown}}
            {{/if}}
        </div>
        {{> components/common/share url=product.url}}
    </section>

    <article class="productView-description">
        {{#if theme_settings.show_product_details_tabs}}
            {{> components/products/description-tabs}}
        {{else}}
            {{> components/products/description}}
        {{/if}}
    </article>
</div>

<div id="previewModal" class="modal modal--large" data-reveal>
    {{> components/common/modal/modal-close-btn }}
    <div class="modal-content"></div>
    <div class="loadingOverlay"></div>
</div>