<%# Reference subpage for tags %>
<%# ARGUMENTS: tags - the taglist from backend %>

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

<h1 class="my-5 container">The Grand Taglist</strong></h1>

<div class="container jumbotron mt-5">
  <h3>What are tags?</h3>
  <p>Mutorials uses tags to classify questions into further subtopics. A full list of tags can be found on this page. Units and their codes are found below as well, highlighted in blue.</p>
</div>

<% Object.keys(tags).forEach((subject) => { %>

<div class="container jumbotron mt-5">
  <h2 class="text-center mt-4 mb-3"><%= subject %> Tags</h2>
  <table class="text-center table">
    <thead>
      <tr class="d-flex">
        <th class="col-4">
          <h4>Tag Name</h4>
        </th>
        <th class="col-8">
          <h4>Tag Description</h4>
        </th>
      </tr>
    </thead>

    <tbody>
      <% Object.keys(tags[subject]["Units"]).forEach((unitTag) => { %>
      <tr class="d-flex">
        <td class="col-4">
          <h5><span class="badge bg-primary"><%= unitTag %></span></h5>
        </td>
        <td class="col-8"><%= tags[subject]["Units"][unitTag] %></td>
      </tr>
      <% }); %>

      <% Object.keys(tags[subject]["Concepts"]).forEach((conceptTag) => { %>
      <tr class="d-flex">
        <td class="col-4">
          <h5><span class="badge bg-secondary"><%= conceptTag %></span></h5>
        </td>
        <td class="col-8"><%= tags[subject]["Concepts"][conceptTag] %></td>
      </tr>
      <% }); %>
    </tbody>
  </table>
</div>
<% }) %>

<div class="container">
  <a class="mb-5 btn btn-secondary" href="/references">Return to references page</a>
</div>

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