<div class="content">
  <h1 class="title">{{ 'ProjectList.Title' | translate }}</h1>
  <div class="search-controls">
    <form name="filters" (ngSubmit)="submitFilters()" class="search-form" autocomplete="off">
      <div class="search-controls-wrapper">
        <input [(ngModel)]="projectSearch" class="input search-input" type="text" name="searchInput"
               placeholder="{{ 'ProjectList.ProjectNamePlaceholder' | translate }}">
        <input class="main-btn search-submit" (click)="submitFilters()" type="button"
               value="{{ 'ProjectList.Search' | translate }}" name="searchSubmit">
      </div>
      <div class="filters-wrapper">
        <div class="filter-item">
          <p>
            <label class="control-label">{{ 'CreateProject.Country' | translate }}</label>
          </p>
          <app-autocomplete class="input-component" [isNeedToTranslate]="true"
                            [elementClass]="'wide-autocomplete'"
                            [placeholder]="'CreateProject.AllCountries' | translate"
                            (onSelect)="selectedCountry($event)"
                            [allItems]="countries">
          </app-autocomplete>
        </div>
        <div class="filter-item">
          <p>
            <label class="control-label">{{ 'CreateProject.Category' | translate }}</label>
          </p>
          <app-select class="input-component"
                      [elementId]="'category'" [items]="categories"
                      [placeholder]="'CreateProject.AllAreas' | translate">
          </app-select>
        </div>
        <div class="filter-item">
          <p>
            <label class="control-label" for="scoring-filter-from">{{ 'ProjectList.ScoringRating' | translate }}</label>
          </p>
          <input class="input scoring-input" type="number" min="0" max="100" name="scoringRatingFrom"
                 [class.ng-invalid]="scoringRatingFrom < 0 || scoringRatingFrom > 100 || scoringRatingFrom > scoringRatingTo"
                 (change)="checkScoring()"
                 [(ngModel)]="scoringRatingFrom" placeholder="0" id="scoring-filter-from">
          <span class="dash">–</span>
          <input class="input scoring-input" type="number" min="0" max="100" name="scoringRatingTo"
                 [class.ng-invalid]="scoringRatingTo < 0 || scoringRatingTo > 100 || scoringRatingFrom > scoringRatingTo"
                 (change)="checkScoring()"
                 [(ngModel)]="scoringRatingTo" placeholder="100" id="scoring-filter-to">
        </div>
      </div>
      <input [disabled]="!isFormValid" type="submit" class="ghost-btn apply-filters" value="{{ 'ProjectList.ApplyFilters' | translate }}">
      <input [disabled]="!isFormValid" type="submit" class="main-btn apply-filters-mobile" value="{{ 'ProjectList.ApplyFilters' | translate }}">
      <span (click)="clearFilters()" class="clear-form">{{ 'ProjectList.ClearFilters' | translate }}</span>
    </form>
    <div *ngIf="checkProjects">
      <div *ngIf="projects.length >0; else emptyResultBlock;">
        <p-table class="table" [value]="projects" class="projects-table">
          <ng-template pTemplate="header">
            <tr>
              <th class="table__name_col"><span class="sortable" [ngClass]="{
              'sortable__active' : isSortableField('Name'),
              'sortable__active_desc' : isSortableDirection(DESC),
              'sortable__active_asc' : isSortableDirection(ASC)
             }"
                        (click)="sortByName()">{{ 'ProjectList.Name' | translate }}</span></th>
              <th>{{ 'ProjectList.Country' | translate }}</th>
              <th>{{ 'ProjectList.ProjectCategory' | translate }}</th>
              <th><span class="sortable" [ngClass]="{
                'sortable__active' : isSortableField('ScoringEndDate'),
                'sortable__active_desc' : isSortableDirection(DESC),
                'sortable__active_asc' : isSortableDirection(ASC)
              }"
                        (click)="sortByDate()">{{ 'ProjectList.ScoringDate' | translate }}</span></th>
              <th><span class="sortable" [ngClass]="{
                'sortable__active' : isSortableField('ScoringRating') ,
                'sortable__active_desc' : isSortableDirection(DESC),
                'sortable__active_asc' : isSortableDirection(ASC)
              }" (click)="sortByRating()">{{ 'ProjectList.ScoringRating' | translate }}</span></th>
            </tr>
          </ng-template>
          <ng-template pTemplate="body" let-project>
            <tr (click)="navigateToProject(project.id)">
              <td class="project-name"><a matTooltip="{{project.name}}" [routerLink]="getProjectLink(project.id)"><span [innerHtml]="coloredText(project.name) | safeHtml"></span></a></td>
              <td>{{ 'Countries.' + project.country | translate }}</td>
              <td>{{ 'Categories.' + project.category | translate }}</td>
              <td *ngIf="project.scoringEndDate; else elseEndDate">{{ project.scoringEndDate | date:'yyyy-MM-dd' }}</td>
              <ng-template #elseEndDate>
                <td>&mdash;</td>
              </ng-template>
              <td *ngIf="project.score; else elseScore" class="scoring-col">
                <span class="primary-color-text">{{project.score | roundNumberPipe}}</span>
                <span [ngClass]="project.score === 100 ? 'primary-color-text' : 'gray-color-text'">/100</span></td>
              <ng-template #elseScore>
                <td class="gray-color-text scoring-col">&mdash;</td>
              </ng-template>
            </tr>
          </ng-template>
        </p-table>

        <p-table class="table" [value]="projects" class="projects-table-mobile">
          <ng-template pTemplate="header">
            <tr>
              <th class="table__main-col">{{ 'ProjectList.Title' | translate }}</th>
            </tr>
          </ng-template>
          <ng-template pTemplate="body" let-project>
            <tr (click)="navigateToProject(project.id)">
              <td class="mobile-row">
                <div class="col-info">
                  <div class="project-name"><a [routerLink]="getProjectLink(project.id)">{{project.name}}</a></div>
                  <div>
                  <span class="desc-label">
                    {{ 'ProjectList.Country'| translate }}:
                  </span>
                    {{ 'Countries.' + project.country | translate }}
                  </div>
                  <div>
                  <span class="desc-label">
                    {{ 'ProjectList.ProjectCategory'| translate }}:
                  </span>
                    {{ 'Categories.' + project.category | translate }}
                  </div>
                </div>
                <div class="col-details">
                  <div *ngIf="project.score; else elseScore" class="scoring-col">
                    <span class="primary-color-text">{{project.score | roundNumberPipe}}</span>
                    <span [ngClass]="project.score === 100 ? 'primary-color-text' : 'gray-color-text'">/100</span>
                  </div>
                  <ng-template #elseScore>
                    <div class="gray-color-text scoring-col">&mdash;</div>
                  </ng-template>
                  <button class="ghost-btn details-btn">{{ 'ProjectList.SeeDetails' | translate }}</button>
                </div>
              </td>
            </tr>
          </ng-template>
        </p-table>

        <p-paginator *ngIf="totalProjects > projectOnPageCount" [rows]="projectOnPageCount"
                     [totalRecords]="totalProjects"
                     (onPageChange)="changePage($event)"></p-paginator>
      </div>
      <ng-template #emptyResultBlock>
        <div class="empty-result">
          <div class="empty-result__title">{{ 'ProjectList.EmptyResultTitle' | translate }}</div>
        </div>
      </ng-template>
    </div>
  </div>
</div>
