@props(['vehicle', 'keychain', 'case', 'case_employee'])
<div class="pb-4 flex justify-between items-center">
    <div class="text-2xl font-bold text-gray-800">
        <span class="px-4 py-1 rounded-full bg-gray-500 text-white mr-2">{{ $keychain->keychain ?: '' }}</span>
        <span class="px-2 py-1 rounded-md bg-gray-700 text-white mr-4">{{ $vehicle->plate_number ?: '' }}</span>
        {{ $vehicle->car_brand ?: '' }} {{ $vehicle->car_model ?: '' }}
        {{--!! !empty($vehicle->vin) ? '<span class="ml-4">VIN: ' . $vehicle->vin . '</span>' : '' !!--}}
        <button type="button" id="modal-button-vehicle-info" class="ml-4 border rounded-full px-4 text-white bg-sky-500">info</button>
        @if(!empty($case_employee))
            <span class="text-[0.7em] ml-4">
            {{ __('office.mechanics') }}:
            @foreach($case_employee as $employee)
                {{ $employee->name }} {{ $employee->last_name }};
            @endforeach
            </span>
        @endif
    </div>
    <div class="rounded-lg border-2 border-slate-600 text-lg py-[1px]">
        <span class="font-bold ml-3 mr-1">Status</span>
        <span class="px-2 py-1 mr-2 status-color{{ $case->status }}">
            {{ __('workshop.position_status.'.$case->status) }}
        </span>
    </div>
</div>