<%# Template for a bar with stats about the website %>

<%# NOTE: HAS TO BE USED IN CONJUNCTION WITH AOS INIT %>

<% try { %>
<% let stats = siteStats; %>

<div class="row justify-content-center">
  <% /* %>
  <div class="col-6 col-lg-3" data-aos="flip-right" data-aos-duration="500">
    <h1 class="text-center display-3"><span class="badge rounded-pill bg-primary"><%= stats.userCount %></span></h1>
    <h5 class="text-center">Users Registered</h5>
  </div>
  <% */ %>
  <div class="col-6 col-lg-3" data-aos="flip-right" data-aos-duration="500" data-aos-delay="100">
    <h1 class="text-center display-3"><span class="badge rounded-pill bg-primary"><%= stats.questionCount %></span></h1>
    <h5 class="text-center">Questions in Database</h5>
  </div>
  <div class="col-6 col-lg-3" data-aos="flip-right" data-aos-duration="500" data-aos-delay="200">
    <h1 class="text-center display-3"><span class="badge rounded-pill bg-primary"><%= stats.tagCount %></span></h1>
    <h5 class="text-center">Question Tags</h5>
  </div>
  <div class="col-6 col-lg-3" data-aos="flip-right" data-aos-duration="500" data-aos-delay="300">
    <h1 class="text-center display-3"><span class="badge rounded-pill bg-primary"><%= stats.totalSolves.physics + stats.totalSolves.chemistry + stats.totalSolves.biology %></span></h1>
    <h5 class="text-center">Total Solves</h5>
  </div>
</div>
<% } catch(err) { %>
<p class="text-center">
  <font color="red">[Site component can not be displayed due to an internal error]</font>
</p>
<% } %>
