@extends('layouts.app')
@section('title', $article?->exists ? 'Edit article' : 'New article')

@section('content')
    <div class="page-head">
        <div>
            <h1>{{ $article?->exists ? 'Edit article' : 'New article' }}</h1>
            <p>A published, non-internal article is counted as a view each time it is opened.</p>
        </div>
        <div class="page-actions">
            <a href="{{ route('kb.index') }}" class="btn secondary">Back</a>
        </div>
    </div>

    <form method="POST" action="{{ $article?->exists ? route('kb.update', $article) : route('kb.store') }}">
        @csrf
        @if ($article?->exists) @method('PUT') @endif

        <div class="card mb-2">
            <div class="card-head"><h3>Article</h3></div>
            <div class="card-body">
                <div class="field">
                    <label>Title <span class="req">*</span></label>
                    <input type="text" name="title" maxlength="220" required
                           value="{{ old('title', $article?->title) }}"
                           placeholder="Internet is slow in the evening">
                    @error('title')<span class="err">{{ $message }}</span>@enderror
                </div>

                <div class="grid grid-3">
                    <div class="field">
                        <label>Category</label>
                        <input type="text" name="category" maxlength="90" list="kb-categories"
                               value="{{ old('category', $article?->category) }}" placeholder="troubleshooting">
                        <datalist id="kb-categories">
                            @foreach (['troubleshooting', 'billing', 'installation', 'router-setup',
                                       'account', 'coverage', 'internal-runbook'] as $c)
                                <option value="{{ $c }}"></option>
                            @endforeach
                        </datalist>
                    </div>
                    <div class="field">
                        <label>Audience <span class="req">*</span></label>
                        <select name="audience" required>
                            @foreach ($audiences as $a)
                                <option value="{{ $a }}" @selected(old('audience', $article?->audience ?? 'customer') === $a)>{{ title_case_words($a) }}</option>
                            @endforeach
                        </select>
                        <span class="hint"><em>Internal</em> articles are never shown to customers and never counted as views.</span>
                    </div>
                    <div class="field">
                        <label>Status <span class="req">*</span></label>
                        <select name="status" required>
                            @foreach ($statuses as $s)
                                <option value="{{ $s }}" @selected(old('status', $article?->status ?? 'draft') === $s)>{{ title_case_words($s) }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="field">
                    <label>Tags</label>
                    <input type="text" name="tags" maxlength="500"
                           value="{{ old('tags', $article?->tags ? implode(', ', $article->tags) : '') }}"
                           placeholder="wifi, router, slow-speed">
                    <span class="hint">Comma separated. Stored as a list.</span>
                </div>

                @if ($article?->exists)
                    <div class="field">
                        <label>Slug</label>
                        <input type="text" name="slug" class="mono" maxlength="240" value="{{ $article->slug }}">
                        <span class="hint">Articles are addressed by slug — changing it changes the URL.</span>
                    </div>
                @endif
            </div>
        </div>

        <div class="card">
            <div class="card-head"><h3>Body</h3></div>
            <div class="card-body">
                <div class="field">
                    <textarea name="body" rows="18" maxlength="100000" required
                              placeholder="Steps the customer or technician should follow…">{{ old('body', $article?->body) }}</textarea>
                    @error('body')<span class="err">{{ $message }}</span>@enderror
                </div>
            </div>
            <div class="card-foot">
                <button type="submit" class="btn">{{ $article?->exists ? 'Save changes' : 'Create article' }}</button>
                <a href="{{ route('kb.index') }}" class="btn secondary">Cancel</a>
            </div>
        </div>
    </form>
@endsection