{% set page_title = 'Store' %}
{% set header_show = false %}

{% extends 'layouts/layout-1.html' %}

{% block before_content %}
    <!-- Slider Revolution -->
    <div class="rev_slider_wrapper rs-youplay rs-fullscreen">
        <div class="rev_slider" data-version="5.4.6.4">
            <ul>
                <!-- SLIDE NR. 1  -->
                <li data-index="rs-1" data-thumb="assets/images/dark/banner-bg.jpg" data-saveperformance="on" data-transition="random-static" data-slotamount="7" data-masterspeed="700">
                    <!-- MAIN IMAGE -->
                    <img src="assets/images/dark/dummy.png"  alt="" data-lazyload="assets/images/dark/banner-bg.jpg" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg">
                    <!-- LAYERS -->

                    <!-- LAYER NR. 1 -->
                    <div class="tp-caption customin customout"
                         data-x="left"
                         data-hoffset="60"

                         data-y="center"
                         data-voffset="-80"

                         data-customin="x:200;scaleX:0.5;scaleY:0.5;"
                         data-customout="x:0;scaleX:1;scaleY:1;"

                         data-frames='[{"from":"opacity:0;y:-10","speed":1000,"to":"o:1;","delay":500,"ease":"Power2.easeInOut"},{"delay":"wait","speed":1000,"to":"opacity:0;","ease":"nothing"}]'
                    >
                        <h2 class="h1">Diablo III: <br>Reaper of Souls</h2>
                    </div>

                    <!-- LAYER NR. 2 -->
                    <div class="tp-caption customin customout"
                         data-x="left"
                         data-hoffset="60"

                         data-y="center"
                         data-voffset="80"

                         data-frames='[{"from":"opacity:0;y:10","speed":1000,"to":"o:1;","delay":500,"ease":"Power2.easeInOut"},{"delay":"wait","speed":1000,"to":"opacity:0;","ease":"nothing"}]'
                    >
                        <a class="btn btn-lg" href="#">Purchase</a>
                    </div>
                </li>

                <!-- SLIDE NR. 2  -->
                <li data-index="rs-2" data-thumb="assets/images/dark/game-dark-souls-ii-2-1920x1248.jpg" data-saveperformance="on" data-transition="random-static" data-slotamount="7" data-masterspeed="700">
                    <!-- MAIN IMAGE -->
                    <img src="assets/images/dark/dummy.png"  alt="" data-lazyload="assets/images/dark/game-dark-souls-ii-2-1920x1248.jpg" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg">
                    <!-- LAYERS -->

                    <!-- LAYER NR. 1 -->
                    <div class="tp-caption customin customout"
                         data-x="left"
                         data-hoffset="60"

                         data-y="center"
                         data-voffset="-65"

                         data-frames='[{"from":"opacity:0;y:-10","speed":1000,"to":"o:1;","delay":500,"ease":"Power2.easeInOut"},{"delay":"wait","speed":1000,"to":"opacity:0;","ease":"nothing"}]'
                    >
                        <h2 class="h1">Dark Souls II</h2>
                    </div>

                    <!-- LAYER NR. 2 -->
                    <div class="tp-caption customin customout"
                         data-x="left"
                         data-hoffset="60"

                         data-y="center"
                         data-voffset="65"

                         data-frames='[{"from":"opacity:0;y:10","speed":1000,"to":"o:1;","delay":500,"ease":"Power2.easeInOut"},{"delay":"wait","speed":1000,"to":"opacity:0;","ease":"nothing"}]'
                    >
                        <a class="btn btn-lg" href="#">Purchase</a>
                    </div>
                </li>

                <!-- SLIDE NR. 3  -->
                <li data-index="rs-3" data-thumb="assets/images/dark/game-kingdoms-of-amalur-reckoning-1440x900.jpg" data-saveperformance="on" data-transition="random-static" data-slotamount="7" data-masterspeed="700">
                    <!-- MAIN IMAGE -->
                    <img src="assets/images/dark/dummy.png"  alt="" data-lazyload="assets/images/dark/game-kingdoms-of-amalur-reckoning-1440x900.jpg" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg">
                    <!-- LAYERS -->

                    <!-- LAYER NR. 1 -->
                    <div class="tp-caption customin customout"
                         data-x="left"
                         data-hoffset="60"

                         data-y="center"
                         data-voffset="-80"

                         data-frames='[{"from":"opacity:0;y:-10","speed":1000,"to":"o:1;","delay":500,"ease":"Power2.easeInOut"},{"delay":"wait","speed":1000,"to":"opacity:0;","ease":"nothing"}]'
                    >
                        <h2 class="h1">Kingdoms of Amalur: <br>Reckoning</h2>
                    </div>

                    <!-- LAYER NR. 2 -->
                    <div class="tp-caption customin customout"
                         data-x="left"
                         data-hoffset="60"

                         data-y="center"
                         data-voffset="80"

                         data-frames='[{"from":"opacity:0;y:10","speed":1000,"to":"o:1;","delay":500,"ease":"Power2.easeInOut"},{"delay":"wait","speed":1000,"to":"opacity:0;","ease":"nothing"}]'
                    >
                        <a class="btn btn-lg" href="#">Purchase</a>
                    </div>
                </li>
            </ul>
            <div class="tp-bannertimer"></div>
        </div>
    </div>
    <!-- /Slider Revolution-->
{% endblock %}

