@extends('layouts.app')

@section('content')

<div class="p-6">

    <div class="flex justify-between mb-4">
        <h2 class="text-xl font-bold text-white">Genres</h2>

        <a href="{{ route('admin.genres.create') }}"
           class="px-4 py-2 bg-blue-600 text-white rounded">
            Add Genre
        </a>
    </div>

    <div class="bg-[#0f172a] rounded-lg p-4">
        <table class="w-full text-left text-sm text-gray-300">

            <thead class="text-gray-400 border-b border-gray-700">
                <tr>
                    <th class="py-2">ID</th>
                    <th>Name</th>
                    <th class="text-right">Actions</th>
                </tr>
            </thead>

            <tbody>
                @foreach($genres as $genre)
                <tr class="border-b border-gray-800">
                    <td class="py-2">{{ $genre->id }}</td>
                    <td>{{ $genre->name }}</td>

                    <td class="text-right space-x-2">

                        <a href="{{ route('admin.genres.edit',$genre->id) }}"
                           class="text-blue-400">
                            Edit
                        </a>

                        <form action="{{ route('admin.genres.destroy',$genre->id) }}"
                              method="POST"
                              class="inline">

                            @csrf
                            @method('DELETE')

                            <button class="text-red-400">
                                Delete
                            </button>

                        </form>

                    </td>
                </tr>
                @endforeach
            </tbody>

        </table>
    </div>

</div>

@endsection