{% extends 'base.html' %}
{% block head %}
<title>Get Swole</title>
{% endblock %}

{% block body %}
  <div class="my-3 p-3 bg-body border">
  <h3>Strength Calculator</h3>
  <br>
  
  <form method="POST" class="form-check">

      {# Gender #}
      <div class="mb-3">
        <input type="radio" class="btn-check btn-lg col-3" name="gender" id="male" value="Male" autocomplete="off" required>
      <label class="btn btn-outline-secondary btn-lg col-3" for="male">Male</label>
      <input type="radio" class="btn-check btn-lg col-3" name="gender" id="female" value="Female" autocomplete="off">
        <label class="btn btn-outline-secondary btn-lg col-3" for="female">Female</label>
      </div>

      {# Body Weight #}
      <div class="form-floating mb-3">
        <input type="number" class="form-control" id="body_weight" placeholder="Body Weight (kg)" name="body_weight" min="0" required>
        <label for="body_weight">Body Weight (kg)</label>
      </div>

      {# Exercise #}
      <div class="form-floating mb-3">
        <select class="form-select" id="exercise" aria-label="exercise" required>
          <option selected></option>
          {% for exercise in exercises %}
            <option value="{{ exercise }}">{{ exercise }}</option>
          {% endfor %}
        </select>
        <label for="exercise">Exercise</label>
      </div>

      {# Lifted Weight #}
      <div class="form-floating mb-3">
        <input type="number" class="form-control" id="lifted_weight" placeholder="Lifted Weight (kg)" name="lifted_weight" min="0" data-bs-toggle="tooltip" title="For dumbbell exercises, enter per-weight kg, not total." required>
        <label for="lifted_weight">Lifted Weight (kg)</label>
      </div>
      
      {# Repetitions #}
      <div class="form-floating mb-3">
        <input type="number" class="form-control" id="repetitions" placeholder="Repetitions" name="repetitions" min="0" required>
        <label for="repetitions">Repetitions</label>
      </div>

      {# Submit #}
      <input type="submit" value="Calculate" id="button" class="btn btn-secondary">

  </form>
</div>

<div class="my-3 p-3 bg-body border">
  <dl class="row">
    <dt class="col-sm-3">One Rep Max (kg)</dt>
    <dd class="col-sm-9"><span id=one_rep_max>.</span></dd>

    <dt class="col-sm-3">Ratio</dt>
    <dd class="col-sm-9"><span id=your_ratio>.</span></dd>

    <dt class="col-sm-3">Strength Level</dt>
    <dd class="col-sm-9"><span id=level>.</span></dd>
  </dl>
</div>


{# 1RM calculator #}
<script>
    $(document).ready(function() {
      $('#button').bind('click', function() {
        $.getJSON($SCRIPT_ROOT + '/calculate', {
          gender: $('input[name="gender"]:checked').val(),
          body_weight: $('input[name="body_weight"]').val(),
          exercise: $('select#exercise option:selected').val(),
          lifted_weight: $('input[name="lifted_weight"]').val(),
          repetitions: $('input[name="repetitions"]').val()
        }, function(data) {
          $("#one_rep_max").text(data[0]);
          $("#your_ratio").text(data[1]);
          $("#level").text(data[2]); 
          $("#ratios").text(data[4]);
        });
        return false;
      });
    });
</script>

<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>


{% endblock %}