<button disabled tuiButton appearance="secondary" iconStart="@tui.mail-plus">
  {{ "chat.chatnav.dmList.newChat"|translate }}
</button>
@if (serviceManager.chatsStatus() == LoadStatus.updating) {
  <div id="loader">
    <tui-loader/>
    {{ "updating"|translate }}
  </div>
}
@for (chat of serviceManager.chats(); track chat.chatid) {
  <button [class.enlarge]="breakpoint() == 'mobile'" tuiButton
          [appearance]="router.url == '/chat/dm/' + chat.chatid ? 'primary' : 'flat'"
          [routerLink]="'/chat/dm/' + chat.chatid">
    <oimg [src]="chat.pfp" height="35px" width="35px" [radius]="10"></oimg>
    <div class="info">
      @if (chat.displayName == "") {
        <span>{{ '@' + chat.username }}</span>
      } @else {
        <span>{{ chat.displayName }}</span>
      }
      @if (chat.latestMessage) {
        <span class="latest_message">
          @if (chat.latestMessage.isAuthor) {
            {{ "chat.chatnav.dmList.messageBox.latestMessage.you"|translate }}
          }
          {{ chat.latestMessage.message }}
        </span>
      }
    </div>
  </button>
}
