@if(count($messages) == 0)
<div class="d-flex flex-center" id="help-message">
    <h1>What can I help with?</h1>
</div>
@else
    @foreach($messages as $message)
        <div class="d-flex justify-content-end mb-10 ">
            <div class="d-flex gap-2 align-items-start">
                <div class="text-gray-900 fw-semibold text-end text-break p-5 rounded bg-light-primary" data-kt-element="message-text">
                    {{$message['question']}}
                </div>
                <div class="d-flex align-items-center">                
                    <div class="symbol symbol-35px symbol-circle ">
                        <div class="symbol-label fs-3 bg-light-danger text-danger">{{substr(ucfirst($auth_user->firstname), 0, 1)}}</div>
                    </div>
                </div>            
            </div>
        </div>
        @if($message['answer'])
            <div class="d-flex justify-content-start mb-10 ">
                <div class="d-flex align-items-start gap-2">
                    <div class="d-flex align-items-center">
                        <div class="symbol  symbol-35px symbol-circle ">
                            <div class="symbol-label fs-3 bg-light-danger text-danger">
                                <img alt="Logo" src="{{ image('logos/textdrip-cropped-removebg-preview.png') }}" class="h-25px logo">
                            </div>
                        </div>
                    </div>
                    <div class="text-gray-900 fw-semibold text-start text-break p-5 rounded bg-light-info" data-kt-element="message-text">
                        {!! nl2br(str_replace(['\n', '\t'], ['<br>', '&nbsp;&nbsp;&nbsp;&nbsp;'], $message['answer'])) !!}
                    </div>
                </div>
            </div>
        @endif
    @endforeach
@endif