{{ block title }} round {{ player.round_number }} {{ endblock }}
{{ block content }}
    {{ if treatment == 1 }}
    <div class="content">
        <p>あなたが選択したカードは <span class="bold">{{ yours }}</span> でした</p>
        <p>また、あなたが選択しなかったカードは <span class="bold">{{ other }}</span> でした</p>
    </div>
    {{ else }}
    <div class="content">
        <p>あなたが選択したカードは <span class="bold">{{ yours }}</span> でした</p>
    </div>
    {{ endif }}
    <div class="content">
        <p>よってあなたは <span class="bold">{{ points }}</span> 円獲得しました</p>
    </div>

    <div class="space" style="margin: 150px"></div>

    <div class="content">
        {{ if yours == 3 or yours == 4 }}
            <p>次にあなたは{{ product }}ことになりました。</p>
        {{ else }}
            <p>次にあなたはスーパーで{{ product }}を購入することになりました。</p>
        {{ endif }}
        <p>予想価格を入力してください</p>
        <input
            type="range"
            id="range"
            name="ask_price"
            min="1000"
            max="{{ points }}"
            step="500"
            value="{{ points }}"
        />
        <span id="value">{{ points }}</span>
    </div>
    <div class="space" style="margin: 50px"></div>
    {{ next_button }} 
    <style>
        .bold {
            font-weight: bold;
            font-size: larger;
            color: crimson;
        }
    </style>
    <script>
        var elem = document.getElementById("range");
        var target = document.getElementById("value");
        var rangeValue = function (elem, target) {
            return function (evt) {
                target.innerHTML = elem.value;
            };
        };
        elem.addEventListener("input", rangeValue(elem, target));
    </script>
{{ endblock }}