<x-app-layout>
    <x-slot name="header">
        <h1 class="text-xl font-semibold">Remote Subscriptions</h1>
        <a href="{{ route('subscriptions.create') }}"
           class="button button--primary ml-auto">+ New</a>
    </x-slot>

    <table class="w-full mt-6 text-sm">
        <thead class="text-left text-gray-500">
            <tr>
                <th>Name</th>
                <th>Source URL</th>
                <th class="w-28">Colour</th>
                <th class="w-32"></th>
            </tr>
        </thead>
        <tbody>
            @forelse ($subs as $sub)
                <tr class="border-t">
                    <td>{{ $sub->displayname ?: '(no label)' }}</td>
                    <td class="truncate max-w-md">{{ $sub->source }}</td>
                    <td>
                        <span class="inline-block w-4 h-4 rounded-sm"
                              style="background: {{ $sub->calendarcolor ?? '#888' }}"></span>
                    </td>
                    <td class="text-right space-x-2">
                        <a href="{{ route('subscriptions.edit', $sub) }}"
                           class="text-blue-600 hover:underline">edit</a>

                        <form action="{{ route('subscriptions.destroy', $sub) }}"
                              method="POST" class="inline">
                            @csrf @method('DELETE')
                            <button class="text-red-600 hover:underline"
                                    onclick="return confirm('Remove subscription?')">
                                delete
                            </button>
                        </form>
                    </td>
                </tr>
            @empty
                <tr><td colspan="4" class="py-6 text-center text-gray-400">
                    No subscriptions yet
                </td></tr>
            @endforelse
        </tbody>
    </table>
</x-app-layout>
