@php
 $hotelName = setting('hotel_name', 'Laravel');
@endphp

<x-app-layout>
 @push('title', auth()->user() ? auth()->user()->username : __('Help Center'))

 <div class="col-span-12 flex flex-col lg:flex-row gap-4">
 <div class="flex flex-col gap-4 w-full lg:w-3/5">
 @foreach($categories->where('small_box', false) as $category)
 <x-content.content-card icon="duo-chat-icon" classes="border border-[var(--color-text-muted)]">
 <x-slot:title>
 {{ str_replace(':hotel', $hotelName, $category->name) }}
 </x-slot:title>

 <div class="px-2 text-sm text-[var(--color-text)]">
 <img class="px-2" style="float: right !important;"
 src="{{ asset('/assets/images/help-center/' . $category->image_url) }}" alt="">
 {!! str_replace(':hotel', $hotelName, $category->content) !!}
 </div>

 <a data-turbolinks="false" href="{{ $category->button_url ?? '#' }}" class="mt-4 ml-2">
 <button
 style="background-color: {{ $category->button_color }}; border: {{ $category->button_border_color }} solid 2px; color: var(--button-text-color);"
 class="px-2 py-1 font-semibold rounded transition hover:scale-105">
 {{ str_replace(':hotel', $hotelName, $category->button_text) }}
 </button>
 </a>
 </x-content.content-card>
 @endforeach
 </div>

 <div class="flex flex-col gap-4 w-full lg:w-2/5">
 @foreach($categories->where('small_box', true) as $category)
 <x-content.content-card icon="duo-chat-icon" classes="border border-[var(--color-text-muted)]">
 <x-slot:title>
 {{ str_replace(':hotel', $hotelName, $category->name) }}
 </x-slot:title>

 <div class="px-2 text-sm text-[var(--color-text)]">
 {!! str_replace(':hotel', $hotelName, $category->content) !!}
 </div>

 <a data-turbolinks="false" href="{{ $category->button_url ?? '#' }}" class="mt-4 ml-2">
 <button
 style="background-color: {{ $category->button_color }}; border: {{ $category->button_border_color }} solid 2px; color: var(--button-text-color);"
 class="px-2 py-1 font-semibold rounded transition hover:scale-105">
 {{ str_replace(':hotel', $hotelName, $category->button_text) }}
 </button>
 </a>
 </x-content.content-card>
 @endforeach
 </div>
 </div>
</x-app-layout>