@php
  $editId = (int) request('edit');
  $row = $editId ? $articles->firstWhere('id', $editId) : null;
  $open = $row || request()->has('new') || $errors->any();
  $live = $articles->where('status', 'published')->count();
  $cats = $articles->pluck('category')->filter()->unique()->sort()->values();
@endphp

@if($open)
<form method="post" action="{{ route('admin.content.articles.save') }}" enctype="multipart/form-data" id="editor" class="b2-editor" novalidate>
  @csrf
  <input type="hidden" name="id" value="{{ old('id', $row?->id) }}">
  <div class="b2-editor-head">
    <h2>{{ $row ? 'Edit article' : 'New article' }}</h2>
    <a class="btn btn-ghost btn-sm" href="{{ route('admin.content.index', ['tab' => 'articles']) }}">Cancel</a>
  </div>
  <div class="ad-form-grid">
    <div class="b2-col">
      <div class="panel"><div class="panel-body">
        <div class="field">
          <label class="label" for="ar-title">Title <span class="req">*</span></label>
          <input class="input @error('title') is-invalid @enderror" id="ar-title" name="title" value="{{ old('title', $row?->title) }}" maxlength="200" required>
          @error('title')<div class="field-error">{{ $message }}</div>@enderror
        </div>
        <div class="field">
          <label class="label" for="ar-slug">Web address</label>
          <div class="b2-slug"><span class="mono muted">{{ url('/blog') }}/</span><input class="input mono @error('slug') is-invalid @enderror" id="ar-slug" name="slug" value="{{ old('slug', $row?->slug) }}" maxlength="120" placeholder="generated-from-the-title" pattern="[a-z0-9]+(-[a-z0-9]+)*" data-slug-from="#ar-title" data-slug-locked="{{ $row ? '1' : '' }}"></div>
          <div class="help">Lowercase letters, numbers and hyphens. Leave empty to generate it from the title. Changing the address of a live article breaks links that already point to it.</div>
          @error('slug')<div class="field-error">{{ $message }}</div>@enderror
        </div>
        <div class="field">
          <label class="label" for="ar-excerpt">Summary</label>
          <textarea class="textarea @error('excerpt') is-invalid @enderror" id="ar-excerpt" name="excerpt" rows="2" maxlength="300" data-counter="300">{{ old('excerpt', $row?->excerpt) }}</textarea>
          <div class="help b2-help-row"><span>One or two sentences shown on the blog list and in link previews. Falls back to the start of the article.</span><span class="mono" data-counter-out></span></div>
          @error('excerpt')<div class="field-error">{{ $message }}</div>@enderror
        </div>
        <div class="field mb-0">
          <label class="label" for="ar-content">Article body <span class="req">*</span></label>
          <div class="b2-md" data-md-editor>
            <div class="b2-md-bar">
              <div class="b2-seg" role="group" aria-label="Editor view">
                <button type="button" class="active" data-md-mode="write" aria-pressed="true">Write</button>
                <button type="button" data-md-mode="preview" aria-pressed="false">Preview</button>
              </div>
              <span class="xs muted" data-md-stats></span>
            </div>
            <textarea class="textarea b2-md-input @error('content') is-invalid @enderror" id="ar-content" name="content" rows="18" maxlength="60000" required data-md-input>{{ old('content', $row?->content) }}</textarea>
            <div class="b2-md-preview b2-prose hidden" data-md-preview aria-live="polite"></div>
          </div>
          <div class="help">Markdown: <code>## Heading</code>, <code>**bold**</code>, <code>*italic*</code>, <code>- list</code>, <code>[link text](https://…)</code>, <code>&gt; quote</code>. Raw HTML is stripped. The preview is an approximation of the live page.</div>
          @error('content')<div class="field-error">{{ $message }}</div>@enderror
        </div>
      </div></div>
    </div>

    <div class="b2-col">
      <div class="panel">
        <div class="panel-head"><h3>Publishing</h3></div>
        <div class="panel-body">
          <div class="field">
            <label class="label" for="ar-status">Status</label>
            <select class="select" id="ar-status" name="status">
              @foreach(['draft' => 'Draft (hidden)', 'published' => 'Published (live)'] as $k => $l)<option value="{{ $k }}" @selected(old('status', $row?->status ?? 'draft') === $k)>{{ $l }}</option>@endforeach
            </select>
            <div class="help">Drafts are hidden from the blog, sitemap and search engines.</div>
            @error('status')<div class="field-error">{{ $message }}</div>@enderror
          </div>
          <x-field name="published_at" id="ar-pub" type="datetime-local" label="Publish date" :value="$row?->published_at?->format('Y-m-d\TH:i')" help="Shown as the article date. Empty means the moment you first publish."/>
          <x-field name="category" id="ar-cat" label="Category" :value="$row?->category" placeholder="e.g. Cloud, Careers" help="Readers can filter the blog by category."/>
          @if($cats->isNotEmpty())<div class="b2-suggest" aria-label="Existing categories">@foreach($cats as $c)<button class="chip" type="button" data-fill="#ar-cat" data-value="{{ $c }}">{{ $c }}</button>@endforeach</div>@endif
          <x-field name="author_name" id="ar-author" label="Author name" :value="$row?->author_name ?? auth()->user()->name" help="Shown in the byline and in Article structured data."/>
        </div>
      </div>

      <div class="panel">
        <div class="panel-head"><h3>Cover image</h3></div>
        <div class="panel-body">
          <div class="b2-cover {{ $row?->cover_url ? '' : 'is-empty' }}" data-image-preview>
            @if($row?->cover_url)<img src="{{ media_url($row->cover_url) }}" alt="Current cover image">@else<img class="hidden" src="" alt="Selected cover image preview">@endif
          </div>
          <div class="dropzone" style="padding:18px"><x-icon name="upload" :size="22"/><div class="small bold" data-dz-label>{{ $row?->cover_url ? 'Replace the cover image' : 'Add a cover image' }}</div><div class="xs muted">JPG, PNG or WebP · 1200 × 630 works best · up to 3 MB</div><input type="file" name="cover" accept="image/jpeg,image/png,image/webp" data-max-mb="3" aria-label="Cover image" data-image-input></div>
          @error('cover')<div class="field-error">{{ $message }}</div>@enderror
        </div>
      </div>

      <div class="panel">
        <div class="panel-head"><h3>Search &amp; sharing</h3></div>
        <div class="panel-body">
          <div class="field">
            <label class="label" for="ar-seot">SEO title</label>
            <input class="input @error('seo_title') is-invalid @enderror" id="ar-seot" name="seo_title" value="{{ old('seo_title', $row?->seo_title) }}" maxlength="70" data-counter="60">
            <div class="help b2-help-row"><span>Keyword first, about 60 characters. Empty uses the title.</span><span class="mono" data-counter-out></span></div>
            @error('seo_title')<div class="field-error">{{ $message }}</div>@enderror
          </div>
          <div class="field">
            <label class="label" for="ar-meta">Meta description</label>
            <textarea class="textarea @error('meta_description') is-invalid @enderror" id="ar-meta" name="meta_description" rows="3" maxlength="170" data-counter="155">{{ old('meta_description', $row?->meta_description) }}</textarea>
            <div class="help b2-help-row"><span>Answer the reader's question directly, about 155 characters.</span><span class="mono" data-counter-out></span></div>
            @error('meta_description')<div class="field-error">{{ $message }}</div>@enderror
          </div>
          <div class="ad-serp" aria-label="Search result preview" data-serp data-src-title="#ar-seot,#ar-title" data-src-desc="#ar-meta" data-src-slug="#ar-slug" data-fallback-title="Article title" data-fallback-desc="Your meta description appears here.">
            <div class="xs muted b2-serp-url" data-serp-url>{{ parse_url(url('/'), PHP_URL_HOST) }} › blog › …</div>
            <div class="ad-serp-t" data-serp-out-title>{{ old('seo_title', $row?->seo_title ?: $row?->title) ?: 'Article title' }}</div>
            <div class="small muted" data-serp-out-desc>{{ old('meta_description', $row?->meta_description) ?: 'Your meta description appears here.' }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="ad-actionbar">
    <a class="btn btn-ghost" href="{{ route('admin.content.index', ['tab' => 'articles']) }}">Cancel</a>
    <button class="btn btn-primary" type="submit"><x-icon name="check" :size="16"/> Save article</button>
  </div>
</form>
@endif

<div class="panel">
  <div class="panel-head">
    <div><h2>Articles</h2><div class="xs muted">{{ $articles->count() }} total · {{ $live }} published · {{ $articles->count() - $live }} {{ \Illuminate\Support\Str::plural('draft', $articles->count() - $live) }}</div></div>
    @unless($open)<a class="btn btn-primary btn-sm" href="{{ route('admin.content.index', ['tab' => 'articles', 'new' => 1]) }}#editor"><x-icon name="plus" :size="16"/> New article</a>@endunless
  </div>
  @if($articles->isEmpty())
    <x-empty icon="file-text" title="No articles yet" text="Write practical guides that answer what learners search for. Published articles appear on the blog and in the sitemap."><a class="btn btn-primary btn-sm" href="{{ route('admin.content.index', ['tab' => 'articles', 'new' => 1]) }}#editor">Write the first article</a></x-empty>
  @else
  <div class="table-wrap b2-flush">
    <table class="table ad-table b2-cms">
      <thead><tr><th>Article</th><th>Category</th><th>Status</th><th>Date</th><th class="actions">Actions</th></tr></thead>
      <tbody>
      @foreach($articles as $a)
        <tr>
          <td><a class="b2-title" href="{{ route('admin.content.index', ['tab' => 'articles', 'edit' => $a->id]) }}#editor">{{ $a->title }}</a><span class="b2-sub mono">/blog/{{ $a->slug }}</span></td>
          <td>{{ $a->category ?: '—' }}</td>
          <td><x-pill :status="$a->status"/></td>
          <td class="nowrap small">{{ $a->publishedOn()?->format('d M Y') }}<span class="b2-sub">{{ $a->readingMinutes() }} min read</span></td>
          <td class="actions">
            <div class="ad-actions">
              <form method="post" action="{{ route('admin.content.toggle', ['type' => 'articles', 'id' => $a->id]) }}">@csrf<button class="btn btn-secondary btn-sm" type="submit">{{ $a->status === 'published' ? 'Unpublish' : 'Publish' }}</button></form>
              <a class="icon-btn" href="{{ route('admin.content.index', ['tab' => 'articles', 'edit' => $a->id]) }}#editor" aria-label="Edit {{ $a->title }}" title="Edit"><x-icon name="edit" :size="16"/></a>
              @if($a->status === 'published')<a class="icon-btn" href="{{ route('articles.show', $a->slug) }}" target="_blank" rel="noopener" aria-label="View {{ $a->title }} on the website" title="View live"><x-icon name="external-link" :size="16"/></a>@endif
              <form method="post" action="{{ route('admin.content.articles.delete', $a) }}" data-confirm="Delete “{{ $a->title }}” permanently? This cannot be undone.">@csrf @method('DELETE')<button class="icon-btn" type="submit" aria-label="Delete {{ $a->title }}" title="Delete"><x-icon name="trash" :size="16"/></button></form>
            </div>
          </td>
        </tr>
      @endforeach
      </tbody>
    </table>
  </div>
  @endif
</div>