<section class="small_banner burger bg-black">
  <div class="ccontainer">
    <div class="crow g-0">
      <div class="ccol ccol-xl-4 ccol-lg-4 ccol-md-7 ccol-sm-8 mx-auto">
        <div class="bannerslider__content">
          <div class="badge badge-light">
            @if($volunteer_opportunity_hours == 1) 
              {{$volunteer_opportunity_hours}} {{ trans('event.hour_logged') }}
            @else
              {{$volunteer_opportunity_hours}} {{ trans('event.hours_logged') }}
            @endif
          </div>
          <div class="d-flex flex-justify-between">
            <h1 class="border-bottom-0 text-white pb-2">{{Auth::user()->name}}</h1>
            <div>
              <div class="profile_img">
                <?php
                  $user = Auth::user();
                  $role = $user->roles->pluck('title','id')->toArray();
                  $user_profile_img = URL::asset('images/profile_img.png');
                  if(!empty($user->user_profile_img)){
                    if(!in_array('Volunteer',$role)){
                      $user_profile_img = URL::asset('Profile/'.$user->id.'/'.$user->user_profile_img);
                    }else{
                      $user_profile_img = URL::asset('frontend/Profile/'.$user->id.'/'.$user->user_profile_img);
                    }
                      
                  }
                ?>
                <img src="{{$user_profile_img}}" class="img user_profile_img_file" />
                
              </div>
            </div>
          </div>
          <div class="progress-bar">
            <div class="progress" style="width:{{$volunteer_progress}}%"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>