<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="index, follow">
<meta name="author" content="Mietubl">
<meta name="description" content="{{ product.seo_description }}">
<meta name="keywords" content="{{product.seo_keywords}}">
<title>{{product.seo_title}}</title>
{% include '_header_css.liquid' %}
</head>
<body>

<!-- MAIN WRAPPER -->
<div class="body-wrap shop-default shop-cards shop-tech">
    <div id="st-container" class="st-container">
        <div class="st-pusher">
            <div class="st-content">
                <div class="st-content-inner">
                    <!-- HEADER -->
                    {% include '_header.liquid' %}
                    <!-- END: HEADER -->

                    <section class="slice sct-color-1">
                        <div class="container">
                            <!-- Product gallery and Description -->
                            <div class="row cols-xs-space cols-sm-space cols-md-space">
                                <div class="col-lg-6">
                                    <div class="gallery-container">
                                        <div id="slideshow" class="gallery-top no-padding bg-transparent"></div>
                                        <div id="slideshow_thumbs" class="swiper-js-container gallery-thumbs gallery-thumbs--style-1 mt-4">
                                            <div class="swiper-container" data-swiper-items="5" data-swiper-space-between="10" data-swiper-xs-items="3" data-swiper-xs-space-between="10" data-swiper-sm-items="4" data-swiper-sm-space-between="10">
                                                <div class="swiper-wrapper">

                                                    {% for item in product.images %}
                                                        <div class="swiper-slide">
                                                            <a href="{{ site.image_base_url }}{{ item.image_url }}?x-oss-process=image/resize,w_500,m_lfit" data-desoslide-index="{{ forloop.index0 }}">
                                                                <img src="{{ site.image_base_url }}{{ item.image_url }}?x-oss-process=image/resize,m_pad,w_100,h_100" alt="{{ product.title }}">
                                                            </a>
                                                        </div>
                                                    {% endfor %}

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="px-2">
                                        <!-- Product description -->
                                        <div class="product-description-wrapper px-1">
                                            <!-- Product title -->
                                            <h2 class="product-title">
                                                {{product.title | strip_html }}
                                            </h2>
                                            <hr>
                                            <div class="row align-items-center">

                                            </div>

                                            <!-- Product description -->

                                            <table class="table table-specs">
                                                <tbody>
                                                {% for item in product.parameters %}


                                                <tr>
                                                    <td>
                                                        <span class="c-gray-light strong-600">  {{ item.key }}</span>
                                                    </td>
                                                    <td>
                                                        {{ item.value }}
                                                    </td>
                                                </tr>
                                                {% endfor %}
                                                </tbody>
                                            </table>
                                            <hr>
                                            <div class="row row-no-padding no-margin">
                                                <div class="col-lg-8">
                                                    <form class="form-default">
                                                        <!-- Choose size -->
                                                        <label class="strong-600">Contact us </label>


                                                        <div class="d-table product-quantity width-100 mt-3">

                                                            <div class="d-table-cell">
                                                                <a data-fancybox data-src="#fancybox_hidden_content" class="btn btn-base-1 btn-icon-left" href="javascript:;">
                                                                    <i class="icon ion-android-add"></i>     Get a quote
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <span class="space-xs-xl"></span>

                            <div class="row-wrapper">
                                <div class="row cols-xs-space cols-sm-space cols-md-space">
                                    <div class="col-lg-12">
                                        <div class="feature  feature--bg-1">
                                            <h3 class="heading heading-6 strong-600">     Description:</h3>



                                            <p>
                                                {{product.content | raw }}
                                            </p>
                                        </div>
                                    </div>


                                </div>


                            </div>

                        </div>
                    </section>

                    <!-- FOOTER -->
                    {% include '_footer.liquid' %}
                </div>
            </div>
        </div><!-- END: st-pusher -->
    </div><!-- END: st-container -->
</div><!-- END: body-wrap -->
<a href="#" class="back-to-top btn-back-to-top"></a>

<!-- Hidden content -->
<div   id="fancybox_hidden_content" style="display:none;">
    <h4 >Get a quote</h4>
    <form id="form_contact" data-action="/contact" class="form-default" role="form">
        <input type="hidden" name="_token" value="{{ csrf_token }}">
        <div class="row">
            <div class="col-md-6">
                <div class="form-group has-feedback">
                    <label for="" class="text-uppercase c-gray-light">Your name</label>
                    <input type="text" name="customer_name" class="form-control form-control-lg" required>
                    <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
                    <div class="help-block with-errors"></div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group has-feedback">
                    <label for="" class="text-uppercase c-gray-light">Email address</label>
                    <input type="email" name="email" class="form-control form-control-lg" required>
                    <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
                    <div class="help-block with-errors"></div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="form-group has-feedback">
                    <label for="" class="text-uppercase c-gray-light">Company name</label>
                    <input type="text" name="company_name" class="form-control form-control-lg">
                    <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
                    <div class="help-block with-errors"></div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group has-feedback">
                    <label for="" class="text-uppercase c-gray-light">Phone/whats_app</label>
                    <input type="text" name="whats_app" class="form-control form-control-lg" required>
                    <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
                    <div class="help-block with-errors"></div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="form-group has-feedback">
                    <label for=""  class="text-uppercase c-gray-light">Message</label>
                    <textarea name="content" class="form-control no-resize" rows="5" required></textarea>
                    <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
                    <div class="help-block with-errors"></div>
                </div>
            </div>
        </div>

        <div class="">


            <button type="reset" class="btn-reset d-none"></button>
            <button type="submit" class="btn btn-styled btn-base-1 mt-4">Send message</button>
        </div>
    </form>

</div>




{% include '_footer_js.liquid' %}


<!-- Deso Slide -->
<script src="/static/js/jquery.desoslide.min.js"></script>
<script>
    $('#slideshow').desoSlide({
        thumbs: $('#slideshow_thumbs .swiper-slide > a'),
        thumbEvent: 'click',
        first: 0,
        effect: 'none',
        overlay: 'none',
        controls: {
            show: false,
            keys: false
        },
    });
</script>
</body>
</html>
