@php
    $readStatus = [
               ['id' => 'read', 'ui_name' => 'Read'],
               ['id' => 'unread', 'ui_name' => 'Unread'],
           ];
@endphp

<x-ui.modal blade="{{ $viewName ?? 'unknown' }}" title="VIEWING NOTIFICATION {{$notification->title}}" id="view-notification-modal-{{$notification->id}}">

    <x-slot name="body">
        <div class="row">

            <div class="col-6">
                <x-ui.select.modal
                    :options="$notification_categories"
                    selected="{{$notification->category}}"
                    label="CATEGORY:"
                    name="CATEGORY"
                    id="category-type"
                    class="custom-select-class"
                    disabled
                />
            </div>

            <div class="col-6">
                <x-ui.select.modal
                    :options="$tags"
                    selected="{{$notification->tag}}"
                    label="TAG:"
                    name="TAG"
                    id="tag"
                    class="custom-select-class"
                    disabled
                />
            </div>

            @if($notification->category === 'private')

                <div class="col-12">
                    <x-ui.select.modal-multi-select
                        :selected="$notification->recipients"
                        label="USERS:"
                        name="users_ids"
                        :options="$users"
                        disabled
                    />
                </div>

            @endif


            <div class="col-6">

                <x-ui.input-field.modal
                    value="{{\Carbon\Carbon::parse($notification->scheduled_at)->format('Y-m-d')}}"
                    placeholder="E.g. 29/01/2023" name="scheduled_at" label="SCHEDULED AT" readonly
                    type="date"/>
            </div>

            <div class="col-6">
                <x-ui.input-field.modal value="{{$notification->title}}" placeholder="Please, choose Title"
                                        name="title" label="TITLE" readonly/>
            </div>

            <div class="col-12">
                <x-ui.text-area.modal
                    readonly
                    value="{{$notification->body}}"
                    name="body"
                    label="BODY">
                    {{$notification->body}}
                </x-ui.text-area.modal>
            </div>

        </div>

    </x-slot>
</x-ui.modal>