<!DOCTYPE html>
<html>
  <body>
    <div id="page-container">
      <!-- Navbar Component -->
      <app-navbarlogout></app-navbarlogout>
      <div id="content-wrap">
        <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>
              {{ userDetails.fullName.split(" ")[0] }}
              {{ userDetails.fullName.split(" ")[1] }}'s Query History
            </h2>
            <br />
            <button class="exportbutton" (click)="onExport()">Export Table as CSV</button>
            
            <div *ngIf="filtersLoaded | async">
              <table class="table-container">
                <thead>
                  <tr>
                      <th>Query</th>
                      <th>Time</th>
                      <th>Article Clicks</th>
                      <th>Articles Marked as Relevant </th>
                  </tr>  
                </thead>
        
                <tbody *ngFor="let query of querySearches | paginate: {itemsPerPage: 7, 
                  currentPage: query, totalItems: totalItems};
                  let i = index
                ">
                    <tr>
                      <td><a target="_blank" rel="noopener noreferrer" href="/displayresults?search={{ query.queryName }}&page=1"
                        style="display:block;"> {{ query.queryName }}</a>
                      </td>
                      <td>{{ query.time}}</td>
                      
                      <td>  {{query.article_clicks}} </td>

                      <td>{{ query.feedback_interactions}}</td>
                    </tr>
                </tbody>
              </table>
              <pagination-controls class="my-pagination" 
                        (pageChange)="p = $event" 
                        (click)="goToPage(p)"> 
              </pagination-controls>
            </div>

            <div *ngIf="userDetails.accountType == 'user'" id="error-404">
                <br />
                <br />
                <br />
                <h2>
                    Query History
                </h2>
                <br />
                <b>404:</b> This is not the webpage you were looking for
            </div>  
            
          </div>
        </div>
      </div>
      <div id="page-footer">
        <!-- Footer Component -->
        <app-footerfixed></app-footerfixed>
      </div>
    </div>
  </body>
</html>

  

