{{block style}}
<link rel="stylesheet" href="/static/global/style.css">


<style media="screen">
.otree-btn-next {
  display: none;
}

.centering {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin-top: 100px;
}

</style>
{{endblock}}

{{ block title }}
 <!-- Select title based on choice type -->
{{ if choice_type == "movies" }}
  If you had to watch one of these movies, which would you choose?
{{ elif choice_type == "cars" }}
  If you had to drive one of these cars, which would you choose?
{{ elif choice_type == "charities" }}
  If you had to donate to one of these charities, which would you choose?
{{ elif choice_type == "dining" }}
  If you had to have a meal from one of these establishments, which would you choose?
{{ elif choice_type == "dinners" }}
  If you had one of these for dinner tonight, which would you choose?
{{ elif choice_type == "fruits" }}
  If you had to eat one of these fruits, which would you choose?
{{ elif choice_type == "holidays" }}
  If you had to go on a holiday to one of these two places, which would you choose?
{{ elif choice_type == "magazines" }}
  If you had to read one of these magazines, which would you choose?
{{ endif }}
{{ endblock }}

{{ block content }}
    
{{ endblock }}
{{ block content }}

<div class="flex-container">
<div class="row">
  <div class="flex-child boxed magenta">
    <div class="square">
      <img src="/static/binarychoice/{{choice_type}}_img/{{leftImg}}"/>
    </div>

    <!-- <button id="left-button" class="center btn btn-outline-dark" name="choice" value="{{left}}">{{left}} </button> -->
    <input type="radio" id="left" class="center btn btn-outline-dark" name="choice" value="{{left}}">
    <label onclick="myFunction()" class="center btn btn-outline-dark" for="left">{{left}}</label>
  </div>

  <div class="flex-child boxed green">
    <div class="square">
      <img src="/static/binarychoice/{{choice_type}}_img/{{rightImg}}"/>
    </div>
    <!-- <button id="right-button" class="center btn btn-outline-dark" name="choice" value="{{right}}">{{right}}</button> -->
    <input type="radio" id="right" class="center btn btn-outline-dark" name="choice" value="{{right}}">
    <label onclick="myFunction()" class="center btn btn-outline-dark" for="right">{{right}}</label>
  </div>
</div>
</div>

{{ formfield_errors "choice" }}
</div>

<div class="centering">
  {{ next_button }}
</div>

<script type="text/javascript">
//   $(document).keyup((evt) => {
//   if (evt.key === 'ArrowLeft')
//     document.getElementById('left-button').click();
//   if (evt.key === 'ArrowRight')
//     document.getElementById('right-button').click();
// });

function myFunction() {
  console.log("clicked");
  var x = document.getElementsByClassName('otree-btn-next')[0];
  // display 
  x.style.display = "block";
  x.scrollIntoView(false);
}


</script>


{{ endblock }}