@extends('layouts.modcp')

@section('modcp-content')

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

    <x-mod-c-p-search placeholder="Search an author..."/>

    <div class="modcp-add-form">
        <form action="{{ route('modcp.authors.store') }}" method="POST">
            @csrf
            <div class="modcp-add-form-inner">
                <input type="text" name="name" class="form-input"
                       placeholder="Author name..." required>
                <div style="width:20%">
                    <livewire:xf-user-selector />
                </div>
                <input type="text" name="website" class="form-input"
                       placeholder="Website">
                <button type="submit" class="btn primary">
                    <i data-lucide="plus" size="14"></i> Add
                </button>
            </div>
        </form>
    </div>

    <div class="modcp-list">
        @forelse($items as $author)
            <div class="modcp-list-item" x-data="{ editing: false }">

                <div class="modcp-list-item-info" x-show="!editing">
                    <span class="modcp-list-item-title">{{ $author->name }}</span>
                    <span class="modcp-list-item-meta">
                <span class="badge">{{ $author->website ?? '—' }}</span>
                @if(($xfUser = $author->user()) !== null )
                    <span class="badge">
                        <x-xf-username-link :user="$xfUser" />
                    </span>
                @endif
                · {{ $author->entries_count }} {{ Str::plural('entry', $author->entries_count) }}
            </span>
                </div>

                <form action="{{ route('modcp.authors.update', $author) }}" method="POST"
                      class="modcp-list-item-edit modcp-list-item-edit--game"
                      x-show="editing" x-cloak>
                    @csrf @method('PATCH')
                    <input type="text" name="name" class="form-input"
                           placeholder="Author name..." value="{{ $author->name }}" required>
                    <div style="width:20%">
                        <livewire:xf-user-selector :initial-user-id="$author->user_id" />
                    </div>
                    <input type="text" name="website" class="form-input"
                           placeholder="Website" value="{{ $author->website }}">
                    <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('modcp.authors.destroy', $author) }}" method="POST"
                          style="display:inline"
                          onsubmit="return confirm('Delete {{ addslashes($author->name) }}?')">
                        @csrf @method('DELETE')
                        <button type="submit" class="btn danger"
                            {{ $author->entries_count > 0 ? 'disabled title=Has entries' : '' }}>
                            <i data-lucide="trash-2" size="13"></i>
                        </button>
                    </form>
                </div>

            </div>
        @empty
            <div class="modcp-empty"><p>No authors yet.</p></div>
        @endforelse
    </div>

    {{ $items->links() }}

@endsection