<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">
                        <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">
                                Habits
                            </th>
                            <th scope="col" class="px-6 py-2">
{{--                                Edit--}}
                            </th>
                            <th scope="col" class="px-6 py-2">
{{--                                Delete--}}
                            </th>
                            <th>

                            </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">
                                    {{$habit->name}}
                                </td>
                                <td class="px-4 py-2">
                                    <form action="{{route('habits.show', $habit)}}" method="get">
                                        @csrf
                                        <x-secondary-button>View</x-secondary-button>

                                    </form>
                                </td>
                                <td class="px-4 py-2">
                                    <form action="{{route('habits.edit', $habit)}}" method="get">
                                        @csrf
                                        <x-primary-button>Edit</x-primary-button>
                                    </form>
                                </td>
                                <td class="px-4 py-2">
                                    <form action="{{route('habits.destroy', $habit)}}" method="get">
                                        @csrf
                                        <x-danger-button>Delete</x-danger-button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>



                {{--                    <div class="w-auto inline-block">--}}
                {{--                        <div class="grid grid-cols-3 gap-x-8 gap-y-2">--}}
                {{--                            <div>--}}
                {{--                                <b>Name</b>--}}
                {{--                            </div>--}}
                {{--                            <div>--}}
                {{--                                <b>Edit</b>--}}
                {{--                            </div>--}}
                {{--                            <div>--}}
                {{--                                <b>Remove</b>--}}
                {{--                            </div>--}}
                {{--                            @foreach($habits as $habit)--}}
                {{--                                <div>--}}
                {{--                                    {{ $habit->name }} <br>--}}
                {{--                                </div>--}}
                {{--                                <div>--}}
                {{--                                    <form action="{{route('habits.edit', $habit)}}" method="get">--}}
                {{--                                        @csrf--}}
                {{--                                        <x-primary-button>Edit</x-primary-button>--}}
                {{--                                    </form>--}}
                {{--                                </div>--}}
                {{--                                <div>--}}
                {{--                                    <form action="{{route('habits.destroy', $habit)}}" method="get">--}}
                {{--                                        @csrf--}}
                {{--                                        <x-danger-button>Delete</x-danger-button>--}}
                {{--                                    </form>--}}
                {{--                                </div>--}}
                {{--                            @endforeach--}}

                {{--                        </div>--}}
                {{--                    </div>--}}


            </div>
        </div>
    </div>
    </div>
</x-app-layout>