@extends('layouts.app')
@section('title', 'Knowledge base')

@section('content')
    <div class="page-head">
        <div><h1>Knowledge base</h1><p>{{ $articles->total() }} article(s). Internal runbooks stay hidden from customers.</p></div>
        <div class="page-actions">
            <a href="{{ route('kb.create') }}" class="btn">+ New article</a>
        </div>
    </div>

    <div class="grid grid-3 mb-2">
        @include('components.kpi', ['label' => 'Published', 'value' => (string) $totals['published'], 'variant' => 'good'])
        @include('components.kpi', ['label' => 'Drafts', 'value' => (string) $totals['drafts'],
            'variant' => $totals['drafts'] ? 'warn' : ''])
        @include('components.kpi', ['label' => 'Total views', 'value' => number_format($totals['views']), 'variant' => 'info'])
    </div>

    <form class="filters" method="GET">
        <div class="field" style="flex:2 1 260px;">
            <label>Search</label>
            <input type="search" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="Title or body text…">
        </div>
        <div class="field">
            <label>Category</label>
            <select name="category" data-auto-submit>
                <option value="">All</option>
                @foreach ($categories as $c)
                    <option value="{{ $c }}" @selected(($filters['category'] ?? '') === $c)>{{ title_case_words($c) }}</option>
                @endforeach
            </select>
        </div>
        <div class="field">
            <label>Audience</label>
            <select name="audience" data-auto-submit>
                <option value="">All</option>
                @foreach ($audiences as $a)
                    <option value="{{ $a }}" @selected(($filters['audience'] ?? '') === $a)>{{ title_case_words($a) }}</option>
                @endforeach
            </select>
        </div>
        <div class="field">
            <label>Status</label>
            <select name="status" data-auto-submit>
                <option value="">All</option>
                @foreach ($statuses as $s)
                    <option value="{{ $s }}" @selected(($filters['status'] ?? '') === $s)>{{ title_case_words($s) }}</option>
                @endforeach
            </select>
        </div>
        <div class="field"><label>&nbsp;</label><button class="btn secondary" type="submit">Filter</button></div>
    </form>

    <div class="card">
        <div class="card-body" style="padding:0;">
            @if ($articles->isEmpty())
                @include('components.empty-state', [
                    'icon' => '&#128218;',
                    'title' => 'No articles yet',
                    'message' => 'Write the first troubleshooting guide so support stops answering the same question twice.',
                ])
            @else
                <table class="data">
                    <thead>
                    <tr>
                        <th>Title</th><th>Category</th><th>Audience</th><th>Status</th>
                        <th class="num">Views</th><th class="num">Helpful</th><th>Updated</th><th></th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach ($articles as $article)
                        <tr>
                            <td><a href="{{ route('kb.show', $article) }}">{{ $article->title }}</a>
                                @if ($article->tags)
                                    <div class="tiny muted">
                                        @foreach (array_slice($article->tags, 0, 4) as $tag)
                                            <span class="badge muted">{{ $tag }}</span>
                                        @endforeach
                                    </div>
                                @endif
                            </td>
                            <td class="small">{{ $article->category ? title_case_words($article->category) : '—' }}</td>
                            <td><span class="badge {{ $article->audience === 'internal' ? 'warning' : 'info' }}">
                                {{ title_case_words($article->audience) }}</span></td>
                            <td><span class="badge {{ status_color($article->status === 'published' ? 'active' : $article->status) }}">
                                <span class="dot"></span>{{ title_case_words($article->status) }}</span></td>
                            <td class="num">{{ number_format($article->views) }}</td>
                            <td class="num">{{ number_format($article->helpful_count) }}</td>
                            <td class="small nowrap">{{ $article->updated_at?->diffForHumans() }}</td>
                            <td class="right nowrap">
                                <a href="{{ route('kb.show', $article) }}" class="btn xs secondary">Open</a>
                                <a href="{{ route('kb.edit', $article) }}" class="btn xs secondary">Edit</a>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            @endif
        </div>
        @if ($articles->hasPages())<div class="card-foot">{{ $articles->links('partials.pagination') }}</div>@endif
    </div>
@endsection