@props(['broadbean_application', 'flags', 'active_flag'])

<div class="px-5">
    <h1 class="text-neutral-800 mb-0 font-semibold text-lg md:text-[22px]">Flag applications</h1>
    <div class="-mx-[3px] flex items-center mt-3">
        @foreach ($flags as $flag)
            <div class="px-[3px]">
                <div wire:click.prevent="addFlag({{$flag->id}})" class="h-[22px] w-[22px] rounded-full relative hover:!opacity-100 hover:cursor-pointer" style="background-color: {{$flag->color}}; @if($active_flag && $active_flag->id == $flag->id) opacity:1 @else opacity:0.3 @endif" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{$flag->title}}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="10" height="12" viewBox="0 0 10 12" fill="none" class="absolute left-[50%] top-[50%] -translate-x-1/2 -translate-y-1/2">
                        <path d="M9.24101 1.73C9.10784 1.63405 8.95394 1.57084 8.79177 1.5455C8.62961 1.52016 8.46376 1.53341 8.30767 1.58417C7.89593 1.69995 7.46949 1.75497 7.04184 1.7475C6.40985 1.7132 5.79019 1.55878 5.21601 1.2925C4.50668 0.964452 3.73943 0.780074 2.95851 0.75C1.27267 0.75 0.625173 1.33333 0.508506 1.415C0.452686 1.46971 0.40843 1.53508 0.378368 1.60723C0.348306 1.67938 0.33305 1.75684 0.333506 1.835V10.6667C0.333506 10.8214 0.394964 10.9697 0.504361 11.0791C0.613757 11.1885 0.76213 11.25 0.916839 11.25C1.07155 11.25 1.21992 11.1885 1.32932 11.0791C1.43871 10.9697 1.50017 10.8214 1.50017 10.6667V8.15833C1.96499 7.98037 2.4612 7.89899 2.95851 7.91917C3.59049 7.95347 4.21016 8.10789 4.78434 8.37417C5.49366 8.70221 6.26091 8.88659 7.04184 8.91667C7.74505 8.94322 8.4446 8.80332 9.08351 8.50833C9.2557 8.42744 9.4017 8.29978 9.50484 8.13991C9.60799 7.98004 9.66412 7.7944 9.66684 7.60417V2.56417C9.66663 2.4014 9.62795 2.24099 9.55394 2.09602C9.47994 1.95105 9.37271 1.82564 9.24101 1.73ZM8.50017 7.51083C8.03519 7.68817 7.53911 7.76952 7.04184 7.75C6.40907 7.71647 5.7889 7.55994 5.21601 7.28917C4.50533 6.96585 3.73865 6.78359 2.95851 6.7525C2.46705 6.74403 1.97664 6.80092 1.50017 6.92167V2.16167C1.9639 1.97928 2.46063 1.89583 2.95851 1.91667C3.59128 1.9502 4.21145 2.10673 4.78434 2.3775C5.49501 2.70081 6.2617 2.88307 7.04184 2.91417C7.5336 2.92143 8.0241 2.86257 8.50017 2.73917V7.51083Z" fill="white"/>
                    </svg>
                </div>
            </div>
        @endforeach
     
        
     
    </div>
    <div class="bg-gray-200  w-full h-[1px] my-5">
    </div>
</div>