<article class="projects" data-page="projects">

    <header>
      <h2 class="h2 article-title">Projects</h2>
    </header>

    <section class="projects">

      <ul class="filter-list">

        <li class="filter-item">
          <button [ngClass]="{active: filter === 'All'}" (click)="filterProjects('All')">All</button>
        </li>

        <li class="filter-item" *ngFor="let category of model.projectsCategories">
          <button (click)="filterProjects(category)" [ngClass]="{active: filter === category}" (click)="filter = category">{{category}}</button>
        </li>

      </ul>

      <div class="filter-select-box" (click)="categoryClicked = !categoryClicked">

        <button class="filter-select" [ngClass]="{active: categoryClicked}" >

          <div class="select-value">{{filter}}</div>

          <div class="select-icon">
            <i class="fa-regular fa-chevron-down"></i>
          </div>

        </button>

        <ul class="select-list">

          <li class="select-item">
            <button (click)="filterProjects('All')">All</button>
          </li>

          <li class="select-item" *ngFor="let category of model.projectsCategories">
            <button (click)="filterProjects(category)">{{category}}</button>
          </li>

        </ul>
      </div>

      <ul class="project-list">

        <li class="project-item  active" *ngFor="let project of projects">
          <a>

            <figure class="project-img">
              <!-- <div class="project-item-icon-box">
                <ion-icon name="eye-outline"></ion-icon>
              </div> -->

              <img src="{{imagesOrigin + project.imagePath}}" loading="lazy">
            </figure>

            <h3 class="project-title">{{project.name}}</h3>
            <div class="project-category">
              <span  *ngFor="let responsbility of project.responsibilities; index as i" class="inline">{{i > 0 ? ', ' + responsbility : responsbility}}</span>
            </div>
          </a>
        </li>

      </ul>

    </section>

  </article>