<!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>
              Query Information
            </h2>
            <br />
            <button class="exportbutton" (click)="onExport()">Export Table as CSV</button>

            <div *ngIf="filtersLoaded | async">
              <table class="table-container">
                  <thead>
                    <tr>
                        <th>Query Name</th>
                        <th>Amount of Query Searches</th>
                        <th>Amount of Article Clicks</th>
                        <th>Amount of Relevant Articles</th>
                    </tr>  
                  </thead>
                  <tbody *ngFor="let globalProperty of globalProperties | paginate: {itemsPerPage: 7, currentPage: currPage }">
                      <tr>
                        <td><a target="_blank" rel="noopener noreferrer" href="/displayresults?search={{ globalProperty.search_query }}&page=1" 
                          style="display:block;">{{ globalProperty.search_query }}</a></td>
                        <td>{{ globalProperty.query_searches }}</td>
                        <td>{{ globalProperty.article_clicks }}</td>
                        <td>{{ globalProperty.feedback_interactions }} </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 Clicks
                </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>

