<?php
use Flux\Flux;
use App\Models\Page;
use Livewire\WithPagination;
use App\Livewire\BaseVolt;
?>

<div class="space-y-6">

    <div class="flex justify-between items-center">

        <div>
            <flux:heading size="xl">Pages</flux:heading>
            <flux:subheading>Manage website pages</flux:subheading>
        </div>

        <flux:button
            href="{{ route('contents.pages.create') }}"
            variant="primary"
            icon="plus">
            Add Page
        </flux:button>

    </div>

    <flux:card>

        <flux:table :paginate="$this->pages">

            <flux:table.columns>

                <flux:table.column>
                    Title
                </flux:table.column>

                <flux:table.column>
                    Slug
                </flux:table.column>

                <flux:table.column></flux:table.column>

            </flux:table.columns>

            <flux:table.rows>

                @forelse ($this->pages as $page)

                    <flux:table.row>

                        <flux:table.cell variant="strong">
                            {{ $page->title }}
                        </flux:table.cell>

                        <flux:table.cell>
                            /{{ $page->slug }}
                        </flux:table.cell>

                        <flux:table.cell>

                            <flux:dropdown>

                                <flux:button
                                    variant="ghost"
                                    size="sm"
                                    icon="ellipsis-horizontal"/>

                                <flux:menu>

                                    <flux:menu.item
                                        href="{{ route('contents.pages.edit',$page->id) }}"
                                        icon="pencil-square">
                                        Edit
                                    </flux:menu.item>

                                    <flux:menu.item
                                        x-data
                                        x-on:click="confirmDelete(() => $wire.delete({{ $page->id }}))"
                                        icon="trash"
                                        variant="danger">
                                        Delete
                                    </flux:menu.item>

                                </flux:menu>

                            </flux:dropdown>

                        </flux:table.cell>

                    </flux:table.row>

                @empty

                    <flux:table.row>

                        <flux:table.cell colspan="3" class="text-center">
                            No pages found
                        </flux:table.cell>

                    </flux:table.row>

                @endforelse

            </flux:table.rows>

        </flux:table>

    </flux:card>

</div>