@props(['items'])

<div class="overflow-hidden rounded-2xl border border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-900">
    <table class="min-w-full divide-y divide-zinc-200 text-sm dark:divide-zinc-700">
        <thead class="bg-zinc-50 text-left text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:bg-zinc-800 dark:text-zinc-300">
            <tr>
                <th class="px-4 py-3">Repository</th>
                <th class="px-4 py-3">Project</th>
                <th class="px-4 py-3">Provider</th>
                <th class="px-4 py-3">Branch</th>
                <th class="px-4 py-3">Commits</th>
                <th class="px-4 py-3 text-right">Actions</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-zinc-100 dark:divide-zinc-800">
            @forelse ($items as $item)
                <tr>
                    <td class="px-4 py-3 font-medium text-zinc-900 dark:text-zinc-100">{{ $item->name }}</td>
                    <td class="px-4 py-3 text-zinc-600 dark:text-zinc-300">{{ $item->project?->title ?? 'Global' }}</td>
                    <td class="px-4 py-3 text-zinc-600 dark:text-zinc-300">{{ $item->provider }}</td>
                    <td class="px-4 py-3 text-zinc-600 dark:text-zinc-300">{{ $item->default_branch }}</td>
                    <td class="px-4 py-3"><flux:badge color="zinc">{{ $item->commits_count }}</flux:badge></td>
                    <td class="px-4 py-3 text-right">
                        <flux:button size="sm" variant="primary" wire:click="editRepository({{ $item->id }})">Edit</flux:button>
                        <flux:button size="sm" variant="danger" wire:click="deleteRepository({{ $item->id }})" wire:confirm="Delete this repository?">Delete</flux:button>
                    </td>
                </tr>
            @empty
                <tr><td colspan="6" class="px-4 py-8 text-center text-zinc-500">No repositories yet.</td></tr>
            @endforelse
        </tbody>
    </table>
</div>