{% extends "layout.html" %}

{% set title = 'Homepage' %}

{% block content %}

<section class="main-slider">
    {% for image in images %}
        <div class="slide-item cover" style="background-image: url('{{image.src}}')">
            <div class="container">
                <div class="content">
                    <div class="slider-content">
                        <h2 class="no-margin mbmd">Your daily needs matter.</h2>
                        {% include '../template/component/toshiba-border.html' %}
                        <p>
                            Our home solutions are designed, engineered, and manufactured with uncompromising attention to the details that matter most to our consumers. We strive to deliver crafted breakthrough home solutions with heartfelt details that make a big difference.
                        </p>
                        <a href="#" class="btn text-capitalize mtlg">read more</a>
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}
</section>

<section class="categories bg-grey">
    <div class="container">
        <div class="row">
            <div class="col col-md-3">
                <div class="categories-title">
                    {% include '../template/component/toshiba-border.html' %}
                    <h3 class="no-margin text-bold">Shop Categories</h3>
                </div>
            </div>
            {% for category in categories %}
                <div class="col">
                    <a href="#" class="category-item text-center d-block">
                        <div class="category-img m-auto">
                            <img src="{{category.thumb}}" alt="{{category.tag}}">
                        </div>
                        <h5 class="no-margin mtsm">{{category.tag}}</h5>
                    </a>
                </div>
            {% endfor %}

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

{% for category in categories %}
{% if loop.index % 2 == 0 %}
    {% set classLeft = 'left' %}
    <section class="section bg-grey">
        <div class="container">
            <div class="row">
                <div class="col-md-5 order-md-last">
                    {% include '../template/component/category-info.html' %}
                </div>
                <div class="col-md-7 order-md-first">
                    {% include '../template/component/category-img.html' %}
                </div>
            </div>
        </div>
    </section>
{% else %}
    {% set classLeft = '' %}
    <section class="section">
        <div class="container">
            <div class="row">
                <div class="col-md-5">
                    {% include '../template/component/category-info.html' %}
                </div>
                <div class="col-md-7">
                    {% include '../template/component/category-img.html' %}
                </div>
            </div>
        </div>
    </section>
{% endif %}
{% endfor %}

<section class="support cover" style="background-image: url('{{gallery[5].src}}')">
    <div class="container">
        <div class="row">
            <div class="col-sm-8">
                <div class="vcenter">
                    <div class="cover-content ">
                        <div class="toshiba-tag">
                            {% include '../template/component/toshiba-border.html' %}
                            <span class="d-inline-block mlmd text-bold text-uppercase text-brand">contact us</span>
                        </div>
                        <h3 class="no-margin mtmd text-white text-bold">Caring about your appliances matter</h3>
                        <p class="mtmd mbxlg text-white">
                            Get help when you need further assistance and information, Contact us by phone, online or in-store.
                        </p>
                        <a href="#" class="btn text-capitalize mtlg">contact us</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{% endblock content %}