<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Page</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="/css/index.css"> 
    <link rel="stylesheet" href="/css/main.css"> 


</head>

<body>
    <header>
        <div class="logo-con">
            <a href="/">
                <p>
                    <span class="p">P</span>
                    <span class="p-all">ool Quiz</span>
                </p>
               </a>
        </div>
        <div class="nav-links-con">
            <ul class="links">
                <li class="link"> <a href="/browse">Browse </a></li>
                <li class="link"> <a href="/add-question">Create Question </a></li>
                <li class="link"> <a href="/api-setting">API </a></li>


    
            </ul>
        </div>
    </header>

<main>
    <h2><%= username %>'s Profile</h2>

    <table class="table table-dark table-striped">
        <thead>
            <tr>
              <th scope="col">Verified Questions</th>
              <th scope="col">Unverified Questions</th>
              <th scope="col">User Rank</th>
              <th scope="col">Question Limit</th>
              <th scope="col">Join Date</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row"><%= userVerifiedTotal%></th>
              <td><%= userUnverifiedTotal %></td>
              <td><%= role %> USER</td>
              <td><%= quizleft %> Left</td>
              <td>Friday, January 19th, 2024</td>
            </tr>
          </tbody>
    </table>

    <h3>Verified Questions</h3>
    <table class="table table-dark table-striped">
        <thead>
            <tr>
              <th scope="col">ID</th>
              <th scope="col">Category</th>
              <th scope="col">Type</th>
              <th scope="col">Difficulty</th>
              <th scope="col">Question</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">10101</th>
              <td>General Knowledge</td>
              <td>Multiple Choice</td>
              <td>Easy</td>
              <td>Who is known as the father of computer?</td>
            </tr>
          </tbody>
    </table>


    <h3>Unverified Questions</h3>
    <table class="table table-dark table-striped">
        <thead>
            <tr>
              <th scope="col">ID</th>
              <th scope="col">Category</th>
              <th scope="col">Type</th>
              <th scope="col">Difficulty</th>
              <th scope="col">Question</th>
              <th scope="col">Edit/Delete</th>
            </tr>
          </thead>
          <tbody>

            <% userUnverifiedQuestions.forEach(function(question) { %>
              <tr>
                <th scope="row"><%= String(question._id).slice(0, 8) %>...</th>
                <td>General Knowledge</td>
                <td>Multiple Choice</td>
                <td><%= question.difficulty %></td>
                <td><%= question.question %></td>
                <td>
                  <a href="/edit-question/<%=String(question._id)%>/<%=question.type%>">
                    <button type="button" class="btn btn-primary btn-sm">Edit</button>
                  </a>
                  <button type="button" class="btn btn-danger btn-sm">Delete</button>
                </td>
              </tr>
            <% }) %>
 


          </tbody>
    </table>


</main>