<section>
    <header>
        <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
            <i class="fa-solid fa-object-group"></i> {{ __('Website Design') }}
        </h2>
    </header>

    <form method="post" action="{{ route('profile.settings.save') }}">
        @csrf
        <div class="grid grid-cols-2 items-center text-left gap-2">
            <p class="font-medium text-gray-900 dark:text-gray-100">
                {{ __('Search:') }}
            </p>
            <select id="searchDesign" name="searchDesign" class="block p-4 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-rose-800 focus:border-rose-900 dark:bg-neutral-900 dark:border-neutral-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-rose-800 dark:focus:border-rose-900">
                <option value="cover" @if(!$user->search_design) selected="selected" @endif>Poster</option>
                <option value="thumbnail" @if($user->search_design) selected="selected" @endif>Thumbnail</option>
            </select>
            <p class="font-medium text-gray-900 dark:text-gray-100">
                {{ __('Home Top Row:') }}
            </p>
            <select id="topDesign" name="topDesign" class="block p-4 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-rose-800 focus:border-rose-900 dark:bg-neutral-900 dark:border-neutral-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-rose-800 dark:focus:border-rose-900">
                <option value="cover" @if(!$user->home_top_design) selected="selected" @endif>Poster</option>
                <option value="thumbnail" @if($user->home_top_design) selected="selected" @endif>Thumbnail</option>
            </select>
            <p class="font-medium text-gray-900 dark:text-gray-100">
                {{ __('Home Middle Row:') }}
            </p>
            <select id="middleDesign" name="middleDesign" class="block p-4 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-rose-800 focus:border-rose-900 dark:bg-neutral-900 dark:border-neutral-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-rose-800 dark:focus:border-rose-900">
                <option value="cover" @if(!$user->home_middle_design) selected="selected" @endif>Poster</option>
                <option value="thumbnail" @if($user->home_middle_design) selected="selected" @endif>Thumbnail</option>
            </select>
        </div>
        <br>
        <div class="flex items-center gap-4">
            <x-primary-button>{{ __('Save') }}</x-primary-button>

            @if (session('status') === 'design-updated')
            <p x-data="{ show: true }" x-show="show" x-transition x-init="setTimeout(() => show = false, 2000)" class="text-sm text-gray-600 dark:text-gray-400">{{ __('Saved.') }}</p>
            @endif
        </div>
    </form>

</section>