<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
            {{ __('Habits') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900 dark:text-gray-100">

                    <form action="{{route('habits.create')}}" method="get">
                        @csrf
                        <x-primary-button>Create Habit</x-primary-button>
                    </form>
                    <br>

                    {{--                    Table--}}

                    <table class="table-auto text-left text-gray-500 dark:text-gray-400 border shadow">
                        <thead class="text-gray-900 bg-gray-100 dark:bg-gray-700 dark:text-gray-200">
                        <tr>
                            <th scope="col" class="px-4 py-2">
                                Category
                            </th>
                            <th scope="col" class="px-4 py-2">
                                Habit
                            </th>
                            <th scope="col" class="px-6 py-2">
                                Tags
                            </th>
                            <th scope="col" class="px-6 py-2">

                            </th>
                            <th scope="col" class="px-6 py-2">

                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($habits as $habit)
                            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 even:bg-gray-50 hover:bg-gray-100 dark:hover:bg-gray-600">
                                <td class="text-left px-4 py-2">
                                    @if(is_null($habit->category))
                                        No Category
                                    @else
                                        {{$habit->category->name}}
                                    @endif
                                </td>
                                <td class="text-left px-4 py-2">
                                    {{$habit->name}}
                                </td>
                                <td class="text-left px-4 py-2">
                                    @if(sizeof($habit->tags) != 0)
                                        @foreach($habit->tags as $tag)
                                            {{$tag->name . " "}}
                                        @endforeach
                                    @endif
                                </td>
                                <td class="px-4 py-2">
                                    <form action="{{route('habits.show', $habit)}}" method="get">
                                        @csrf
                                        <x-secondary-button type="submit">View</x-secondary-button>
                                    </form>
                                </td>
                                <td class="px-4 py-2">
                                    <form action="{{route('entry_create', $habit)}}" method="get">
                                        @csrf
                                        <x-primary-button>Insert</x-primary-button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>