{% extends 'mainapp/base.html' %}
{% load static %}
{% block body %}
<style type="text/css">

        #mobilenoshow {
            display: block;
        }
        .ratings {
            font-size: 19px;
            margin-top: 8px;
            margin-left: 15px;
        }

        .xygameco {
            width: 200px;
            height: 180px;
        }
        .star {
            width: 40px;
        }

        .trustpilot-widget {
            margin-left: 50%;
            transform: translateX(-40%);
        }
        .xygamename {
                 font-size: 36px;
            }
        .xygamewrap {
            margin-left: 48px;
        }

        @media only screen and (max-width: 800px) {
            #mobilenoshow {
                display: none !important;
            }
        }

        #mobilenoshow1 {
            display: none !important;
        }

        @media only screen and (max-width: 800px) {
            #mobilenoshow1 {
                display: block !important;
            }

            .xygameco {
                width: 100px;
                height: 80px;
            }
            .trustpilot-widget {
                margin-left: 0;
            }

            .trust {
                margin-left: 40%;
                flex-direction: column;
                width: 80%;
                position: relative;
            }
            .xygamename {
                 font-size: 26px;
            }
            .xygamewrap {
                margin: 0;
            }
            .star {
                width: 20px;
            }
            .ratings {
                font-size: 13px;
                margin-top: 3px;
                margin-left: 10px;
            }
            .pading {
                padding-top: 0;
            }
        }
    </style>
{% if messages %}
    {% for message in messages %}
        {% if 'admin' not in message.tags %}
        <div class="alert alert-dark" role="alert">
            <strong>Info!</strong> {{message}}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div> 
        {% endif %}
    {% endfor %}
{% endif %}

    {% if mainbanners %}
    <section class="banner-ads-section page-section" id="mobilenoshow">
        <div class="container">
            <div class="front-banner-carousel">
                <div class="front-carousel js-slick-carousel">

                    {% for m in mainbanners %}
                        <div class="img-hero-center">
                            <a href="{{ m.link }}" target="_blank" class="intro-gallery-item">
                                <img style="object-fit: cover; width: 100%; border-radius: 8px;" alt="" class="intro-gallery-item-img img-responsive" src="/media/{{m.image}}">
                            </a>
                        </div>
                    {% endfor %}
                </div>
                <div class="front-gallery-nav">
                    <div class="front-gallery-nav-inner"></div>
                </div>
            </div>
        </div>
    </section>
    {% endif %}

    {% if mainbanners1 %}
    <section class="banner-ads-section page-section" id="mobilenoshow1">
        <div class="container">
            <div class="front-banner-carousel">
                <div class="front-carousel js-slick-carousel">

                    {% for m in mainbanners1 %}
                        <div class="img-hero-center">
                            <a href="{{ m.link }}" target="_blank" class="intro-gallery-item">
                                <img style="object-fit: cover; width: 100%; border-radius: 8px;" alt="" class="intro-gallery-item-img img-responsive" src="/media/{{m.image}}">
                            </a>
                        </div>
                    {% endfor %}
                </div>
                <div class="front-gallery-nav">
                    <div class="front-gallery-nav-inner"></div>
                </div>
            </div>
        </div>
    </section>
    {% endif %}
<section class="featured-section page-section">
    <div class="container">
        <div class="section-head title-head">
            <h2 class="section-title main-title">FEATURED PRODUCTS</h2>
            <!--<a href="/product/custom-all" class="view-more section-view-more">-->
            <!--    <span class="view-more-text p-0">-->
            <!--        View All <i class="ion ion-md-arrow-forward"></i></span>-->
            <!--</a>-->
        </div>
        <div class="featured-items-wrapper">
            <div class="row">
                {% for f in featured|slice:":9" %}
                <div style="display: {% if f.display %}block;{% else %}none;{% endif %}" class="col-12 col-sm-6 col-lg-3">
                    <div class="selling-item">
                        <a href="{% if f.item_url %}{{ f.item_url }}{% else %}/category/{{f.slug|slugify}}{% endif %}">
                        <div class="product-item">
                            <div class="product-item-inner">
                                 <img alt="" class="product-item-img"
                                        src="{% if f.image %}/media/{{f.image}}{% else %}/static/mainapp/images/logo.png{% endif %}"></a>
                                <h3 class="product-item-title">{{f.name}}</h3>
                                
                            </div>
                        </div>
                        </a>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</section>
