@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>{{ $article->title }}</h1>
</div>

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

    <p class="text-muted">
        Category: <strong>{{ $article->category->name }}</strong>
    </p>

    <div class="article-body mb-5">
        {!! $article->content !!}
    </div>

    <hr>
    <h4>Feedback</h4>

    @forelse($article->feedbacks as $feedback)
        <div class="mb-3 border-bottom pb-2">
            <strong>{{ $feedback->user_name }}</strong> said:
            <p>{{ $feedback->comment }}</p>
        </div>
    @empty
        <p>No feedback yet.</p>
    @endforelse
</div>
@endsection