@if($mail_list->isNotEmpty())
  <ul class="list-unstyled m-0">
    @foreach($mail_list as $key => $mail_info)
      @php
        $elem_id = $key + 1;
        //BEGIN pfp
        $users_from_profile_pic = $mail_info->users_from_profile_pic;
        $base_path = asset('uploads/users_profile_pic');  
        $default_image_path = asset('dist/images')."/"."profile-default.png";
        $full_pic_path_from_user = "";
        $full_pic_path_to_user = "";

        if($users_from_profile_pic)
        {
          $full_pic_path_from_user = $base_path."/".$users_from_profile_pic;
        }
        else
        {
          $full_pic_path_from_user = $default_image_path;
        }
        //END pfp

        $user_from_full_name = $mail_info->user_from_full_name;
        $subject = $mail_info->subject;
        $mail_created = $mail_info->created;
        $mail_modified = $mail_info->modified;
        $mail_id = $mail_info->id;
        $mail_recipients_arr =  json_decode($mail_info->to_emails);
        $mail_type = $mail_info->type;
        $mail_status = $mail_info->status;
        $mail_label_id = $mail_info->mail_label_id;
        $mail_label_bg_color = $mail_info->mail_label_bg_color;
        $popover_content = '<div class="">';
        foreach($mail_recipients_arr as $recipient)
        {
          $popover_content = $popover_content.
          '<div class="">
            <span class="badge bg-label-primary rounded-pill me-1 mt-1">
              '.$recipient.'
            </span>
          </div>'; 
        }           
        $popover_content = $popover_content.'</div>';
      @endphp
      <li class="email-list-item py-3" data-mail_id = "{{ $mail_id }}" data-mail_filter_type="{{ $mail_filter_type }}">
        <div class="d-flex align-items-center">
          <div class="form-check mb-0">
            <input id="email_{{$elem_id}}" class="email-list-item-input form-check-input" type="checkbox" value="{{ $mail_id }}"/>
            <label class="form-check-label" for="email_{{$elem_id}}"></label>
          </div>

          @if($mail_filter_type == 'SENT' || $mail_filter_type == 'STARRED')
            @php
              $bookmarked_i = "";
              if($mail_type == 'ST')
              {
                $bookmarked_i = "bookmark_i";
              }
            @endphp
            <span class="email-list-item-bookmark {{$bookmarked_i}}" data-mail_id = "{{ $mail_id }}" data-mail_type = "{{ $mail_type }}">
              <i class="ti ti-star ti-xs d-sm-inline-block d-none cursor-pointer ms-2 me-3"></i>
            </span>
          @endif

          <div class="email-list-item-content">
            <span class="fw-bold">To: </span>
            <span class="h6 email-list-item-username">{{ @$mail_recipients_arr[0] }}</span>
            
            <!--  -->
            <a href="javascript:void(0);" class="mail_parti_popoevr" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="{{ $popover_content }}" title="" data-bs-trigger="hover">
              <i class="ti ti-circle-plus"></i>
            </a>
            <!--  -->
            
            <span class="email-list-item-subject d-xl-inline-block d-block">
              {{ $subject }}
            </span
            >
          </div>
          <div class="email-list-item-meta ms-auto d-flex align-items-center justify-content-end">
            
            @if($mail_filter_type == 'TRASH')
              @if($mail_status == 'S')
                <span class="badge bg-label-success me-2">
                  sent
                </span>
              @elseif($mail_status == 'D')
                <span class="badge bg-label-danger me-2">
                  draft
                </span>
              @endif
            @endif

            @if($mail_label_bg_color && $mail_label_id)
              @php
                $style = 'background-color:'.$mail_label_bg_color;
              @endphp
              <span
                class="badge badge-dot d-none d-md-inline-block me-2"
                style="{{ $style }}"
              ></span>
            @endif

            <small class="email-list-item-timeZ text-muted">
              @if($mail_filter_type == 'SENT')
                {{ date_format($mail_modified,"d M Y h:i a") }}
              @else
                {{ date_format($mail_modified,"d M Y h:i a") }}
              @endif
            </small>

            @if($mail_filter_type == 'SENT' || $mail_filter_type == 'DRAFT')
              <span class="email-delete ms-2" data-mail_id = "{{ $mail_id }}" data-mail_filter_type="{{ $mail_filter_type }}">
                <i class="ti ti-trash"></i>
              </span>
            @elseif($mail_filter_type == 'TRASH')
              <span class="email-restore ms-2" data-mail_id = "{{ $mail_id }}" data-mail_filter_type="{{ $mail_filter_type }}" data-mail_status = "{{ $mail_status }}">
                <i class="ti ti-trash-off"></i>
              </span>
            @endif

            @if($mail_filter_type == 'DRAFT')
              <span class="btn-edit-compose ms-2" data-mail_id = "{{ $mail_id }}" data-mail_filter_type="{{ $mail_filter_type }}">
                <i class="ti ti-edit"></i>
              </span>
            @endif

          </div>
        </div>
      </li>
    @endforeach
  </ul>
@else
  <div class="ms-5 mt-2">
    <span class="text-danger">no record found</span>
  </div>
@endif

<script>
  $('[data-bs-toggle=popover]').popover({
    html:true
  });
</script>