@extends('layouts.app')

@section('content')
<div class="min-h-screen bg-gray-100 p-10">

    <div class="max-w-5xl mx-auto bg-white shadow-lg rounded-xl p-6">

        <div class="flex justify-between items-center mb-6 border-b pb-3">
            <h2 class="text-xl font-semibold text-gray-800">Modules</h2>

            <a href="{{ route('modules.create') }}"
               class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition">
                + Add Module
            </a>
        </div>

        <table class="w-full border-collapse">
            <thead>
                <tr class="bg-gray-200">
                    <th class="text-left py-3 px-4 font-medium text-gray-700">#</th>
                    <th class="text-left py-3 px-4 font-medium text-gray-700">Name</th>
                    <th class="text-left py-3 px-4 font-medium text-gray-700">Variable Name</th>
                    <th class="text-left py-3 px-4 font-medium text-gray-700">Actions</th>
                </tr>
            </thead>

            <tbody>
                @forelse($modules as $index => $module)
                    <tr class="border-b hover:bg-gray-50">
                        <td class="py-3 px-4">{{ $index + 1 }}</td>
                        <td class="py-3 px-4">{{ $module->name }}</td>
                        <td class="py-3 px-4 text-gray-600">{{ $module->var_name }}</td>
                        <td class="py-3 px-4">
                            <a href="{{ route('modules.edit', $module->id) }}"
                               class="text-blue-600 hover:underline">
                                Edit
                            </a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="4" class="text-center py-4 text-gray-500">No modules found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>

    </div>

</div>
@endsection