{% extends "layout.html" %}

{% set title = 'Product Details' %}

{% block content %}

<nav aria-label="breadcrumb">
    <div class="container">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="index.html">Home</a></li>
            <li class="breadcrumb-item"><a href="category.html">Refrigerator</a></li>
            <li class="breadcrumb-item active" aria-current="page">GR-RF646WE</li>
        </ol>
    </div>
</nav>

<section class="product">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="product-images">
                    {% set length = products.length if products.length < 4 else 4 %}
                    {% for i in range(0, length) %}
                    <div class="product-img">
                        <img src="{{products[i].src}}" alt="">
                    </div>
                    {% endfor %}
                </div>
                <div class="product-thumbnail mtlg">
                    {% set length = products.length if products.length < 4 else 4 %}
                    {% for i in range(0, length) %}
                    <div class="product-thumb">
                        <img src="{{products[i].src}}" alt="">
                    </div>
                    {% endfor %}
                </div>
            </div>
            <div class="col-md-6">
                <div class="product-details">
                    <div class="toshiba-tag">
                        {% include '../template/component/toshiba-border.html' %}
                        <span class="d-inline-block mlmd text-bold text-uppercase text-brand">GR-RF646WE</span>
                    </div>
                    <h2 class="no-margin mtmd">646L, 4-Door Refrigerator, 3 System, Convert Zone, Dual Inverter</h2>
                    <div class="subtitle mtsm">Avoiding Cross Contamination Matters</div>
                    <p class="desc mtsm mblg">
                        Toshiba Refrigerators powered with the 3 System is installed with three specially designed, independent compartments, which enable the proper storage of groceries and prevents cross - contamination
                    </p>
                    <ul class="mainFeatures mblg">
                        <li class="feature-item">3 System</li>
                        <li class="feature-item mtsm">Convert Zone</li>
                        <li class="feature-item mtsm">Dual Inverter</li>
                    </ul>
                    <form action="" class="product-color-form">
                        <div class="radio-custom">
                            <input type="radio" name="color" value="Morandi Grey" id="morandiGrey" class="form-radio float-left morandiGrey checked">
                            <label for="morandiGrey" class="pull-left">Morandi Grey</label>
                        </div>
                        <div class="radio-custom">
                            <input type="radio" name="color" value="Blue Glass" id="blueGlass" class="form-radio float-left">
                            <label for="blueGlass" class="pull-left">Blue Glass</label>
                        </div>
                    </form>
                    <div class="row">
                        <div class="col order-first">
                            <div class="price">16606 EGP</div>
                        </div>
                        <div class="col order-last">
                            <div class="availability text-right">
                                <span class="text-bold">Availability: </span>In stock
                            </div>
                        </div>
                    </div>
                    <div class="cta mtlg">
                        <a href="#" class="btn">Add to cart</a>
                        <button class="favorites mllg"><i class="far fa-heart mrsm"></i>Add to favorites</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<div class="section container">
    <div class="product-trailer cover" style="background-image: url('{{siteImages[3].src}}');">
        <div class="product-play">
            <i class="fa fa-play"></i>
        </div>
        <div class="product-video">
            <iframe id="video" src="https://www.youtube.com/embed/w89LW7j0gx8?enablejsapi=1&amp;html5=1&amp;iv_load_policy=3&amp;rel=0&amp;showinfo=0"
                    frameborder="0" allowfullscreen="allowfullscreen">
            </iframe>
        </div>
    </div>
    <div class="statistics">
        <div class="row">
            {% set length = specs.length if specs.length < 6 else 6 %}
            {% for i in range(0, length) %}
            <div class="col">
                <div class="statistics-score text-center">{{specs[i].value}}</div>
                <div class="statistics-title text-center">{{specs[i].title}}</div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>



{% for feature in features %}
{% if loop.index % 2 == 0 %}
{% set classLeft = 'left' %}
<section class="section">
    <div class="container">
        <div class="row">
            <div class="col-md-5 order-md-last">
                {% include '../template/component/feature-info.html' %}
            </div>
            <div class="col-md-7 order-md-first">
                <div class="feature-img text-left">
                    <img src="{{feature.src}}" alt="" class="prxxlg">
                </div>
            </div>
        </div>
    </div>
</section>
{% else %}
{% set classLeft = '' %}
<section class="section">
    <div class="container">
        <div class="row">
            <div class="col-md-5">
                {% include '../template/component/feature-info.html' %}
            </div>
            <div class="col-md-7">
                <div class="feature-img text-right">
                    <img src="{{feature.src}}" alt="" class="plxxlg">
                </div>
            </div>
        </div>
    </div>
</section>
{% endif %}
{% endfor %}

<section class="section">
    <div class="container">
        <div class="section-title">
            <h3 class="toshiba-title text-bold no-margin mtlg mbmd">Specs</h3>
            {% include '../template/component/toshiba-border.html' %}
        </div>
        <div class="specs">
            <div class="row">
                {% for spec in specs %}
                <div class="col-md-4">
                    <div class="spec">
                        <div class="spec-title mblg">{{spec.title}}</div>
                        <div class="spec-value">{{spec.value}}</div>
                    </div>
                </div>
                {% endfor %}
            </div>
            <div class="spec">
                <div class="spec-title mblg">Features</div>
                <div class="row">
                    {% for i in ["3 System", "Humidity Control", "Plasma Pure", "Alloy Cooling", "Convert Zone", "Electronic Touch Control", "Utility Box"] -%}
                    <div class="col-auto">
                        <div class="spec-check mbmd mrxxlg">
                            <i class="fa fa-check mrsm"></i>{{ i }}
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section">
    <div class="container">
        <div class="section-title">
            <h3 class="toshiba-title text-bold no-margin mtlg mbmd">Related products</h3>
            {% include '../template/component/toshiba-border.html' %}
        </div>
        <div class="related">
            <div class="row">
                {% set length = products.length if products.length < 3 else 3 %}
                {% for i in range(0, length) %}
                <div class="col-sm-6 col-md-4">
                    {% include '../template/component/product-card.html' %}
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</section>

{% endblock content %}