@extends('layouts.app')

@section('content')
<style>
    .btn-check:checked+.btn {
        background-color: rgb(231, 117, 11);
        color: white;
    }

    td,
    h4 {
        color: #333c4e !important
    }
</style>
<div class="container">
    <div>
        <form class="d-lg-flex mb-3 justify-content-between align-items-center" method="GET" action="{{ route('posts') }}">
            <div class="p-2 border rounded-3 border-1 p-1 bg-white">
                <input type="radio" class="btn-check" onclick="this.form.submit()" name="filter[category]" value="all"
                    id="option_all" autocomplete="off" checked>
                <label class="btn p-2 fs-5" for="option_all">Все</label>

                @foreach ($categories as $category)
                <input type="radio" class="btn-check" onclick="this.form.submit()" name="filter[category]"
                    value="{{ $category->value }}" id="cat_{{ $category->name }}" autocomplete="off"
                    {{ isset($filter) && isset($filter['category']) && $filter['category'] == $category->value ? 'checked' : '' }}>
                <label class="btn p-2 fs-5" for="cat_{{ $category->name }}">{{ __($category->name) }}</label>
                @endforeach
            </div>

            <div class="ms-auto py-2 hstack gap-2">
                @can('create', \Modules\Post\Models\Post::class)
                <div class="">
                    @livewire('post.form', ['post' => new \Modules\Post\Models\Post()])
                </div>
                @endcan
                <select class="d-none form-select form-select-lg bg-white" disabled aria-label="Large select example">
                    <option selected>Город: любой</option>
                    <option value="1">Иркутск</option>
                    <option value="2">Владивосток</option>
                    <option value="3">Красноярск</option>
                </select>
                <select class="d-none form-select form-select-lg bg-white" disabled aria-label="Large select example">
                    <option selected>Проект: все проекты</option>
                    <option value="1">Проект 1</option>
                    <option value="2">Проект 2</option>
                    <option value="3">Проект 3</option>
                </select>
            </div>

        </form>
    </div>
    <div>
        @livewire('posts.list', $filter)
    </div>
</div>
@endsection