<section class="best-selling-section page-section">
    <div class="container">
        <div class="best-selling-head title-head">
            <h2 class="best-selling-title main-title">BEST SELLING</h2>
            <!--<a href="{% url 'prodcategories' %}" class="view-more best-selling-view-more">-->
            <!--    <span class="view-more-text">-->
            <!--        View All <i class="ion ion-md-arrow-forward"></i></span>-->
            <!--</a>-->
        </div>
        <div class="best-selling-items-wrapper">
            <div class="best-selling-carousel  js-slick-carousel">
                {% for p in popular|slice:":12" %}
                <div style="display: {% if p.display %}block;{% else %}none;{% endif %}" class="selling-item">
                        <a href="{% if p.item_url %}{{ p.item_url }}{% else %}/category/{{p.slug|slugify}}{% endif %}">
                    <div class="product-item">
                        <div class="product-item-inner">
                            <img alt="" class="product-item-img"
                                    src="{% if p.image %}/media/{{p.image}}{% else %}/static/mainapp/images/logo.png{% endif %}"></a>
                            <h3 class="product-item-title">{{p.name}}</h3>
                            
                        </div>
                    </div>
                    </a>
                </div>
                {% endfor %}
            </div>
            <div class="best-selling-nav">
                <div class="best-selling-nav-inner"></div>
            </div>
        </div>
    </div>
</section>
<section class="promotion-and-news-section page-section">
    <div class="container">
        <div class="section-head title-head">
            <h2 class="section-title main-title">PROMOTIONAL</h2>
            <!--<a href="{% url 'promotions' %}" class="view-more section-view-more">-->
            <!--    <span class="view-more-text p-0">-->
            <!--        View All <i class="ion ion-md-arrow-forward"></i></span>-->
            <!--</a>-->
        </div>
        <div class="promotion-wrapper">
            <div class="row">

                {% for s in subbanners %}
                <div class="col-12 col-sm-12 col-lg-12 mb-3">
                            <div class="promotion-items">
                                <div class="promotion-details clearfix">
                                    <p class="m-0">
                                        <a href="{{ s.link }}" target="_blank">
                                            <img src="/media/{{ s.image }}">
                                        </a>
                                    </p>
                                </div>
                            </div>
                        </div>
                {% endfor %}
            </div>
        </div>
    </div>
</section>

<!--<section class="customer-testimonial-section page-section">-->
<!--    <div class="container">-->
<!--        <div class="section-head customer-testimonial-head title-head">-->
<!--            <h2 class="customer-testimonial-title main-title">CUSTOMER TESTIMONIAL</h2>-->
<!--            <a class="view-more featured-view-more" data-toggle="modal" data-target="#exampleModal">-->
<!--                <span class="view-more-text">-->
<!--                    Send Your Review <i class="ion ion-ios-mail"></i>-->
<!--                </span>-->
<!--            </a>-->
<!--        </div>-->
<!--        <div class="customer-testimonial-items-wrapper">-->
<!--            <div class="customer-testimonial-carousel  js-slick-carousel">-->
<!--                {% for t in testimonials %}-->
<!--                <div class="customer-review">-->
<!--                    <div class="customer-inner">-->
<!--                        <div class="customer-img">-->
<!--                            <img alt="" src="/media/{{t.image}}">-->
<!--                        </div>-->
<!--                        <div class="vertic"></div>-->
<!--                        <div class="testimonial-content-section">-->
<!--                            <div class="customer-review">-->
<!--                                <div class="customer-author-det">-->
<!--                                    <p class="moto">{{t.name}}</p>-->

<!--                                </div>-->
<!--                                <div class="customer-author-det">-->
<!--                                    <p class="moto">{{t.title}}</p>-->
                                    <!--<span class="posted_date">{{t.date}}</span>-->
