<div class="bg-white rounded-lg shadow-sm overflow-hidden">
    <x-table-swipe>
    <table class="min-w-full">
        <thead class="bg-gray-50 border-b">
            <tr>
                <th class="px-6 py-3 text-left text-sm font-semibold text-gray-700 uppercase">#</th>
                <th class="px-6 py-3 text-left text-sm font-semibold text-gray-700 uppercase">규칙명</th>
                <th class="px-6 py-3 text-left text-sm font-semibold text-gray-700 uppercase">문서유형</th>
                <th class="px-6 py-3 text-left text-sm font-semibold text-gray-700 uppercase">패턴 미리보기</th>
                <th class="px-6 py-3 text-left text-sm font-semibold text-gray-700 uppercase">리셋주기</th>
                <th class="px-6 py-3 text-left text-sm font-semibold text-gray-700 uppercase">상태</th>
                <th class="px-6 py-3 text-left text-sm font-semibold text-gray-700 uppercase">작업</th>
            </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
            @forelse($rules as $rule)
                <tr class="hover:bg-gray-50">
                    <td class="px-6 py-4 text-sm text-gray-500">{{ $rule->id }}</td>
                    <td class="px-6 py-4 text-sm font-medium text-gray-900">
                        {{ $rule->rule_name ?? '-' }}
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-700">
                        {{ $rule->document_type_label }}
                        <span class="text-xs text-gray-400">({{ $rule->document_type }})</span>
                    </td>
                    <td class="px-6 py-4">
                        <code class="text-sm bg-gray-100 px-2 py-1 rounded font-mono">{{ $rule->preview }}</code>
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-500">
                        {{ $rule->reset_period_label }}
                    </td>
                    <td class="px-6 py-4">
                        @if($rule->is_active)
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                활성
                            </span>
                        @else
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
                                비활성
                            </span>
                        @endif
                    </td>
                    <td class="px-6 py-4 text-sm font-medium">
                        <a href="{{ route('numbering-rules.edit', $rule->id) }}"
                           class="text-blue-600 hover:text-blue-900 mr-3">수정</a>
                        <button onclick="confirmDelete({{ $rule->id }}, '{{ $rule->rule_name }}')"
                                class="text-red-600 hover:text-red-900">삭제</button>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="7" class="px-6 py-12 text-center text-gray-500">
                        등록된 채번 규칙이 없습니다.
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
    </x-table-swipe>
</div>

@if($rules->hasPages())
    <div class="mt-4">
        {{ $rules->links() }}
    </div>
@endif
