<ng-container *ngIf="messages$.length; else loading">
    <ion-grid>
      <ion-row *ngFor="let message of messages$">
        <ion-col
          *ngIf="id === message.id"
          size="9"
          offset="3"
          class="message my-message"
          [ngStyle]="{ background: message.isUrgent ? 'var(--ion-color-danger)' : 'var(--ion-color-primary)' }"
        >
          <img *ngIf="message.image" [src]="message.image" />
          <video *ngIf="message.video">
            <source src="message.video" type="video/mp4" />
          </video>
          <div *ngIf="sentSuccessfully" class="received-message" text-right>
            <img class="success" src="assets/tick.svg" />
          </div>
          <div *ngIf="errorWhileSending" class="received-message" text-right>
            <img class="success" src="assets/tick.svg" />
          </div>
          <p>{{ message.content }}</p>
          <div class="time" text-right>{{ message.timeStamp | date: 'H:H EEE':undefined:'es' }}</div>
          <div class="time" text-right>{{ message.timeStamp | date: 'd MMM yy':undefined:'es' }}</div>
        </ion-col>
<!-- IF MESSAGE IS NOT OURS -->
        <ion-col
          *ngIf="id !== message.id"
          size="9"
          class="message other-message"
          [ngStyle]="{ background: message.isUrgent ? 'var(--ion-color-danger)' : 'var(--ion-color-medium)' }"
        >
          <img *ngIf="message.image" [src]="message.image" />
          <video *ngIf="message.video">
            <source src="message.video" type="video/mp4" />
          </video>
          <p>{{ message.content }}</p>
          <div class="time" text-right>{{ message.timeStamp | date: 'H:H EEE':undefined:'es' }}</div>
          <div class="time" text-right>{{ message.timeStamp | date: 'd MMM yy':undefined:'es' }}</div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ng-container>