@extends('front.layouts.master-auth')

@section('content')
<section class="page-content skill-page">
    <div class="container">

        <div class="page-title-cont">
            @if(isset($breadcrumbs) && is_array($breadcrumbs) && count($breadcrumbs) > 0)
                <x-breadcrumb :items="$breadcrumbs" />
            @endif
            <h1 class="page-title">
                <span class="skill-page-badge">@lang('front.Explore')</span>
                @lang('Skills')
            </h1>
        </div>

        @if($categories->isEmpty())
            <div class="text-center py-5">
                <p class="text-muted">@lang('No skills found.')</p>
            </div>
        @else
            <div style="margin-top: 30px;">
                @foreach($categories as $category)
                    <div class="mb-4">
                        <h2 class="skills-index-category-title">{{ $category->name }}</h2>
                        <div class="row">
                            @foreach($category->skills as $skill)
                                <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                                    <a href="{{ route('skill.show', [$skill->id, $skill->slug]) }}"
                                       class="categories-card categories-card__title d-block text-center">
                                        {{ $skill->name }}
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>
        @endif

    </div>
</section>
@endsection