<div class="conversation-item"
     [ngClass]="{'is-active': isActive}"
     (click)="selectConversation()">
  <div class="actions">
    <div class="dropdown is-hoverable">
      <div class="dropdown-trigger">
        <div class="menu">
          <i class="ri-more-2-line"></i>
        </div>
      </div>
      <div class="dropdown-menu" role="menu">
        <div class="dropdown-content">
          <a class="dropdown-item" (click)="shareConversation($event)">
            <i class="ri-link-m"></i>
            <span>Share</span>
          </a>
          <a class="dropdown-item" (click)="renameConversation($event)">
            <i class="ri-edit-line"></i>
            <span>Rename</span>
          </a>
          <a class="dropdown-item" (click)="pinConversation($event)">
            <i class="ri-pushpin-fill"></i>
            <span>Pin</span>
          </a>
          <hr class="dropdown-divider">
          <a class="dropdown-item trash" (click)="deleteConversation($event)">
            <i class="ri-delete-bin-line"></i>
            <span>Delete</span>
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="container-text">
    <ng-container *ngIf="conversation.pinned; else avatarTemplate">
      <span class="pinned-icon">
        <i class="ri-pushpin-line"></i>
      </span>
    </ng-container>
    <ng-template #avatarTemplate>
      <div class="pinned-icon llm-avatar"></div>
    </ng-template>

    <span class="name">
      {{ conversation.name || 'New Conversation' }}
    </span>

    <span class="date">
      {{ conversation.lastMessageDate | date: 'dd/MM/yyyy' }}
    </span>

    <span class="description">
      {{ conversation.description || 'No description' }}
    </span>

    <input type="text" [(ngModel)]="conversation.name"
           [ngClass]="{'is-visible': conversation.visibleInput}">
  </div>

  <div class="active-peak">
    <svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 7L0 13.9282V0.0717969L12 7Z" fill="#3B87CC" fill-opacity="0.1"/>
    </svg>
  </div>
</div>
