@props(['cardstyle', 'id','rating', 'progresssmColor', 'percent', 'name', 'role','img','color','description','value'])
<div class="card card-trainers {{$cardstyle}}" id="trainers-card-{{$id}}">
    <div class="card-body text-center card-inner flex-wrap">
        <div class="card-profile">
            <div class="card-profile-info">
                <h5 class="{{ $role }} card-title">{{$role }}</h5>
                
                <small class="mb-2 text-muted {{ $name }} card-detail">{{ $name }}</small>
               
                <span class="d-flex justify-content-center">
                    @for ($i = 1; $i <= 5; $i++)
                    @if($rating >= $i)
                        <x-rating-star fill=1/>
                    @else
                        <x-rating-star fill=0/>
                    @endif
                    @endfor
                </span>
               
                
            </div>
            <div class="card-profile-progress">
                <div id="circle-progress-{{$id}}" class="circle-progress  circle-progress-basic circle-progress-{{$color}}" data-min-value="0" data-max-value="100" data-value="{{$value}}" data-type="percent"></div>
                <img src="{{ $img }}" class="img-fluid  rounded-circle card-img {{ $img }}" alt="image">    
            </div>
            
            <img src="{{ $img }}" class="img-fluid  rounded-circle card-img d-none card-sm-img mx-2 {{ $img }}" alt="image">    
           
        </div>
        
        <p class="mb-0 mt-4 mb-4 text-muted list-none">{{ $description }}</p>
      
            <div class="dropdown  dropdown-sm-none d-none">
                <a href="#" class="mx-2" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <svg xmlns="http://www.w3.org/2000/svg"  width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
                    </svg>
                </a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
                    <div class="d-flex">
                        <a href="#" class="btn btn-sm  rounded-circle px-2 py-2 ml-2">
                            <svg xmlns="http://www.w3.org/2000/svg" class="text-primary" width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" />
                            </svg>
                        </a>
                        <a href="#" class="btn btn-sm  rounded-circle px-2 py-2  ml-2">
                            <svg xmlns="http://www.w3.org/2000/svg" class="text-danger" width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
                                <path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z" />
                            </svg>
                        </a>
                        <a href="#" class="btn btn-sm  rounded-circle px-2 py-2 ml-2">
                            <svg xmlns="http://www.w3.org/2000/svg" class="text-success" width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clip-rule="evenodd" />
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
            
           
            
            
        
        <div class="d-flex justify-content-center align-items-center card-action">
            <a href="#" class=" btn-sm  rounded-circle px-2 py-2 ml-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="text-primary" width="24" height="24" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" />
                </svg>
            </a>
            <a href="#" class=" btn-sm  rounded-circle px-2 py-2  ml-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="text-danger" width="24" height="24" viewBox="0 0 20 20" fill="currentColor">
                <path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z" />
                </svg>
            </a>
            <a href="#" class=" btn-sm  rounded-circle px-2 py-2 ml-2">
               <svg xmlns="http://www.w3.org/2000/svg" class="text-success" width="24" height="24" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clip-rule="evenodd" />
            </svg>
            </a>
        </div>

        
        
        <div class="iq-progress-bar iq-bg-danger iq-sm-progress d-none mt-3">
                <span class="bg-{{$progresssmColor}}" data-percent="{{$percent}}"></span>
        </div>
        
    </div>
         
</div>