<div class="header">
  <h2>Zgłoszone pomysły</h2>
  <span class="fill-remaining-space"></span>
  <button type="submit" routerLinkActive="active" routerLink="/creation">{{addNew}}</button>
</div>

<div class='overview_list'>
  <mat-nav-list>
    <!-- TODO: zamiana linku w routerLink na ten do konkretnego pomyslu: stawiam na jakis idea/id (do dogadania) zalezne od id konkretnego z ideas-->
    <mat-list-item *ngFor="let idea of ideas" routerLinkActive="active" routerLink="/idea/{{idea.id}}">
        <h3 class='name' matLine>{{idea.name}}</h3>
        <table class='secondaryInfo'  matLine>
          <tr>
            <td colspan="2">{{added}}{{idea.additionDate | date : 'dd.MM.yy, HH:mm' }} </td>
          </tr>
          <tr>
            <td colspan="1">{{keywordsLab}}</td>
            <td *ngFor="let keyword of idea.keywords">{{keyword}}</td>
          </tr>
        </table>

        <div  class='secondaryInfo'>
          {{rate}}{{idea.meanRating == null ? 0 : idea.meanRating}}
        </div>
        <div>
          <app-rating-modal>[message]="idea.id"</app-rating-modal>
        </div>
        <mat-divider></mat-divider>
    </mat-list-item>
  </mat-nav-list>
</div>
<div>
  <table>
    <tr>
      <td><button type="submit" (click)="changeSorting('name')">{{sortByName}}</button></td>
      <td><button type="submit" (click)="changeSorting('additionDate')">{{sortByDate}}</button></td>
      <td class="to_right">

        <div *ngIf = "paging.pages && paging.pages.length" class="pagination">
          <a [ngClass] = "{disabled:paging.currentPage === 1,'dis':paging.currentPage === 1}" (click)="getIdeasPage(0,ideasPerPage,sortingSetup.sortDir, sortingSetup.sortBy)">{{firstPage}}</a>
          <a *ngFor="let page of paging.pages" [ngClass]="{active:paging.currentPage === page}" (click)="getIdeasPage(page-1,ideasPerPage,sortingSetup.sortDir, sortingSetup.sortBy)">{{page}}</a>
          <a [ngClass]="{disabled:paging.currentPage === paging.totalPages,'dis':paging.currentPage === paging.totalPages}" (click)="getIdeasPage(paging.totalPages-1,ideasPerPage,sortingSetup.sortDir, sortingSetup.sortBy)">{{lastPage}}</a>
        </div>
      </td>
    </tr>
  </table>
</div>