<mat-card appearance="outlined" class="card">
  <mat-card-title class="customer-info">
    <img src="{{timeLineItem.img}}" alt="{{timeLineItem.img}}" class="avatar">

    <div class="customer-name-wrapper">
      <p class="customer-name"><a class="link">{{timeLineItem.name}}</a> {{timeLineItem.nik}}</p>
      <p class="date-publish">{{timeLineItem.datePublish}}</p>
    </div>
  </mat-card-title>

  <mat-card-subtitle class="description">
    @if (timeLineItem.title) {
      <p class="title-text">{{timeLineItem.title}}</p>
    }
    <p class="description-text">{{timeLineItem.description}}</p>
  </mat-card-subtitle>

  <mat-card-content class="content">
    @if (timeLineItem.content.type === 'map') {
      <iframe
        [src]="mapEmbedUrl"
        class="osm-map"
        title="OpenStreetMap"
        loading="lazy"
        referrerpolicy="no-referrer-when-downgrade"
      ></iframe>
    }

    @if (timeLineItem.content.type !== 'map' && timeLineItem.content.img) {
      <img class="content-img" src="{{timeLineItem.content.img}}">
    }

    @if (timeLineItem.content.type !== 'map' && timeLineItem.content.text) {
      <div class="content-text-wrapper">
        <button color="default" mat-flat-button class="content-button" (click)="showText()">Read more...</button>
        @if (isShowText) {
          <p class="content-text">{{timeLineItem.content.text}}</p>
        }
      </div>
    }

    <div class="action-wrapper">
      <div class="icons-block">
        <button color="default" mat-mini-fab class="icon-wrapper">
          <mat-icon class="icon">favorite</mat-icon>
        </button>
        <button color="default" mat-mini-fab class="icon-wrapper">
          <mat-icon class="icon">message</mat-icon>
        </button>
      </div>

      @if (timeLineItem.likes.length !== 0) {
        <div class="likes-wrapper">
          @for (item of timeLineItem.likes; track item) {
            <img class="likes-logo" src="{{item.img}}" alt="{{item.img}}">
          }
        </div>
      }
    </div>

  </mat-card-content>

  @if (timeLineItem.comments.length !==0) {
    <mat-card-footer class="comments">
      @for (item of timeLineItem.comments; track item) {
        <div class="comment-wrapper">
          <img class="avatar" src="{{item.img}}" alt="{{item.img}}">
          <div>
            <p class="comment-name"><a class="link">{{item.name}}</a> {{item.date}}</p>
            <p class="comment-text">{{item.comment}}</p>
          </div>
        </div>
      }
      <div class="custom-comment-wrapper">
        <button mat-mini-fab color="primary" class="custom-icon">P</button>
        <mat-form-field class="custom-comment">
          <input matInput placeholder="Write your comment...">
        </mat-form-field>
      </div>
    </mat-card-footer>
  }
</mat-card>
