@extends('layouts.help')

@push('styles')
    <style>
        .header-section {
            position: relative;
            background-color: #7A22D5;
            padding: 60px 20px;
        }

        .header-section h1 {
            color: white;
            display: block;
            font-size: 32px;
            text-align: center;
            margin-bottom: 20px;
        }

        .search-input {
            /* max-width: 500px;
            width: 100%; */
            /* padding: 12px 20px; */
            border: none;
            border-radius: 4px;
            font-size: 16px;
        }

        /* Reset */
        main {margin: 0 !important;}
    </style>
    <script>window.asset_url='{{ asset('')}}';</script>
@endpush

@section('content')
<!-- Header -->
<div class="header-section">
    <h1>{{ $topic->name }}</h1>
</div>

<div class="container py-4">
    <div class="mb-4">
        <a href="{{ route('front.knowledge.base') }}" class="btn btn-secondary">← Back to Help</a>
    </div>


    <div class="row">
        <!-- Help Topics -->
        <div class="col-md-3 mb-4">
            <h3 class="mb-3">HELP TOPICS</h3>
            <ul class="list-unstyled help-topic">
                @if(! empty($topics)) 
                    @foreach ($topics as $t)
                        <li>
                            <a class="@if($t->id == $topic->id) {{ 'active' }} @endif" href="{{ route('front.topics.show', $t->slug) }}">
                                {{ $t->name }}
                            </a>
                        </li>
                    @endforeach
                @else
                    <li>No results found</li>
                @endif
            </ul>
        </div>

        <!-- Top Tasks -->
        <div class="col-md-9">
            <h3 class="mb-4">ARTICLES</h3>
            <div class="row">
                @forelse($topic->articles as $article)
                    <div class="col-4 mb-4">
                        <div class="card h-100">
                            <div class="card-body">
                                <div class="">
                                    <a href="{{ route('front.articles.show', $article->slug) }}">
                                        <p class="list-item-heading mb-1 color-theme-1">{{ $article->title }}</p>
                                        <!-- <p class="mb-1 text-muted text-small"></p> -->
                                    </a>
                                    <p class="mb-4 text-small">{{ $article->excerpt() }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12 mb-4">
                        <p>No article yet.</p>
                    </div>
                @endforelse

            </div>
        </div>

    </div>
</div>
@endsection