<x-layout title="Categories">
  <x-window>
    <div class="sunken-panel">
      <table class="interactive">
        <thead>
          <tr>
            <th>Category</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody
          x-data="{ hovered: null }"
          x-on:mouseleave="hovered = null"
        >
          @foreach ($categories as $category)
            <tr
              id="{{ $category->id }}"
              x-on:mouseenter="hovered = $event.target.id"
              x-bind:class="{ 'highlighted': hovered === $el.id }"
            >
              <td>{{ $category->name }}</td>
              <td>
                <a href="{{ route('categories.show', $category->id) }}">
                  View
                </a>

                @auth
                  <a
                    href="{{ route('categories.edit', $category->id) }}"
                    class="ml-1"
                  >
                    Edit
                  </a>

                  <form
                    action="{{ route('categories.destroy', $category->id) }}"
                    method="POST"
                    class="ml-1 inline-block"
                  >
                    @csrf
                    @method('DELETE')

                    <a
                      href="#"
                      x-data
                      x-on:click="
                        $event.preventDefault()
                        $el.closest('form').submit()
                      "
                    >
                      Delete
                    </a>
                  </form>
                @endauth
              </td>
            </tr>
          @endforeach
        </tbody>
      </table>
    </div>

    @auth
      <a href="{{ route('categories.create') }}" class="button">New</a>
    @endauth
  </x-window>
</x-layout>
