<%# Admin page for listing questions that need review%> 
<%# ARGUMENTS:
    questions - array containing questions
%>


<%- include("../../partials/header") -%>
<%- include("../partials/usaboNav") -%>
<% let pendingCount = 0 %>
<% for (let question of questions) { %>
    <% pendingCount++; %>
<% } %>

<style>
    .grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
        box-sizing: border-box;
    }
</style>

<h1 class="my-5 container">ADMIN PAGE: USABO Question Review Homepage</h1>
<div class="jumbotron container">
    <h3 class="mb-4"><%= `There are ${pendingCount} questions left to review.` %></h3>
</div>

<div class="jumbotron container">
    <h3 class="mb-4">Pending Questions:</h3>
    <div class="grid">
        <% for (let question of questions) { %>
            <% if (!question.reviewers.includes(logUser.contributor)) { %>
            <div class="card g-col-4 p-3 m-0 bg-light">
                <h4>
                    <a class="text-decoration-none" href="/reviewer/reviewUSABOQuestion?id=<%= question['_id'] %>">
                    <%= question['round'] %> (<%= question['rating'] %> rated)
                    </a>
                </h4>
                <span class="mb-2">ID: <code><%= question['_id']%></code></span>
                <div class="mb-2">
                    <% for (let category of question['categories']) { %>
                        <div class="badge bg-primary"><%= category %></div>
                    <% } %>
                </div>
                    
                <!-- Question content -->
                <div>
                    <span><%= question['question'] %></span>
                </div>
            </div>
            <% } %>
        <% } %>
    </div>
</div>

<%- include("../../partials/footer") -%>