@props([
    'application',
    'showCompleteValue' => false,
])

@php
    $topics = $application->getTopicsData();
@endphp
<div {{ $attributes->class(['mt-8', 'md:mt-12']) }}>
    @foreach($topics as $topic => $data)
        <a href="{{ route('portal.account.term-volunteer-application.'.str($topic)->slug(), ['term_volunteer_application' => $application]) }}" class="py-6 pl-2 pr-5 flex justify-between items-center border-y border-gray-200 hover:bg-[#fcfcfc]">
            <div>
                <span class="mr-4 font-bold text-gray-900">{{ $topic }}</span>
                @if(filter_var($showCompleteValue, FILTER_VALIDATE_BOOLEAN) && !is_null($data))
                    <span class="mr-2 whitespace-nowrap @if($data['is_completed'] && $data['raw_value'] > 0) text-green-600 @else text-gray-500 @endif">{{ $data['formatted_value'] }}</span>
                @endif
            </div>
            <div>
                @svg('img/icons/right-arrow', 'text-primary-500')
            </div>
        </a>
    @endforeach
</div>