<%# Page for setting initial rating %>
<%# ARGUMENTS: subject - name of subject to train in %>

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

<script>
  $(document).ready(function() {
    $('.thumbnail').fadeTo(0, 0.8);
    $('.thumbnail').on({
      mouseenter: function() {
        $(this).fadeTo(200, 1);
      },
      mouseleave: function() {
        $(this).fadeTo(200, 0.8);
      },
    });

    $('#Beginner-Card').hide(0);
    $('#Intermediate-Card').hide(0);
    $('#Advanced-Card').hide(0);
    $('#Beginner').mouseenter(function() {
      $('#default-card').hide(0);
      $('#Beginner-Card').show(0);
      $('#Intermediate-Card').hide(0);
      $('#Advanced-Card').hide(0);
    });
    $('#Intermediate').mouseenter(function() {
      $('#default-card').hide(0);
      $('#Beginner-Card').hide(0);
      $('#Intermediate-Card').show(0);
      $('#Advanced-Card').hide(0);
    });
    $('#Advanced').mouseenter(function() {
      $('#default-card').hide(0);
      $('#Beginner-Card').hide(0);
      $('#Intermediate-Card').hide(0);
      $('#Advanced-Card').show(0);
    });
  });
</script>

<h1 class="my-5 container text-center display-2">Proficiency in <%= subject %></h1>

<div class="jumbotron container">
  <%- include("../../partials/flashes") -%>

  <div class="row">
    <div class="col-4">
      <form action="/private/initialRating" method="POST">
        <input type="image" class="thumbnail rounded" alt="Beginner" src="https://cdn.mutorials.org/images/icons/Prof_Beg.svg" id="Beginner">
        <input type="hidden" name="subject" value="<%=subject%>">
        <input type="hidden" name="level" value="600">
      </form>
    </div>
    <div class="col-4">
      <form action="/private/initialRating" method="POST">
        <input type="image" class="thumbnail rounded" alt="Intermediate" src="https://cdn.mutorials.org/images/icons/Prof_Int.svg" id="Intermediate">
        <input type="hidden" name="subject" value="<%=subject%>">
        <input type="hidden" name="level" value="1200">
      </form>
    </div>
    <div class="col-4">
      <form action="/private/initialRating" method="POST">
        <input type="image" class="thumbnail rounded" alt="Advanced" src="https://cdn.mutorials.org/images/icons/Prof_Adv.svg" id="Advanced">
        <input type="hidden" name="subject" value="<%=subject%>">
        <input type="hidden" name="level" value="2400">
      </form>
    </div>
  </div>

  <div class="card text-center border-primary mt-4" id="description-card">
    <div class="card-body" id="default-card">
      <h5 class="card-title">Proficiency</h5>
      <p class="card-text">Select your current skill level at <%=subject%> to set your initial rating</p>
    </div>

    <div class="card-body" id="Beginner-Card">
      <h5 class="card-title">Beginner</h5>
      <p class="card-text">Corresponding to starters, or those who take courses on a middle school level. Questions here are mostly conceptual or with simple conceptual applicational calculations.</p>
    </div>

    <div class="card-body" id="Intermediate-Card">
      <h5 class="card-title">Intermediate</h5>
      <p class="card-text">Equivalent to students enrolled in an AP or IB level course.</p>
    </div>

    <div class="card-body" id="Advanced-Card">
      <h5 class="card-title">Advanced</h5>
      <p class="card-text">Suitable for students craving for olympiad content-get ready to use your brain!</p>
    </div>
  </div>
</div>

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