@php $low = $percentage < 50; @endphp

<div class="bg-white shadow-md sm:rounded-lg p-6 mb-6">
    @if ($low)
    <div class="mb-4 p-4 bg-brand-light-gray text-brand-primary border border-brand-light-gray rounded">
            تنبيه: لم تقم بإكمال بياناتك الأساسية. يرجى إكمال ملفك الشخصي لاستخدام الموقع بشكل كامل.
        </div>
    @endif

    <h3 class="text-lg font-semibold text-brand-text mb-2">نسبة اكتمال الملف الشخصي</h3>

    <div class="relative pt-1 mb-4">
        <div class="flex mb-2 items-center justify-between">
            <div>
                <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full {{ $low ? 'bg-brand-light-gray text-brand-primary' : 'bg-brand-accent text-brand-text' }}">
                    {{ $percentage }}%
                </span>
            </div>
        </div>
    <div class="overflow-hidden h-4 mb-4 text-xs flex rounded bg-brand-light-gray">
            <div style="width: {{ $percentage }}%"
                 class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center {{ $low ? 'bg-brand-primary' : 'bg-gradient-to-r from-[#ffc107] to-[#ffb347]' }}">
            </div>
        </div>
    </div>

    <p class="text-sm text-brand-text">
        للوصول الكامل لمزايا الموقع، يُرجى إكمال جميع الحقول المطلوبة في
        <a href="{{ route('profile.edit') }}" class="text-indigo-600 underline">الملف الشخصي</a>.
    </p>
</div>