@extends(get_view('index'))
@section('title'){{ $category->content->name ?? '' }} - @endsection
@section('header')

@endsection
@section('content')

<div class="text-center mb-4 pt-sm-70px pb-5" style="background-image: url('{{ get_asset('images/page-title-bg.png') }}'); background-size: cover; background-position: center; background-repeat: no-repeat; height: 300px;">
    <h1 class="mb-2 fw-bold text-white">{{ $category->content->name ?? '' }}</h1>
    <nav aria-label="breadcrumb" class="d-inline-block">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ url('/') }}" class="td-none fw-bold text-white">{{ translate('homepage') }}</a></li>
            @foreach ($category->getTopCategories() as $key => $cat)
                @if ( $key < count($category->getTopCategories())-1 )
                <li class="breadcrumb-item"><a href="{{ route('post.category', ['category_url' => $cat->content->url]) }}" class="td-none fw-bold text-white">{{ $cat->content->name ?? '' }}</a></li>
                @else
                <li class="breadcrumb-item active text-white" aria-current="page">{{ $cat->content->name ?? '' }}</li>
                @endif
            @endforeach
        </ol>
    </nav>
</div>

<div class="container pt-4">
    <div class="row">
        <div class="col-md-12 col-12">
            @if (count($category->sub_categories) > 0)
            <div class="bg-white p-3 mb-4 shadow-sm">
                @foreach ($category->sub_categories as $category)
                <a href="{{ $category->content->url }}" class="btn rounded-pill text-white fs-14" style="background-color: {{ $category->color ?? 'var(--theme-color)' }}">
                    {{ $category->content->name }}
                </a>
                @endforeach
            </div>
            @endif

            @if ( count($category->posts) > 0 )
                @php
                    $posts = $category->posts()->paginate(10);
                @endphp
                @foreach ($posts as $post)
                    @include(get_view('components.posts.vertical'), ['post' => $post])
                @endforeach

                {{ $posts->links() }}
            @else
                <div class="alert alert-warning">{{ translate('data_not_found') }}</div>
            @endif
        </div>
    </div>
</div>

@endsection
@section('footer')

@endsection