{% extends "global/Page.html" %}
{% block content %}

<h3>Choose a Charity</h3>
<p>Please select one of the following charities. For your randomly selected decision,
you will receive your chosen amount, and the amount allocated to “charity” will be donated to the organization you choose here.</p>

<style>
  .charity-option {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    transition: background-color 0.2s;
  }
  .charity-option:hover {
    background-color: #f9f9f9;
  }
  .charity-name {
    font-weight: bold;
    font-size: 1.05rem;
  }
  .charity-desc {
    font-size: 0.95rem;
    color: #555;
    margin-top: 4px;
  }
</style>

<div class="charity-option">
  <label>
    <input type="radio" name="chosen_charity" value="American Red Cross" required>
    <span class="charity-name">American Red Cross</span>
    <div class="charity-desc">Provides disaster relief, emergency assistance, and blood donations across the U.S. and worldwide.</div>
  </label>
</div>

<div class="charity-option">
  <label>
    <input type="radio" name="chosen_charity" value="Doctors Without Borders" required>
    <span class="charity-name">Doctors Without Borders </span>
    <div class="charity-desc">Delivers independent medical aid in crisis zones and underserved areas globally.</div>
  </label>
</div>

<div class="charity-option">
  <label>
    <input type="radio" name="chosen_charity" value="World Wildlife Fund" required>
    <span class="charity-name">World Wildlife Fund (WWF)</span>
    <div class="charity-desc">Works to conserve nature, protect endangered species, and address global environmental challenges.</div>
  </label>
</div>

{% next_button %}

{% endblock %}