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

    <header>
        <h2 class="h2 article-title">Projects</h2>
        <button class="edit-btn add-btn" (click)="openAddProject()" title="Add Project">
            <i class="fa-solid fa-plus"></i>
        </button>
    </header>

    <section class="projects">

        <ul class="filter-list">

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

            @for (category of projectsCategories; track category) {
            <li class="filter-item">
                <button (click)="filterProjects(category)"
                    [ngClass]="{active: filter === category}">{{category}}</button>
            </li>
            }

        </ul>

        <div class="filter-select-box" (click)="categoryClicked = !categoryClicked" tabindex="0"
            (keyup.enter)="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>

                @for (category of projectsCategories; track category) {
                <li class="select-item">
                    <button (click)="filterProjects(category)">{{category}}</button>
                </li>
                }

            </ul>
        </div>

        <ul class="project-list">

            @for (project of projects; track project) {
            <li class="project-item  active">
                <a>

                    <figure class="project-img">
                        <button class="project-item-icon-box" (click)="openViewProject(project)" (keyup.enter)="openViewProject(project)" title="View Project">
                            <i class="fa-regular fa-eye"></i>
                        </button>

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

                    <h3 class="project-title">{{project.name}}</h3>
                    <div class="project-category">
                        @for (responsibility of project.responsibilities; track responsibility; let i = $index) {
                        <span class="inline">{{i > 0 ? ', ' + responsibility : responsibility}}</span>
                        }
                    </div>
                </a>
                <button class="edit-btn project-edit-btn" (click)="openEditProject(project)" title="Edit Project">
                    <i class="fa-solid fa-pen-to-square"></i>
                </button>
                <button class="edit-btn project-delete-btn" (click)="deleteProject(project)" title="Delete Project">
                    <i class="fa-solid fa-trash"></i>
                </button>
            </li>
            }

        </ul>

    </section>

</article>