{{ block title }}{{ round_display }}{{ endblock }}

{{ block content }}

{{ if is_practice }}
<div class="alert alert-warning">
    <strong><i class="fas fa-graduation-cap"></i> PRACTICE ROUND</strong> - This round does not count toward payment
</div>
{{ endif }}



<div class="card mb-3">
    <div class="card-body">
        <h4>Your Tokens: <span class="text-primary">{{ endowment }}</span></h4>
        
        {{ if show_probability }}
        <div class="alert alert-info">
            <strong><i class="fas fa-info-circle"></i> Reminder:</strong> 
            {{ if framing == 'gain' }}
            The probability of <strong>snow</strong> is <strong>{{ probability_text }}</strong>
            {{ else }}
            The probability of <strong>no rain</strong> is <strong>{{ probability_text }}</strong>
            {{ endif }}
        </div>
        {{ endif }}
        
        {{ if show_signal }}
        <div class="alert alert-warning text-center">
            <h5 class="mb-0">
                <i class="fas fa-signal"></i> 
                <strong>FORECAST: {{ signal_text }}</strong>
            </h5>
        </div>
        {{ endif }}
        
        <div class="card bg-light">
            <div class="card-body">
                {{ if framing == 'gain' }}
                <h5>How many tokens would you like to <strong>spend</strong> on pre-emptively calling in snow plow contractors?</h5>
                <ul class="mb-0">
                    <li>If it <strong>snows</strong>: 
                        you get back <strong>double</strong> what your spent tokens.</li>
                    <li>If it does <strong>NOT snow</strong>: you lose what you spent.</li>
                    <li>Tokens not spent are added to your end of round score.</li>
                </ul>
                {{ else }}
                <h5>How much would you like to spend on rain preparation?</h5>
                <ul class="mb-0">
                    <li>If <strong>heavy rain occurs</strong>: you make back half of what you spent and lose any unspent tokens.</li>
                    <li>If <strong>NO heavy rain occurs</strong>: the total spent on preparation is lost (wasted).</li>                    
                </ul>
                {{ endif }}
            </div>
        </div>
        
        <div class="mt-4">
			 <input type="number" class="form-control" inputmode="numeric" id="id_choice" max="100" min="0" name="choice" required="" value="" style="width: 5em;">
	
			{{ if framing == 'gain' }}
            <div class="form-group">
                <label>Amount to spend (0-100 tokens):
                <input type="range" class="custom-range" name="choice" 
                       min="0" max="100" value="0" id="choiceSlider"
                       oninput="updateChoiceValue(this.value)">

            </div>
			
			{{ else }}
			<div class="form-group">
                <label>Amount to spend (0-200 tokens):
                <input type="range" class="custom-range" name="choice" 
                       min="0" max="200" value="0" id="choiceSlider"
                       oninput="updateChoiceValue(this.value)">

            </div>
			
			{{ endif }}
			
        </div>
		<br>
        
        {{ next_button }}
    </div>
</div>



<script>
function updateChoiceValue(val) {
    // Also update the hidden form field if using slider
    document.getElementsByName('choice')[0].value = val;
}
</script>

{{ endblock }}