<x-layout title="Categories">
  <x-window x-data="{ tab: 'active' }">
    @auth
      <x-tablist class="mt-3">
        <x-tablist.tab id="active">Active</x-tablist.tab>
        <x-tablist.tab id="deleted">Deleted</x-tablist.tab>
      </x-tablist>
    @endauth

    <div class="window" role="tabpanel" x-show="tab === 'active'">
      <div class="sunken-panel">
        <table class="interactive">
          <thead>
            <tr>
              <th>Category</th>
              @auth
                <th>Actions</th>
              @endauth
            </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>
                  <a
                    href="{{ route('categories.show', $category->id) }}"
                    class="text-inherit no-underline"
                  >
                    {{ $category->name }}
                  </a>
                </td>
                @auth
                  <td>
                    <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.prevent="$el.closest('form').submit()"
                      >
                        Delete
                      </a>
                    </form>
                  </td>
                @endauth
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>

    <div class="window" role="tabpanel" x-show="tab === 'deleted'">
      <div class="sunken-panel">
        <table class="interactive">
          <thead>
            <tr>
              <td>Category</td>
              <td>Actions</td>
            </tr>
          </thead>
          <tbody>
            @foreach ($trashedCategories as $category)
              <tr>
                <td>{{ $category->name }}</td>
                <td>
                  <form
                    action="{{ route('categories.update', $category->id) }}"
                    method="POST"
                  >
                    @csrf
                    @method('PATCH')

                    <input type="hidden" name="restore" value="1" />

                    <a
                      href="#"
                      x-on:click.prevent="$el.closest('form').submit()"
                    >
                      Restore
                    </a>
                  </form>
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
    @auth
      <a href="{{ route('categories.create') }}" class="button">New</a>
    @endauth
  </x-window>
</x-layout>
