@extends('layouts.modcp')

@section('page-title', $title . ' - ' . config('app.name'))

@section('modcp-content')

    <div class="modcp-page-title">
        {{ $title }}
        <span class="modcp-count">{{ $items->total() }}</span>
    </div>

    <x-mod-c-p-search placeholder="Search a {{ $singular }}..." />

    <div class="modcp-add-form">
        <form action="{{ route($storeRoute) }}" method="POST" class="modcp-add-form-inner">
            @csrf
            <input type="text" name="name" class="form-input" placeholder="Add new {{ strtolower($singular) }}..." required>
            @if(isset($extraFields))
                @foreach($extraFields as $field)
                    <input type="text" name="{{ $field['name'] }}" class="form-input" placeholder="{{ $field['placeholder'] }}">
                @endforeach
            @endif
            <button type="submit" class="btn primary">
                <i data-lucide="plus" size="14"></i> Add
            </button>
        </form>
    </div>

    <div class="modcp-list">
        @forelse($items as $item)
            <div class="modcp-list-item" x-data="{ editing: false }">
                <div class="modcp-list-item-info" x-show="!editing">
                    <span class="modcp-list-item-title">{{ $item->name }}</span>
                    <span class="modcp-list-item-meta">
                slug: {{ $item->slug }}
                        @isset($item->entries_count)
                            · {{ $item->entries_count }} {{ Str::plural('entry', $item->entries_count) }}
                        @endisset
            </span>
                </div>

                <form action="{{ route($updateRoute, $item) }}" method="POST"
                      class="modcp-list-item-edit" x-show="editing" x-cloak>
                    @csrf @method('PATCH')
                    <input type="text" name="name" class="form-input" value="{{ $item->name }}">
                    <button type="submit" class="btn primary">
                        <i data-lucide="check" size="13"></i>
                    </button>
                    <button type="button" class="btn" @click="editing = false">
                        <i data-lucide="x" size="13"></i>
                    </button>
                </form>

                <div class="modcp-list-item-actions" x-show="!editing">
                    <button type="button" class="btn" @click="editing = true">
                        <i data-lucide="pen" size="13"></i>
                    </button>
                    <form action="{{ route($destroyRoute, $item) }}" method="POST" style="display:inline"
                          onsubmit="return confirm('Delete {{ $item->name }}?')">
                        @csrf @method('DELETE')
                        <button type="submit" class="btn danger">
                            <i data-lucide="trash-2" size="13"></i>
                        </button>
                    </form>
                </div>
            </div>
        @empty
            <div class="modcp-empty">
                <p>No {{ strtolower($title) }} yet.</p>
            </div>
        @endforelse
    </div>

    {{ $items->links('modcp.pagination') }}

@endsection