@extends('layouts.app')
@section('title', $article->title)

@section('content')
    <div class="page-head">
        <div>
            <h1>{{ $article->title }}</h1>
            <p>
                @if ($article->category){{ title_case_words($article->category) }} · @endif
                <span class="badge {{ $article->audience === 'internal' ? 'warning' : 'info' }}">{{ title_case_words($article->audience) }}</span>
                <span class="badge {{ status_color($article->status === 'published' ? 'active' : $article->status) }}">
                    <span class="dot"></span>{{ title_case_words($article->status) }}</span>
            </p>
        </div>
        <div class="page-actions">
            <form method="POST" action="{{ route('kb.helpful', $article) }}">
                @csrf
                <button class="btn secondary" type="submit">This helped ({{ $article->helpful_count }})</button>
            </form>
            <a href="{{ route('kb.edit', $article) }}" class="btn secondary">Edit</a>
            <form method="POST" action="{{ route('kb.destroy', $article) }}"
                  data-confirm="Delete &quot;{{ $article->title }}&quot;?">
                @csrf @method('DELETE')
                <button class="btn danger" type="submit">Delete</button>
            </form>
        </div>
    </div>

    <div class="grid grid-4 mb-2">
        @include('components.kpi', ['label' => 'Views', 'value' => number_format($article->views), 'variant' => 'info'])
        @include('components.kpi', ['label' => 'Marked helpful', 'value' => number_format($article->helpful_count), 'variant' => 'good'])
        @include('components.kpi', ['label' => 'Updated', 'value' => $article->updated_at?->format('d M Y') ?: '—'])
        @include('components.kpi', ['label' => 'Slug', 'value' => \Illuminate\Support\Str::limit($article->slug, 14)])
    </div>

    <div class="grid grid-2">
        <div class="card">
            <div class="card-head"><h3>Content</h3></div>
            <div class="card-body">
                <div style="white-space:pre-wrap;" class="small">{{ $article->body }}</div>
                @if ($article->tags)
                    <div class="mt-1">
                        @foreach ($article->tags as $tag)
                            <a href="{{ route('kb.index', ['q' => $tag]) }}" class="badge muted">{{ $tag }}</a>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>

        <div class="card">
            <div class="card-head"><h3>Related articles</h3></div>
            <div class="card-body">
                @if ($related->isEmpty())
                    @include('components.empty-state', [
                        'icon' => '&#128218;',
                        'title' => 'Nothing related yet',
                        'message' => $article->category
                            ? 'No other published article is filed under "'.title_case_words($article->category).'".'
                            : 'Give this article a category to link it to others.',
                    ])
                @else
                    <ul style="margin:0;padding-left:1.1rem;">
                        @foreach ($related as $r)
                            <li class="mb-1">
                                <a href="{{ route('kb.show', $r) }}">{{ $r->title }}</a>
                                <div class="tiny muted">{{ number_format($r->views) }} views</div>
                            </li>
                        @endforeach
                    </ul>
                @endif
            </div>
        </div>
    </div>
@endsection