{% extends "global/Page.html" %}
{% load otree %}

{% block title %}

{% endblock %}

{% block styles %}
<style>
.otree-btn-next {
    float: right;
}
.form-check-input {
    position: relative;
    vertical-align: top;
    margin-left: auto;
    margin-right: auto
}
.col-form-label {
    font-weight:bold;
}
p{
    text-align: justify;
    text-justify: inter-word;
}
.info {
    padding: 15px 15px 0px 15px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
</style>
{% endblock %}

{% block content %}

<div class="card info" id="fav_club">
    <p> <strong> Which of the following Premier League club(s) below do you consider yourself a supporter of?
      Choose all that apply or choose "none" if you are not a fan of any of the listed clubs. </strong> </p>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="True" name="fav_club_none" id="fav_club_none">
  <label class="form-check-label">
    None
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="True" name="fav_club_mufc" id="fav_club_mufc">
  <label class="form-check-label">
    {{ home_team1 }}
  </label>
</div>
  <div class="form-check">
  <input class="form-check-input" type="checkbox" value="True" name="fav_club_lpool" id="fav_club_lpool">
  <label class="form-check-label">
    {{ away_team1 }}
  </label>
</div>
  <div class="form-check">
  <input class="form-check-input" type="checkbox" value="True" name="fav_club_nufc" id="fav_club_nufc">
  <label class="form-check-label">
    {{ home_team2 }}
  </label>
</div>
  <div class="form-check">
  <input class="form-check-input" type="checkbox" value="True" name="fav_club_ars" id="fav_club_ars">
  <label class="form-check-label">
    {{ away_team2 }}
  </label>
</div>
  <div class="form-check">
  <input class="form-check-input" type="checkbox" value="True" name="fav_club_sfc" id="fav_club_sfc">
  <label class="form-check-label">
    {{ home_team3 }}
  </label>
</div>
  <div class="form-check">
  <input class="form-check-input" type="checkbox" value="True" name="fav_club_lei" id="fav_club_lei">
  <label class="form-check-label">
    {{ away_team3 }}
  </label>
</div>
  <div class="form-check">
  <input class="form-check-input" type="checkbox" value="True" name="fav_club_efc" id="fav_club_efc">
  <label class="form-check-label">
    {{ home_team4 }}
  </label>
</div>
  <div class="form-check">
  <input class="form-check-input" type="checkbox" value="True" name="fav_club_avfc" id="fav_club_avfc">
  <label class="form-check-label">
    {{ away_team4 }}
  </label>
</div>
    <div class="form-check">
  <input class="form-check-input" type="checkbox" value="True" name="fav_club_cpfc" id="fav_club_cpfc">
  <label class="form-check-label">
    Crystal Palace
  </label>
</div>
    <div class="form-check">
  <input class="form-check-input" type="checkbox" value="True" name="fav_club_cfc" id="fav_club_cfc">
  <label class="form-check-label">
    FC Chelsea
  </label>
</div>
    <div class="form-check">
  <input class="form-check-input" type="checkbox" value="True" name="fav_club_sufc" id="fav_club_sufc">
  <label class="form-check-label">
    Sheffield United
  </label>
</div>
    <div class="form-check">
  <input class="form-check-input" type="checkbox" value="True" name="fav_club_spurs" id="fav_club_spurs">
  <label class="form-check-label">
    Tottenham Hotspurs
  </label>
</div>
    <div class="form-check">
  <input class="form-check-input" type="checkbox" value="True" name="fav_club_whu" id="fav_club_whu">
  <label class="form-check-label">
    West Ham United
  </label>
</div>
  <br><br>
</div>

<br><br>

<div style="display:inline-block; margin:0; float: left;">  </div> <button onclick="endPage()" class="otree-btn-next btn btn-primary"> Next </button>
<br><br>
<input type="hidden" name="FavClub_time" id="FavClub_time" step="0.000001">
{% endblock %}

{% block scripts %}
<script>
var startTime;
var phone_num_isin_r1 = {{ phone_num_isin_r1 }};

$(document).ready(function() {
    var x = document.getElementById("fav_club");
    startpage_time = Date.now();
    if (phone_num_isin_r1 == 1){
    x.style.display = "none";
    }
});

function endPage() {
    var endpage_time = Date.now();
    page_time = (endpage_time - startpage_time)/1000;
    document.getElementById('FavClub_time').value=page_time;

};
</script>
{% endblock %}