<%# Template for the experience bar, for any user %>

<% try { %>

<% let experience = experienceStats; %>

<script>
  $(document).ready(function() {

    $("#experience-indicator").fadeTo(0, 0.7);
    $("#experience-bar").on({
      mouseenter: function() {
        $("#experience-indicator").fadeTo(200, 1);
      },
      mouseleave: function() {
        $("#experience-indicator").fadeTo(200, 0.7);
      }
    });
  });
</script>

<div class="progress" style="height: 20px;" id="experience-bar">
  <div id="experience-indicator" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: <%= Math.round(100*experience.remainder/experience.totalToNext) %>%"></div>
</div>
<p id="experience-stats" class="text-center"><strong>Level <%= experience.level %></strong> (<%= experience.remainder %>/<%= experience.totalToNext %> XP to Level <%= experience.level+1 %>)</p>

<% } catch(err) { %>
<p class="text-center">
  <font color="red">[Site component can not be displayed due to an internal error]</font>
</p>
<% } %>
