@extends('layouts.child')
@section('content')
<div class="mb-5">
  <a href="{{ route('reference.index') }}" class="text-sm text-slate-400 hover:text-slate-600">← Erinnerung</a>
</div>
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6 mb-6">
  <div class="flex items-center gap-3 mb-5 pb-4 border-b border-slate-100">
    <span class="text-4xl">{{ $reference->icon }}</span>
    <h1 class="text-2xl font-black text-slate-800">{{ $reference->title }}</h1>
  </div>
  <div class="ref-content">
    {!! $reference->content !!}
  </div>
</div>
@if($others->count())
<h2 class="font-bold text-slate-600 text-sm mb-3">Weitere Artikel</h2>
<div class="grid gap-2">
  @foreach($others as $a)
  <a href="{{ route('reference.show',$a->slug) }}"
     class="bg-white rounded-xl border border-slate-200 px-4 py-3 flex items-center gap-3 hover:border-indigo-300 transition-all text-sm">
    <span class="text-xl">{{ $a->icon }}</span>
    <span class="font-medium text-slate-700">{{ $a->title }}</span>
    <span class="ml-auto text-slate-300">›</span>
  </a>
  @endforeach
</div>
@endif
@endsection