@extends('layouts.old')

{{-- view specific CSS code --}}
@section('view-css')
    <link rel="stylesheet" href="{{ mix('/css/views/loot_index.css') }}">
@stop

{{-- view special JS code --}}
@section('special-js')
    <script src="{{ mix('/js/views/loot_index.js') }}"></script>
@stop

{{-- view main content --}}
@section('view-content')

<div class="view-75 view-loot-index">

    <!-- hero -->
    <section class="pt-hero">
        <div class="st-bleed">
            <div class="st-cnt">
                <div class="st-desktop">
                    <div class="section-name">
                        <h2 class="title">
                            Nerd loot
                        </h2>
                        <h5 class="child-title">
                            Loot cans custimised by nerdosians
                        </h5>
                    </div>
                    <div class="section-image">
                        <img loading="lazy" src="{{mix('/images/svg/views/loot_index/hero.svg')}}" alt="">
                    </div>
                </div>
                <div class="st-mobile">
                    <div class="section-name">
                        <h2 class="title">
                            Nerd loot
                        </h2>
                        <h5 class="child-title">
                            Loot cans custimised by nerdosians
                        </h5>
                    </div>
                    <div class="section-image">
                        <img loading="lazy" src="{{mix('/images/svg/views/loot_index/mobile/hero.svg')}}" alt="">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- cans -->
    <section class="pt-cans">
        <div class="st-bleed">
            <div class="st-cnt">
                <div class="section-name">
                    <h2 class="title">
                        Nerd Loot Cans
                    </h2>
                    <h5 class="child-title">
                        Hurry up and open one before they run out.
                    </h5>
                </div>
                <div class="section-filter">
                    <div class="single-filter">
                        <div class="label">
                            Sort by:
                        </div>
                        <div class="option-wrap">
                            <select class="fx-select">
                                <option value="newest">Newest</option>
                                <option value="most_popular">Most popular</option>
                                <option value="price_max">Price highest</option>
                                <option value="price_min">Price lowest</option>
                                <option value="rating">Customer rating</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="section-offer">
                    <div class="box-wrap">
                        @foreach($cans as $can)
                            <div class="item">
                            @include('partials.blocks.loot_offer', compact($can))
                            </div>
                        @endforeach
                    </div>
                    <div class="btn-wrap">
                        <a href="#" class="btn btn-load">
                            Load more
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>



</div>


@stop