54 lines
3.6 KiB
PHP
54 lines
3.6 KiB
PHP
<x-layouts.app :title="__('Content documents')">
|
|
<div class="space-y-6">
|
|
<div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
|
<div>
|
|
<h1 class="text-2xl font-semibold">Content documents</h1>
|
|
<p class="mt-1 text-sm text-zinc-500">Create and reuse typed content across page regions.</p>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<flux:button :href="route('content.pages.edit', 'home')">Compose homepage</flux:button>
|
|
<flux:button variant="primary" :href="route('content.documents.create')">Create document</flux:button>
|
|
</div>
|
|
</div>
|
|
|
|
@if(session('status'))
|
|
<div class="rounded-xl border border-green-300 bg-green-50 p-4 text-sm text-green-800 dark:border-green-800 dark:bg-green-950 dark:text-green-200">{{ session('status') }}</div>
|
|
@endif
|
|
@error('document')<div class="rounded-xl border border-red-300 bg-red-50 p-4 text-sm text-red-800">{{ $message }}</div>@enderror
|
|
|
|
<form method="GET" class="grid gap-3 rounded-xl border border-zinc-200 bg-white p-4 md:grid-cols-[minmax(12rem,1fr)_14rem_10rem_auto] dark:border-zinc-700 dark:bg-zinc-900">
|
|
<flux:input name="search" label="Search" value="{{ request('search') }}" placeholder="Document title" />
|
|
<flux:select name="type" label="Content type">
|
|
<option value="">All types</option>
|
|
@foreach($types as $type)<option value="{{ $type->key }}" @selected(request('type') === $type->key)>{{ $type->name }}</option>@endforeach
|
|
</flux:select>
|
|
<flux:select name="status" label="Status">
|
|
<option value="">All statuses</option>
|
|
<option value="draft" @selected(request('status') === 'draft')>Draft</option>
|
|
<option value="published" @selected(request('status') === 'published')>Published</option>
|
|
</flux:select>
|
|
<div class="flex items-end gap-2"><flux:button type="submit">Filter</flux:button><flux:button :href="route('content.index')" variant="ghost">Reset</flux:button></div>
|
|
</form>
|
|
|
|
<div class="overflow-hidden rounded-xl border border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-900">
|
|
<table class="w-full text-sm">
|
|
<thead class="bg-zinc-50 text-left text-xs uppercase text-zinc-500 dark:bg-zinc-950"><tr><th class="p-3">Document</th><th class="p-3">Type</th><th class="p-3">Status</th><th class="p-3">Uses</th><th class="p-3 text-right">Actions</th></tr></thead>
|
|
<tbody class="divide-y divide-zinc-200 dark:divide-zinc-800">
|
|
@forelse($documents as $document)
|
|
<tr>
|
|
<td class="p-3"><div class="font-medium">{{ $document->title }}</div><div class="text-xs text-zinc-500">{{ $document->slug }}</div></td>
|
|
<td class="p-3">{{ $document->type?->name }}</td>
|
|
<td class="p-3"><span class="rounded-full px-2 py-1 text-xs {{ $document->status === 'published' ? 'bg-green-100 text-green-800 dark:bg-green-950 dark:text-green-200' : 'bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-200' }}">{{ ucfirst($document->status) }}</span></td>
|
|
<td class="p-3">{{ $document->placements_count }}</td>
|
|
<td class="p-3 text-right"><flux:button size="sm" :href="route('content.documents.edit', $document)">Edit</flux:button></td>
|
|
</tr>
|
|
@empty
|
|
<tr><td colspan="5" class="p-10 text-center text-zinc-500">No content documents match the current filters.</td></tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{{ $documents->links() }}
|
|
</div>
|
|
</x-layouts.app>
|