<div class="gallery-contents">
    <div class="gallery-header-content">
        <div class="d-flex align-items-center gap-3 flex-wrap">
          <div class="d-flex align-items-center gap-8">
            <div class="f-w-500 f-s-20">Friends</div>
      
            <div class="p-x-6 p-y-2 rounded-pill bg-secondary text-white">
              <div class="f-s-14 lh-sm" >{{ filteredCards.length }}</div>
            </div>
          </div>
            
      
            <!-- Search bar pushed to the right -->
            <div class="flex-grow-1 d-flex justify-content-end mt-3">
              <mat-form-field appearance="outline" class="w-30 search-bar-style">
                <mat-icon matPrefix>search</mat-icon>
                <input matInput placeholder="Search Gellary" 
                [(ngModel)]="searchText"
                (ngModelChange)="filterCards()"
               />
              </mat-form-field>
            </div>
          </div>
    </div>
    <div class="row">
        @for(productcard of filteredCards; track productcard.id) {
        <div class="col-sm-6 col-lg-3">
          <mat-card class="cardWithShadow productcard overflow-hidden">
            <a routerLink="/widgets/cards">
              <img src="{{ productcard.imgSrc }}" alt="imgSrc" class="w-100" mat-card-image />
            </a>
            <mat-card-content class="p-b-24 p-t-12 position-relative">
             
                <mat-card-title class="mat-headline-2 f-s-16 m-b-4">
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                      <!-- Left Side: Text Content -->
                      <div>
                        <div>{{ productcard.title }}</div>
                        <div class="f-s-12 f-w-400">{{ productcard.date }}</div>
                      </div>
                  
                      <!-- Right Side: Icon -->
                      <div>
                        <tabler-icon name="dots-vertical" style="height: 10px; width: 18px;"></tabler-icon>
                      </div>
                    </div>
                  </mat-card-title>
             
            </mat-card-content>
          </mat-card>
        </div>
        }
      </div>
</div>