<!--                                </div>-->
<!--                                <div class="rating-lists">-->
<!--                                    <fieldset class="rating">-->
<!--                                        {% if t.rating == '1' %}-->
<!--                                        <span class="fa fa-star checked"></span>-->
<!--                                        <span class="fa fa-star"></span>-->
<!--                                        <span class="fa fa-star"></span>-->
<!--                                        <span class="fa fa-star"></span>-->
<!--                                        <span class="fa fa-star"></span>-->
<!--                                        {% elif t.rating == '2' %}-->
<!--                                        <span class="fa fa-star checked"></span><span class="fa fa-star checked"></span>-->
<!--                                        <span class="fa fa-star"></span>-->
<!--                                        <span class="fa fa-star"></span>-->
<!--                                        <span class="fa fa-star"></span>-->
<!--                                        {% elif t.rating == '3' %}-->
<!--                                        <span class="fa fa-star checked"></span><span class="fa fa-star checked"></span>-->
<!--                                        <span class="fa fa-star checked"></span>-->
<!--                                        <span class="fa fa-star"></span>-->
<!--                                        <span class="fa fa-star"></span>-->
<!--                                        {% elif t.rating == '4' %}-->
<!--                                        <span class="fa fa-star checked"></span><span class="fa fa-star checked"></span>-->
<!--                                        <span class="fa fa-star checked"></span><span class="fa fa-star checked"></span>-->
<!--                                        <span class="fa fa-star"></span>-->
<!--                                        {% elif t.rating == '5' %}-->
<!--                                        <span class="fa fa-star checked"></span>-->
<!--                                        <span class="fa fa-star checked"></span>-->
<!--                                        <span class="fa fa-star checked"></span>-->
<!--                                        <span class="fa fa-star checked"></span>-->
<!--                                        <span class="fa fa-star checked"></span>-->
<!--                                        {% else %}-->
<!--                                        {% endif %}-->
<!--                                    </fieldset>-->
<!--                                </div>-->
<!--                                <div class="customer-desc">-->
<!--                                    <p>-->
<!--                                        {{t.review}}-->
<!--                                    </p>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                {% endfor %}-->
<!--            </div>-->
<!--            <div class="customer-testimonial-nav">-->
<!--                <div class="customer-testimonial-nav-inner"></div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</section>-->

    <section class="customer-testimonial-section page-section pading">
        <div class="container">
            <div class="section-head customer-testimonial-head title-head">
                <h2 class="customer-testimonial-title main-title">CUSTOMER REVIEWS</h2>

            </div>
            <div class="customer-testimonial-items-wrapper">

                <!-- TrustBox widget - Micro Review Count -->
                <div class="trustpilot-widget"
                     data-locale="en-US" data-template-id="5419b6a8b0d04a076446a9ad"
                     data-businessunit-id="62a6c337e16189b129aeac92" data-style-height="24px" data-style-width="100%"
                     data-theme="dark" data-style-alignment="center">
                    <a style="text-decoration: none; color: white;"
                       href="https://www.trustpilot.com/review/www.xygame.co" target="_blank" rel="noopener">
                        <div class="trust" style="display: flex;">
                            <div><img class="xygameco" src="{% static 'mainapp/images/xygameco.png' %}"></div>
                            <div class="xygamewrap">
                                <h3 class="xygamename" style="font-family: 'Heebo', sans-serif; font-weight: 900; margin: 0; padding: 0;">
                                    xygame.co</h3>
                                <p style="font-family: 'Heebo', sans-serif; display: flex; align-items: center; margin: 0; font-size: 19px;">
                                    Reviews 148 <span
                                        style="font-size: 30px; margin-left: 10px; margin-right: 10px; margin-top: 2px;">&#x2022;</span>
                                    Excellent</p>
                                <div style="display: flex;">
                                    <div>
                                        <img class="star" src="{% static 'mainapp/images/star.png' %}">
                                        <img class="star" src="{% static 'mainapp/images/star.png' %}">
                                        <img class="star" src="{% static 'mainapp/images/star.png' %}">
                                        <img class="star" src="{% static 'mainapp/images/star.png' %}">
                                        <img class="star" src="{% static 'mainapp/images/star.png' %}">
                                    </div>
                                    <p class="ratings">4.8</p>

                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <!-- End TrustBox widget -->

                <div class="customer-testimonial-nav">
                    <div class="customer-testimonial-nav-inner"></div>
                </div>
            </div>
        </div>
    </section>

{% if error.is_active %}
    <a id="popupmessage" type="button" style="display: none;" class="" href="" data-toggle="modal"
                    data-target="#popupMessage"></a>
{% endif %}
    <div class="modal fade" id="popupMessage" tabindex="-1" role="dialog" aria-labelledby="popupMessage"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-popup-message" id="exampleModalLongTitle">{{ error.title }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="popup-message-content">
                        {{ error.description_text|safe }}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock body %}