@extends('layouts.legacy')

@php
    use App\Banner;
@endphp

@section('content')
<div class="container-fluid legacy-page">
    @php Banner::ShowResponsiveAd(); @endphp

    <div class="category-wrapper">
        <div class="row">
            <main id="category-artworks" class="col-md-9">
                <div class="effect2 page-header-wrap">
                    <header class="page-heading">
                        <div class="category-display"><i class="fa fa-bars fa-fw"></i></div>

                        <div id="location_bar">
                            <a href="/{{ $contentType->slug }}" title="{{ $contentType->name }}">{{ $contentType->name }}</a>
                            @foreach ($category->breadcrumbs as $crumb)
                                &raquo; <a href="{{ $crumb->url }}" title="{{ $crumb->name }}">{{ $crumb->name }}</a>
                            @endforeach
                            :
                        </div>

                        <h1 class="page-header">{{ $category->name }}</h1>
                        <p style="clear:both">{!! $category->description ?? ($contentType->name . ' artworks on Skinbase.') !!}</p>
                    </header>
                </div> <!-- end .effect2 -->

                @if ($artworks->count())
                    <section id="gallery" class="gallery" aria-live="polite">
                        @foreach ($artworks as $art)
                            @include('legacy._artwork_card', ['art' => $art])
                        @endforeach
                    </section>
                @else
                    <div class="panel panel-default effect2">
                        <div class="panel-heading"><strong>No Artworks Yet</strong></div>
                        <div class="panel-body">
                            <p>Once uploads arrive they will appear here. Check back soon.</p>
                        </div>
                    </div>
                @endif

                <div class="paginationMenu text-center">
                    {{ $artworks->withQueryString()->links('pagination::bootstrap-4') }}
                </div> <!-- end .paginationMenu -->
            </main> <!-- end #category-artworks -->

            <aside id="category-list" class="col-md-3">
                <div id="artwork_subcategories">
                    <div class="category-toggle"><i class="fa fa-bars fa-fw"></i></div>

                    <h5 class="browse_categories">Main Categories:</h5>
                    <ul>
                        @foreach ($rootCategories as $root)
                            <li>
                                <a href="{{ $root->url }}" title="{{ $root->name }}"><i class="fa fa-photo fa-fw"></i> {{ $root->name }}</a>
                            </li>
                        @endforeach
                    </ul>

                    <h5 class="browse_categories">Browse Subcategories:</h5>
                    <ul class="scrollContent" data-mcs-theme="dark">
                        @foreach ($subcategories as $sub)
                            @php $selected = $sub->id === $category->id ? 'selected_group' : ''; @endphp
                            <li class="subgroup {{ $selected }}">
                                <a href="{{ $sub->url }}">{{ $sub->name }}</a>
                            </li>
                        @endforeach
                    </ul>
                </div> <!-- end #artwork_subcategories -->
            </aside> <!-- end #category-list -->
        </div> <!-- end .row -->
    </div> <!-- end .category-wrapper -->
</div> <!-- end .legacy-page -->
@endsection

@push('styles')
<style>
    .gallery {
        columns: 5 260px;
        column-gap: 16px;
    }

    .artwork {
        break-inside: avoid;
        margin-bottom: 16px;
    }

    @media (max-width: 992px) {
        .gallery {
            columns: 3 220px;
        }
    }

    @media (max-width: 768px) {
        .gallery {
            columns: 2 180px;
        }
    }

    @media (max-width: 576px) {
        .gallery {
            columns: 1 100%;
        }
    }
</style>
@endpush