@extends('site.layouts.' . $pageTemplate)

@section('title', $category->name . ' | Inverted Line' ?? 'Inverted Line')

@push('styles')
    <style>
        .pagination2 .page-item {
            margin: 0 5px;
            padding: 2px;
        }

        .pagination2 .page-item .page-link {
            padding: 5px 20px;
            border-radius: 5px;
            background-color: #c2c1c1;
            color: #000;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .pagination2 .page-item .page-link:hover {
            background-color: #205f00;
            color: #fff;
        }

        .pagination2 .page-item.active .page-link {
            background-color: #205f00;
            color: #fff;
            padding: 5px 20px;
        }

        .pagination2 .page-item.disabled .page-link {
            background-color: #205f00;
            color: #ffffff;
            cursor: not-allowed;
            padding: 5px 20px;
        }

        iframe {
            width: 100%;
            height: 300px;
        }

        .row:not(.col-no-space)>[class*="col"] {
            padding-bottom: 5px !important;
        }
    </style>
@endpush

@section('contents')
    <div id="content" class="page-content-wrap" style="padding-top: 30px">
        <div class="container wide">
            <div class="row row-size-2">
                <!-- Main content -->
                <main id="main" class="col-12">
                    <div class="content-element8">
                        <div class="row">
                            @foreach ($posts as $post)
                                <div class="col-sm-12 col-md-4">
                                    <h1 style="margin:0; padding:5px 0px; font-size:20px;">
                                        <a href="{{ url('/' . $category->slug . '/' . $post->slug) }}"
                                            title="{{ $post->title }}">
                                            {{ $post->title }}
                                        </a>
                                    </h1>
                                    <div
                                        style="border: 1px solid #b0b0b0; margin-bottom:20px; padding:10px; text-align:center">
                                        @if ($post->featured_image)
                                            <a href="{{ url('/' . $category->slug . '/' . $post->slug) }}"
                                                title="{{ url('/' . $category->slug . '/' . $post->slug) }}">
                                                <img src="{{ asset('uploads/posts/' . $post->featured_image) }}"
                                                    alt="{{ pathinfo($post->featured_image, PATHINFO_FILENAME) }}"
                                                    title="{{ pathinfo($post->featured_image, PATHINFO_FILENAME) }}"
                                                    style="width:100%!important; height:300px;">
                                            </a>
                                        @else
                                            <a href="{{ url('/' . $category->slug . '/' . $post->slug) }}"
                                                title="{{ url('/' . $category->slug . '/' . $post->slug) }}">
                                                <img src="{{ asset('uploads/noimage.png') }}" alt="No Image"
                                                    title="No Image" style="width:100%; height:300px;">
                                            </a>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="row m-0" style="margin:90px 0px 10px 30px;">
                            @if ($posts->hasPages())
                                <div class="pagination2">
                                    {!! $posts->onEachSide(2)->links() !!}
                                </div>
                            @endif
                        </div>

                    </div>
                </main>
                <!-- Sidebar -->
            </div>
        </div>
    </div>
    <!-- - - - - - - - - - - - - End Content - - - - - - - - - - - - - - - -->
@endsection