<div class="profile-content">
  <div class="row">
    <div class="col-lg-4">
      <mat-card class="cardWithShadow shadow-none b-1">
        <mat-card-content>
          <h5 class="f-s-21 f-w-600 m-b-16">Introduction</h5>
          <p class="f-s-14 m-b-16 m-t-0">
            Hello, I am Mathew Anderson. I love making websites and graphics.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </p>
          <div class="d-flex align-items-center gap-16 m-b-24">
            <i-tabler name="briefcase" class="icon-20"></i-tabler>
            <h6 class="f-s-16 f-w-600">Sir, P P Institute Of Science</h6>
          </div>
          <div class="d-flex align-items-center gap-16 m-b-24">
            <i-tabler name="mail" class="icon-20"></i-tabler>
            <h6 class="f-s-16 f-w-600">xyzjonathan&#64;gmail.com</h6>
          </div>
          <div class="d-flex align-items-center gap-16 m-b-24">
            <i-tabler name="device-desktop" class="icon-20"></i-tabler>
            <h6 class="f-s-16 f-w-600">www.xyz.com</h6>
          </div>
          <div class="d-flex align-items-center gap-16">
            <i-tabler name="map-pin" class="icon-20"></i-tabler>
            <h6 class="f-s-16 f-w-600">Newyork, USA - 100001</h6>
          </div>
        </mat-card-content>
      </mat-card>

      <mat-card class="cardWithShadow shadow-none b-1">
        <mat-card-content>
          <h5 class="f-s-21 f-w-600 m-b-16">Photos</h5>
          <div class="row">
            @for (topcard of topcards; track topcard; let i = $index) {
            @if (i % 3 === 0 || (i - 1) % 3 === 0 || (i - 2) % 3 === 0) {
            <div class="col-4 p-x-10 m-b-20">
              <img [src]="topcard.img" alt="users" class="img-fluid w-100 rounded" />
            </div>
            }
            }
          </div>
        </mat-card-content>
      </mat-card>
    </div>

    <div class="col-lg-8">
      <!--first card-->
      <mat-card class="cardWithShadow shadow-none b-1">
        <mat-card-content>
          <mat-form-field appearance="outline" class="w-100" color="primary">
            <textarea matInput rows="5" placeholder="Share your thoughts"></textarea>
          </mat-form-field>

          <!-- FLEX CONTAINER FOR BUTTONS -->
          <div class="d-flex justify-content-between align-items-center gap-12">
            <!-- LEFT SIDE: Photo / Video + Article -->
            <div class="d-flex align-items-center gap-8">
              <!-- Photo / Video -->
              <div class="d-flex align-items-center gap-8">
                <button mat-mini-fab class="bg-primary text-white icon-30">
                  <i-tabler name="photo" class="icon-18 d-block"></i-tabler>
                </button>
                <button mat-button (click)="openFilePicker()"> Photo / Video</button>

                <input type="file" #fileInput style="display: none" (change)="onFileSelected($event)" />
              </div>

              <!-- Article -->

              <div class="d-flex align-items-center gap-8">
                <button mat-mini-fab class="bg-secondary text-white icon-30">
                  <i-tabler name="file-text" class="icon-18 d-block"></i-tabler>
                </button>
                <button mat-button> Article</button>
              </div>
            </div>

            <!-- RIGHT SIDE: Post -->
            <button mat-flat-button class="ms-auto">Post</button>
          </div>
        </mat-card-content>
      </mat-card>
      <!--first end card-->
      @for(post of posts;track post.id){
      <mat-card class="cardWithShadow shadow-none b-1">
        <mat-card-content>

          <div class="d-flex align-items-center gap-16">
            <img [src]="post.profile.avatar" alt="user" width="40" class="rounded-circle" />
            <h6 class="f-s-16 f-w-600">{{
              post.profile.name
              }}</h6>
            <span class="f-s-12 d-flex align-items-center gap-4 lh-sm">
              <i-tabler class="op-5 d-flex icon-6" name="circle-filled"></i-tabler>
              {{ post.profile.time }}
            </span>
          </div>

          <p class="f-s-14 m-t-16">{{ post.data.content }}</p>

          <!-- Display Featured Images -->
          @if (hasFeaturedImages(post)) {
          @for (image of getFeaturedImages(post); track i; let i = $index) {
          <img [src]="image.img" alt="featured image" class="commentImg object-cover w-100 rounded-8 m-b-16"
            height="360" />
          }
          }


          <!-- Display Other Images -->
          @if (hasOtherImages(post)) {
          <div class="row g-4">
            @for (image of getOtherImages(post); track i; let i = $index) {
            <div class="col-lg-6">
              <img [src]="image.img" alt="regular image" class="commentImg rounded-8 w-100" />
            </div>
            }
          </div>
          }

          @if(post.data.video){
          <iframe width="100%" height="300" [src]="getSafeVideoUrl(post.data.video)" frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen class="rounded-8">
          </iframe>
          }

          <!-- Like and Comment Buttons -->
          <div class="d-flex align-items-center justify-content-between gap-8">
            <div class="left-buttons d-flex align-items-center gap-16">
              <div class="d-flex align-items-center gap-8">
                <button mat-mini-fab class="bg-primary text-white icon-30" aria-label="Like" #tooltip="matTooltip"
                  matTooltip="Like">
                  <i-tabler class="icon-18 d-block" name="thumb-up"></i-tabler>
                </button>
                <span class="f-s-14 f-w-600">{{ post.data.likes.value }}</span>
              </div>

              <div class="d-flex align-items-center gap-8">
                <button mat-mini-fab class="bg-secondary text-white icon-30" aria-label="Comment" #tooltip="matTooltip"
                  matTooltip="Comment">
                  <i-tabler class="icon-18 d-block" name="message-circle"></i-tabler>
                </button>
                <span class="f-s-14 f-w-600">{{ post.data.comments.length }}</span>
              </div>
            </div>

            <!-- Share Button -->
            <div class="right-button d-flex align-items-center">
              <button mat-icon-button class="d-flex text-primary" aria-label="Share" #tooltip="matTooltip"
                matTooltip="Share">
                <i-tabler class="icon-18 d-block" name="share"></i-tabler>
              </button>
            </div>
          </div>

          <!-- Comments Section -->
          @for(comment of post.data.comments; track comment){
          <mat-card class="cardWithShadow shadow-none b-1 m-t-24">
            <mat-card-content>
              <div class="d-flex align-items-center gap-8">
                <img [src]="comment.profile.avatar" alt="user" width="33" class="rounded-circle" />
                <span class="f-s-16 f-w-500 m-l-4">{{
                  comment.profile.name
                  }}</span>
                <span class="f-s-12 d-flex align-items-center gap-4 lh-sm">
                  <i-tabler class="op-5 d-flex icon-6" name="circle-filled" style="height: 5px; width: 5px"></i-tabler>
                  {{ comment.profile.time }}
                </span>
              </div>
              <p class="f-s-14 m-t-16">{{ comment.data.comment }}</p>
              <!-- Comment Likes -->
              <div class="d-flex align-items-center gap-16">
                <div class="d-flex align-items-center gap-8">
                  <button mat-mini-fab class="bg-primary text-white icon-30" aria-label="Like" #tooltip="matTooltip"
                    matTooltip="Like">
                    <i-tabler class="icon-18 d-block" name="thumb-up"></i-tabler>
                  </button>
                  <span class="f-s-14 f-w-600">{{ comment.data.likes.value }}</span>
                </div>

                <div class="d-flex align-items-center gap-8">
                  <!-- Comment Replies -->
                  <button mat-mini-fab class="bg-secondary text-white icon-30" aria-label="Reply" #tooltip="matTooltip"
                    matTooltip="Reply">
                    <i-tabler class="icon-18 d-block" name="arrow-back-up"></i-tabler>
                  </button>
                  <span class="f-s-14 f-w-600">{{ comment.data.replies.length }}</span>
                </div>
              </div>
            </mat-card-content>

          </mat-card>
          <!-- Replies Section -->
          @for (reply of comment.data.replies; track reply.id) {
          <mat-card class="cardWithShadow shadow-none b-1 m-t-24 m-l-30">
            <mat-card-content>
              <div class="d-flex align-items-center gap-8">
                <img [src]="reply.profile.avatar" alt="user" width="40" class="rounded-circle" />
                <span class="f-s-16 f-w-500 m-l-4">{{ reply.profile.name }}</span>
                <span class="f-s-12 d-flex align-items-center gap-4 lh-sm">
                  <i-tabler class="op-5 d-flex icon-6" name="circle-filled"></i-tabler>
                  {{ reply.profile.time }}
                </span>
              </div>

              <p class="f-s-14 m-t-16">{{ reply.data.comment }}</p>

              <!-- Reply Likes -->
              <div class="d-flex align-items-center gap-8">
                <button mat-mini-fab class="bg-primary text-white icon-30" aria-label="Like" #tooltip="matTooltip"
                  matTooltip="Like">
                  <i-tabler class="icon-18 d-block" name="thumb-up"></i-tabler>
                </button>
                <span class="f-s-14 f-w-600">{{ reply.data.likes.value }}</span>
              </div>
            </mat-card-content>
          </mat-card>
          }
          }


        </mat-card-content>
        <!-- Comment Input Box -->
        <div class="b-t-1">
          <div class="d-flex align-items-center p-16 gap-16">
            <img [src]="post.profile.avatar" alt="user" width="33" class="rounded-circle" />
            <mat-form-field appearance="outline" class="w-100 hide-hint search-bar-style">
              <input matInput placeholder="Comment" />
            </mat-form-field>
            <button mat-flat-button class="ms-auto">Comment</button>
          </div>
        </div>

      </mat-card>
      }
    </div>
  </div>
</div>