@extends('layouts.app')

@section('content')
    <div class=" mx-auto bg-white p-6 rounded shadow">
        <div class="flex justify-between items-center mb-4">
            <h1 class="text-xl font-bold">Sign Types</h1>
        </div>

        @if (session('success'))
            <div class="mb-4 text-green-600 font-medium">{{ session('success') }}</div>
        @endif

        <table class="w-full border">
            <thead class="bg-gray-200">
                <tr>
                    <th class="p-2 border">#</th>
                    <th class="p-2 border text-left">Name</th>
                    <th class="p-2 border text-center">View</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($signTypes as $index => $type)
                    <tr>
                        <td class="p-2 border text-center">{{ $index + 1 }}</td>
                        <td class="p-2 border">{{ $type->name }}</td>
                        <td class="p-2 border text-center space-x-2">
                            <a href="{{ route('sign-types.formula', $type->id) }}" class="text-blue-600">View</a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="3" class="p-2 border text-center text-gray-500">No sign types found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
@endsection