@extends('admin.layouts.app')

@section('title', 'Decks')
@section('page-title', 'Deck Management')
@section('page-title-jp', 'デッキ管理')

@section('content')
<div style="margin-bottom: 20px; display: flex; gap: 10px;">
    <a href="{{ route('admin.decks.create') }}" class="btn" style="background-color: #3b82f6; color: white; padding: 10px 20px; border-radius: 8px; text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer;">
        <x-icon name="plus" size="16" />
        Create Deck
    </a>
    <a href="{{ route('admin.export.decks') }}" class="btn" style="background-color: #10b981; color: white; padding: 10px 20px; border-radius: 8px; text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer;">
        <x-icon name="download" size="16" />
        Export
    </a>
</div>

<form method="GET">
    <x-admin.data-table 
        :headers="[
            ['label' => 'Name', 'sortable' => true, 'width' => '25%'],
            ['label' => 'Description', 'sortable' => false, 'width' => '40%'],
            ['label' => 'Cards', 'sortable' => true, 'align' => 'center', 'width' => '10%'],
            ['label' => 'Created', 'sortable' => true, 'width' => '12%'],
            ['label' => 'Actions', 'sortable' => false, 'align' => 'center', 'width' => '13%'],
        ]"
        :searchable="true"
        searchPlaceholder="Search decks..."
        :hoverable="true"
        :paginator="$decks">
        
        @foreach ($decks as $deck)
        <tr>
            <td><strong>{{ $deck->name }}</strong></td>
            <td class="text-truncate">{{ Str::limit($deck->description, 60) }}</td>
            <td class="center">
                <span class="badge badge-primary">{{ $deck->cards_count }}</span>
            </td>
            <td>{{ $deck->created_at->format('M d, Y') }}</td>
            <td class="center">
                <div class="action-buttons">
                    <a href="{{ route('admin.decks.edit', $deck) }}" class="btn-action btn-edit">Edit</a>
                    <form action="{{ route('admin.decks.destroy', $deck) }}" method="POST" style="display: inline;" onsubmit="return confirm('Are you sure you want to delete this deck?');">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn-action btn-delete">Delete</button>
                    </form>
                </div>
            </td>
        </tr>
        @endforeach
    </x-admin.data-table>
</form>
@endsection