<!DOCTYPE html>
<html>
  <body>
    <div id="page-container">
      <div id="content-wrap">
        <!-- Navbar Component -->
        <app-navbarlogout></app-navbarlogout>
        
        <div class="container">
          <!-- User's information -->
          <div *ngIf="userDetails && userDetails.accountType == 'developer'" id="profile-body">
            <button class="searchbutton submit" (click)="profile()">Profile</button>
            <button class="searchbutton submit" (click)="developerStats()">Developer Stats</button>
          
            <h2>
              Article Information
            </h2>

            <br />
            <button class="exportbutton" (click)="onExport()">Export Table as CSV</button>

            <div *ngIf="filtersLoaded | async">
                <table class="table-container">
                    <thead>
                      <tr>
                          <th>Article Title</th>
                          <th>Query Name</th>
                          <th>Relevance Count</th>
                          <th>Article Clicks</th>
                      </tr>  
                    </thead>
                    <tbody *ngFor="let articleProperties of articleProperties | paginate: {itemsPerPage: 7, currentPage: currPage }">
                        <tr>
                          <td><a target="_blank" rel="noopener noreferrer" href="/article?article_id={{ articleProperties.article_id }}" 
                            style="display:block;">{{ articleProperties.article_title }}</a></td>
                          <td><a target="_blank" rel="noopener noreferrer" href="/displayresults?search={{ articleProperties.search_query }}&page=1" 
                            style="display:block;">{{ articleProperties.search_query }}</a></td>
                          <td>{{ articleProperties.global_rating }}</td>
                          <td>{{ articleProperties.article_clicks }} </td>
                        </tr>
                    </tbody>
                </table>
                <pagination-controls class="my-pagination" (pageChange)="currPage = $event"></pagination-controls>
              </div>
          </div>
        
          <div *ngIf="userDetails.accountType == 'user'" id="error-404">

            <br />
            <br />
            <br />
            <h2>
                Article Ratings
            </h2>
            <br />
            <b>404:</b> This is not the webpage you were looking for
          </div>
        </div>
  
      </div>
      <div id="page-footer">            
        <!-- Footer Component -->
        <app-footerfixed></app-footerfixed>
      </div>
    </div>
  </body>
</html>  

  