<span  class="inline-flex items-center rounded-md {{ $this->getColorClasses() }} px-1.5 py-0.5 text-xs font-medium"
      @if($this->type)
          x-init="Echo.private(`{{$this->type}}.@js($this->id)`).listen('Project{{ucfirst($this->type)}}Status', (e) => {
                                                console.log(e.project{{ucfirst($this->type)}}.status);
                                                if(e.project{{ucfirst($this->type)}}.status){
                                                    $wire.setStatus(e.project{{ucfirst($this->type)}}.status);
                                                    console.log('update pending message');
                                                    $wire.refreshPendingMessage();
                                                }
                                            });"
      x-destroy="Echo.leaveChannel(`{{$this->type}}.@js($this->id)`);"
      @endif
>
    {{ $status }}
</span>