@extends('frontEnd.layout-ex')

@section('content')
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="{{asset('frontEnd/tmp/js/e-search.js')}}"></script>

    <section class="pager-section overlay">
        <div class="container">
            <div class="main-banner-content p-relative">
                <div class="social-links">
                    <ul>
                        <li><a href="https://www.facebook.com/theblackstoryproject" title=""><i class="fab fa-facebook-f"></i></a></li>
                        <li><a href="https://www.instagram.com/theblackstoryproject/" title=""><i class="fab fa-instagram"></i></a></li>
                    </ul>
                </div><!--social-links end-->
                <div class="pager-content">
                    <ul class="breadcrumb-list">
                        <li><a href="#" title="">Home</a></li>
                        <li><span>Artworks</span></li>
                    </ul><!--breadcrumb end-->
                    <h2 class="page-title">Artworks</h2><br>
                    <small>Proceeds from the Black Story project will go towards BIPOC-CA<br>(Black & Indigenous People of Colour Creative Association) <a href="https://www.bipoc-ca.org/" target="_blank" class="bipoc">https://www.bipoc-ca.org/</a> </small>

                </div><!--pager-content end-->
            </div><!--main-banner-content end-->
        </div>
    </section><!--pager-section end-->
<style>

    @media only screen and (min-device-width: 1025px) and (max-device-width: 3000px) {
        img.w-100.w-100-12 {
            height: 175px;
            width: 100% !important;
            background-position: center center;
            background-size: contain!important;
        }
        .blog-posts .blog-post .blog-info:before {
            content: "";
            position: absolute;
            top: 0px !important;
            left: 42px !important;
            width: 105px;
            height: 6px;
            background-color: #f43930 !important;
        }
        .blog-page-content .blog-posts.blog-page-v .blog-info {
            padding: 5px 10px !important;
            text-align: center !important;
        }
        .blog-page-content .blog-posts.blog-page-v .blog-info h2 {
            font-size: 17px;
            line-height: 13px;
            /* margin-top: 8px; */
            position: relative;
            top: 11px;
        }
        a.artwork-title:hover {
            color: #000 !important;
        }


    }

</style>

    <section class="page-content pt-0">
        <div class="container" style="margin: 10px auto 0px auto;">
            <div class="row">
                <div class="col-md-2"></div>
                <div class="col-md-8">
                    <p></p>
                    <input type="text" id="filter" class="form-control search-art" placeholder="Search Artworks/Artist name..."> </div>
            </div>
        </div>

        <div class="container">
            <div class="row">
                <div class="col-xl-2">
                </div>
                <div class="col-xl-8">
                    <div class="blog-page-content">
                        <div class="blog-posts blog-page-v">
                            <div class="row artItems">
                                @foreach($artworks as $art)
                                <div class="col-lg-3 col-md-3 col-sm-6 li_item">
                                    <div class="art-blog-post">
                                        <div class="blog-thumbnail">
                                            <a href="{{url('artworks/'.str_slug($art->title_en).'/'.$art->id)}}"><img src="@if($art->photo_file){{asset('uploads/topics/').'/'.$art->photo_file}}@else{{'https://via.placeholder.com/444x344'}} @endif" alt="" class="w-100 w-100-12"></a>
                                        </div>
                                        <div class="blog-info art-result">
                                            @if(isset($art->categories[0]->section->title_en))
                                                <p>{{$art->categories[0]->section->title_en}}</p>
                                            @endif
                                            <a href="{{url('artworks/'.str_slug($art->title_en).'/'.$art->id)}}" class="details-link">
                                                <em>{{ substr($art->title_en, 0,  20) }}</em>
                                            </a>
                                            <p>Request for price</p>
{{--                                            <h2 class="h2-artwork-title"><a class="artwork-title" href="{{url('artworks/'.str_slug($art->title_en).'/'.$art->id)}}" title="">{{ substr($art->title_en, 0,  20) }}</a></h2>--}}
                                        </div>
                                    </div><!--blog-post end-->
                                </div>
                                @endforeach
                            </div>
                        </div><!--blog-posts end-->
                    </div><!--blog-page-content end-->
                    <div class="zeus-pagination text-center">
                        @include('frontEnd.includes.paginator', ['paginator' => $artworks, 'link_limit' => 6])
                    </div><!--zeus-pagination end-->
                </div>
                <div class="col-xl-2">
                </div>
            </div>
        </div>
    </section><!--page-content end-->

    <style>
        .art-result p {
            font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif !important;
            font-size: 11px !important;
            color: #000000;
            margin: 0;
            padding: 0;
            line-height: 18px;
        }
        .art-result a {
            font-size: 12px !important;
            color: #000000;
            letter-spacing: 1px !important;
        }
        em{
            font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif !important;
            font-style: italic !important;
            line-height: 18px;
            font-weight: 400;
            font-size: 11px !important;
        }
        .blog-posts .blog-post {
            box-shadow: none !important;
        }
        .art-blog-post {
            margin-bottom: 20px;
        }
    </style>
@endsection