<%# Admin page for listing all questions %> 
<%# ARGUMENTS:
    questions - array containing questions
%>

<%- include("../../partials/header") -%>
<%- include("../../partials/navigationPrivate") -%>

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

<h1 class="my-5 container">ADMIN PAGE: All Questions</h1>

<div class="jumbotron container">
    <h3 class="mb-4">Questions By Subject:</h3>
    <a class="btn btn-primary btn-lg w-100 my-2" href="/admin/bioQuestions">Biology Questions</a>
    <a class="btn btn-primary btn-lg w-100 my-2" href="/admin/chemQuestions">Chemistry Questions</a>
    <a class="btn btn-primary btn-lg w-100 my-2" href="/admin/physicsQuestions">Physics Questions</a>
    <a class="btn btn-primary btn-lg w-100 my-2" href="/admin/usaboQuestions">USABO Questions</a>
</div>

<div class="jumbotron container">
    <div class="grid">
        <% for (let question of questions) { %>
        <div class="card g-col-4 p-3 m-0 bg-light">
            <h4>
                <a class="text-decoration-none" href="/admin/editQuestion?id=<%= question['_id'] %>">
                <%= question['subject'] %> (<%= question['rating'] %> rated)
                </a>
            </h4>
            <span class="mb-2">ID: <code><%= question['_id']%></code></span>
            <div class="mb-2">
                <% for (let tag of question['tags']) { %>
                    <div class="badge bg-secondary"><%= tag %></div>
                <% } %>
                <% for (let unit of question['units']) { %>
                    <div class="badge bg-primary"><%= unit %></div>
                <% } %>
            </div>

            <!-- Question content -->
            <div>
                <span><%= question['question'] %></span>
            </div>
        </div>
        <% } %>
    </div>
</div>

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