{% extends "global/Page.html" %}
{% block title %}
Make Your Choice
{% endblock %}

{% block content %}
<style>
  .choice-container {
    display: flex;
    justify-content: center; /* Center the buttons */
    margin-top: 20px;
    gap: 10px; /* Adds space between the buttons */
  }

  .choice-box {
    border: 2px solid black;
    padding: 40px; /* Increased padding for a bigger box */
    width: 250px; /* Increased width */
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    justify-content: center; /* Center items vertically */
  }

  .choice-box:hover {
    background-color: #e0f7fa;
  }

  .choice-box label {
    font-size: 24px; /* Larger font size for A and B */
    font-weight: bold;
    margin-bottom: 15px; /* Space between the letter and the description */
  }

  .selected {
    background-color: #b2ebf2;
  }

  /* Hide the actual radio buttons */
  input[type="radio"] {
    display: none;
  }
</style>

<h1>Please make your choice</h1>
<form method="post">
  <div class="choice-container">
    <label class="choice-box" for="choiceA">
      <input type="radio" id="choiceA" name="choice_val" value="{{ risk_choice }}" required>
      <div class="label">A</div>
      <div>Random number from distribution</div>
    </label>
    <label class="choice-box" for="choiceB">
      <input type="radio" id="choiceB" name="choice_val" value="{{ safe_choice }}" required>
      <div class="label">B</div>
      <div>40 points for sure</div>
    </label>
  </div>
  <button type="submit">Continue</button>
</form>

<script>
  // This script will add the 'selected' class to the choice box when clicked
  document.querySelectorAll('.choice-box').forEach(box => {
    box.addEventListener('click', function() {
      document.querySelectorAll('.choice-box').forEach(b => b.classList.remove('selected'));
      this.classList.add('selected');
    });
  });
</script>

{% endblock %}