@extends('layouts.admin')
@section('title','Neuer Artikel')
@section('content')
<div class="max-w-3xl">
  <a href="{{ route('admin.reference.index') }}" class="text-sm text-slate-500 hover:text-slate-700 mb-4 inline-block">← Zurück</a>
  <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
    <h2 class="font-semibold text-slate-800 mb-5">Neuer Erinnerungs-Artikel</h2>
    <form method="POST" action="{{ route('admin.reference.store') }}" class="space-y-4">
      @csrf
      <div class="grid grid-cols-4 gap-3">
        <div>
          <label class="block text-sm font-medium text-slate-700 mb-1">Icon</label>
          <input name="icon" value="{{ old('icon', $icon ?? '📖') }}" required maxlength="8"
                 class="w-full border border-slate-300 rounded-lg px-3 py-2 text-center text-xl focus:ring-2 focus:ring-violet-500 outline-none">
        </div>
        <div class="col-span-3">
          <label class="block text-sm font-medium text-slate-700 mb-1">Titel</label>
          <input name="title" value="{{ old('title', $title ?? '') }}" required
                 class="w-full border border-slate-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-violet-500 outline-none">
        </div>
      </div>
      <div class="grid grid-cols-2 gap-4">
        <div>
          <label class="block text-sm font-medium text-slate-700 mb-1">Kategorie</label>
          <select name="category" required class="w-full border border-slate-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-violet-500 outline-none">
            @foreach($categories as $k => $v)
            <option value="{{ $k }}" {{ old('category', $cat ?? '') == $k ? 'selected' : '' }}>{{ $v }}</option>
            @endforeach
          </select>
        </div>
        <div>
          <label class="block text-sm font-medium text-slate-700 mb-1">Reihenfolge</label>
          <input name="sort_order" type="number" value="{{ old('sort_order', $order ?? 0) }}"
                 class="w-full border border-slate-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-violet-500 outline-none">
        </div>
      </div>
      <div>
        <label class="block text-sm font-medium text-slate-700 mb-1">Inhalt (HTML)</label>
        <p class="text-xs text-slate-400 mb-2">Verfügbare Klassen: <code class="bg-slate-100 px-1 rounded">beispiel</code>, <code class="bg-slate-100 px-1 rounded">tipp</code>, <code class="bg-slate-100 px-1 rounded">merke</code> als div-Klasse. Normales HTML: h2, h3, p, ul, li, strong, table.</p>
        <textarea name="content" required rows="16"
                  class="w-full border border-slate-300 rounded-lg px-3 py-2 text-sm font-mono focus:ring-2 focus:ring-violet-500 outline-none">{{ old('content', $content ?? '') }}</textarea>
      </div>
      <button type="submit" class="w-full bg-violet-600 hover:bg-violet-700 text-white py-2 rounded-lg font-medium text-sm">Erstellen</button>
    </form>
  </div>
</div>
@endsection