{% block content %}
    <div class="container youplay-store store-grid mt-0">

        <!-- Games List -->
        <div class="col-md-9 isotope">
            <!-- Sort Categories -->
            <ul class="pagination isotope-options">
                <li data-filter="all" class="active"><span>All</span></li>
                <li data-filter="free"><span>Free</span></li>
                <li data-filter="popular"><span>Popular</span></li>
                <li data-filter="specials"><span>Specials</span></li>
                <li data-filter="upcoming"><span>Upcoming</span></li>
            </ul>
            <!-- /Sort Categories -->

            <div class="isotope-list row vertical-gutter">

                <!-- Single Product Block -->
                <div class="item col-lg-4 col-md-6 col-xs-12" data-filters="popular">
                    <a href="#" class="angled-img">
                        <div class="img img-offset">
                            <img src="assets/images/dark/game-bloodborne-500x375.jpg" alt="">
                        </div>
                        <div class="bottom-info">
                            <h4>Bloodborne</h4>
                            <div class="row">
                                <div class="col-xs-6">
                                    {{ macros.rating('100%') }}
                                </div>
                                <div class="col-xs-6">
                                    <div class="price">
                                        $50.00
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <!-- /Single Product Block -->

                <!-- Single Product Block -->
                <div class="item col-lg-4 col-md-6 col-xs-12" data-filters="popular,specials">
                    <a href="#" class="angled-img">
                        <div class="img img-offset">
                            <img src="assets/images/dark/game-dark-souls-ii-500x375.jpg" alt="">
                            <div class="badge show bg-default">-20%</div>
                        </div>
                        <div class="bottom-info">
                            <h4>Dark Souls II</h4>
                            <div class="row">
                                <div class="col-xs-6">
                                    {{ macros.rating('90%') }}
                                </div>
                                <div class="col-xs-6">
                                    <div class="price">
                                        $39.99 <sup><del>$49.99</del></sup>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <!-- /Single Product Block -->

                <!-- Single Product Block -->
                <div class="item col-lg-4 col-md-6 col-xs-12" data-filters="popular">
                    <a href="#" class="angled-img">
                        <div class="img img-offset">
                            <img src="assets/images/dark/game-kingdoms-of-amalur-reckoning-500x375.jpg" alt="">
                        </div>
                        <div class="bottom-info">
                            <h4>Kingdoms of Amalur</h4>
                            <div class="row">
                                <div class="col-xs-6">
                                    {{ macros.rating('100%') }}
                                </div>
                                <div class="col-xs-6">
                                    <div class="price">
                                        $20.00
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <!-- /Single Product Block -->

                <!-- Single Product Block -->
                <div class="item col-lg-4 col-md-6 col-xs-12" data-filters="">
                    <a href="#" class="angled-img">
                        <div class="img img-offset">
                            <img src="assets/images/dark/game-the-witcher-500x375.jpg" alt="">
                        </div>
                        <div class="bottom-info">
                            <h4>The Witcher</h4>
                            <div class="row">
                                <div class="col-xs-6">
                                    {{ macros.rating('90%') }}
                                </div>
                                <div class="col-xs-6">
                                    <div class="price">
                                        $14.99
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <!-- /Single Product Block -->

                <!-- Single Product Block -->
                <div class="item col-lg-4 col-md-6 col-xs-12" data-filters="">
                    <a href="#" class="angled-img">
                        <div class="img img-offset">
                            <img src="assets/images/dark/game-skyrim-500x375.jpg" alt="">
                        </div>
                        <div class="bottom-info">
                            <h4>Skyrim</h4>
                            <div class="row">
                                <div class="col-xs-6">
                                    {{ macros.rating('100%') }}
                                </div>
                                <div class="col-xs-6">
                                    <div class="price">
                                        $11.99
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <!-- /Single Product Block -->

                <!-- Single Product Block -->
                <div class="item col-lg-4 col-md-6 col-xs-12" data-filters="">
                    <a href="#" class="angled-img">
                        <div class="img img-offset">
                            <img src="assets/images/dark/game-middle-eart-shadow-of-mordor-500x375.jpg" alt="">
                        </div>
                        <div class="bottom-info">
                            <h4>Middle-earth</h4>
                            <div class="row">
                                <div class="col-xs-6">
                                    {{ macros.rating('80%') }}
                                </div>
                                <div class="col-xs-6">
                                    <div class="price">
                                        $29.99
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <!-- /Single Product Block -->

                <!-- Single Product Block -->
                <div class="item col-lg-4 col-md-6 col-xs-12" data-filters="specials,free">
                    <a href="#" class="angled-img">
                        <div class="img img-offset">
                            <img src="assets/images/dark/game-soul-sacrifice-500x375.jpg" alt="">
                            <div class="badge show bg-success">-100%</div>
                        </div>
                        <div class="bottom-info">
                            <h4>Soul Sacrifice</h4>
                            <div class="row">
                                <div class="col-xs-6">
                                    {{ macros.rating('90%') }}
                                </div>
                                <div class="col-xs-6">
                                    <div class="price">
                                        <span class="text-success">FREE!</span> <sup><del>$29.99</del></sup>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <!-- /Single Product Block -->

                <!-- Single Product Block -->
                <div class="item col-lg-4 col-md-6 col-xs-12" data-filters="popular">
                    <a href="#" class="angled-img">
                        <div class="img img-offset">
                            <img src="assets/images/dark/game-diablo-iii-500x375.jpg" alt="">
                        </div>
                        <div class="bottom-info">
                            <h4>Diablo III</h4>
                            <div class="row">
                                <div class="col-xs-6">
                                    {{ macros.rating('100%') }}
                                </div>
                                <div class="col-xs-6">
                                    <div class="price">
                                        $10.00
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <!-- /Single Product Block -->

                <!-- Single Product Block -->
                <div class="item col-lg-4 col-md-6 col-xs-12" data-filters="specials">
                    <a href="#" class="angled-img">
                        <div class="img img-offset">
                            <img src="assets/images/dark/game-dragons-dogma-500x375.jpg" alt="">
                            <div class="badge show bg-default">-30%</div>
                        </div>
                        <div class="bottom-info">
                            <h4>Dragons Dogma</h4>
                            <div class="row">
                                <div class="col-xs-6">
                                    {{ macros.rating('90%') }}
                                </div>
                                <div class="col-xs-6">
                                    <div class="price">
                                        $34.99 <sup><del>$49.99</del></sup>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <!-- /Single Product Block -->

                <!-- Single Product Block -->
                <div class="item col-lg-4 col-md-6 col-xs-12" data-filters="">
                    <a href="#" class="angled-img">
                        <div class="img img-offset">
                            <img src="assets/images/dark/game-lords-of-the-fallen-500x375.jpg" alt="">
                        </div>
                        <div class="bottom-info">
                            <h4>Lords of the Fallen</h4>
                            <div class="row">
                                <div class="col-xs-6">
                                    {{ macros.rating('80%') }}
                                </div>
                                <div class="col-xs-6">
                                    <div class="price">
                                        $14.99
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <!-- /Single Product Block -->

                <!-- Single Product Block -->
                <div class="item col-lg-4 col-md-6 col-xs-12" data-filters="upcoming">
                    <a href="#" class="angled-img">
                        <div class="img img-offset">
                            <img src="assets/images/dark/game-prototype-500x375.jpg" alt="">
                        </div>
                        <div class="bottom-info">
                            <h4>Prototype 3</h4>
                            <div class="date">
                                <i class="fa fa-calendar"></i> beginning of 2015
                            </div>
                        </div>
                    </a>
                </div>
                <!-- /Single Product Block -->

                <!-- Single Product Block -->
                <div class="item col-lg-4 col-md-6 col-xs-12" data-filters="">
                    <a href="#" class="angled-img">
                        <div class="img img-offset">
                            <img src="assets/images/dark/game-risen-3-500x375.jpg" alt="">
                        </div>
                        <div class="bottom-info">
                            <h4>Risen 3</h4>
                            <div class="row">
                                <div class="col-xs-6">
                                    {{ macros.rating('60%') }}
                                </div>
                                <div class="col-xs-6">
                                    <div class="price">
                                        $9.99
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <!-- /Single Product Block -->

                <!-- Single Product Block -->
                <div class="item col-lg-4 col-md-6 col-xs-12" data-filters="popular">
                    <a href="#" class="angled-img">
                        <div class="img img-offset">
                            <img src="assets/images/dark/game-neverwinter-500x375.jpg" alt="">
                        </div>
                        <div class="bottom-info">
                            <h4>Neverwinter</h4>
                            <div class="row">
                                <div class="col-xs-6">
                                    {{ macros.rating('100%') }}
                                </div>
                                <div class="col-xs-6">
                                    <div class="price">
                                        $13.99
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <!-- /Single Product Block -->

                <!-- Single Product Block -->
                <div class="item col-lg-4 col-md-6 col-xs-12" data-filters="popular">
                    <a href="#" class="angled-img">
                        <div class="img img-offset">
                            <img src="assets/images/dark/game-assassins-creed-4-500x375.jpg" alt="">
                        </div>
                        <div class="bottom-info">
                            <h4>Assassin's Creed 4</h4>
                            <div class="row">
                                <div class="col-xs-6">
                                    {{ macros.rating('100%') }}
                                </div>
                                <div class="col-xs-6">
                                    <div class="price">
                                        $21.99
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <!-- /Single Product Block -->

                <!-- Single Product Block -->
                <div class="item col-lg-4 col-md-6 col-xs-12" data-filters="upcoming">
                    <a href="#" class="angled-img">
                        <div class="img img-offset">
                            <img src="assets/images/dark/game-half-life-3-500x375.jpg" alt="">
                        </div>
                        <div class="bottom-info">
                            <h4>Half-Life 3</h4>
                            <div class="date">
                                <i class="fa fa-calendar"></i> never
                            </div>
                        </div>
                    </a>
                </div>
                <!-- /Single Product Block -->
            </div>

        </div>
        <!-- /Games List -->

        <!-- Right Side -->
        <div class="col-md-3">
            {% include "shared/dark-sidebar-store.html" %}
        </div>
        <!-- /Right Side -->
    </div>
{% endblock %}