{{ block title }} round {{ player.round_number }} {{ endblock }}
{{ block content }}
    {{ formfield_errors 'utility' }}
    <div class="content">
        <p>実際は下記の値段で買うことになりました</p>
        <table class="table vertical" style="width: auto">
            <tr>
                <th>予想価格</th>
                <td>{{ ask_price }}円</td>
            </tr>
            <tr>
                <th>実際の価格</th>
                <td>{{ payment }}円</td>
            </tr>
            <tr>
                <th>差額</th>
                {{ if diff > 0 }}
                <td>{{ diff }}円損</td>
                {{ else }}
                <td>{{ diff_minus }}円得</td>
                {{ endif }}
            </tr>
        </table>

        <div class="half_space" style="margin: 50px"></div>

        {{ if diff > 0 }}
            <p>あなたの現在の不満度を10段階で表してください</p>
            <p>（不満度は 0 が最も低く -10 が最も高い度数であると捉えてください）</p>
            <input
                type="range"
                id="range"
                class="minus"
                min="0"
                max="10"
                step="1"
                value="5"
                onchange = submitValue;
            />
            <span id="value">-5</span>
            <input
                type="hidden"
                id="copy"
                name="utility"
                value="-5"
            />
        {{ else }}
            <p>あなたの現在の満足度を10段階で表してください</p>
            <input
                type="range"
                id="range"
                class="plus"
                name="utility" 
                min="0"
                max="10"
                step="1"
                value="5"
            />
            <span id="value">5</span>
        {{ endif }}
    </div>

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

    {{ if player.round_number > 1 }}
        <div class="content">
            <table class="table vertical" style="width: auto; margin: auto;">
                <h5>～これまでの回答～</h5>
                <tr>
                    <th>round</th>
                    {{ for i in history.index }}
                    <td>{{ i }}</td>
                    {{ endfor }}
                </tr>
                <tr>
                    <th>予想価格</th>
                    {{ for h in history.予想価格 }}
                    <td>{{ h }}</td>
                    {{ endfor }}
                </tr>
                <tr>
                    <th>実際の価格</th>
                    {{ for h in history.実際の価格 }}
                    <td>{{ h }}</td>
                    {{ endfor }}
                </tr>
                <tr>
                    <th>満足 or 不満</th>
                    {{ for h in history.効用 }}
                    <td>{{ h }}</td>
                    {{ endfor }}
                </tr>
            </table>
        </div>
    {{ endif }}
    <p>{{ next_button }}</p>
    <style>
        td {
            text-align: center;
        }
        .vertical th {
            border-right: 1px rgba(0, 0, 0, 0.075) solid;
        }
    </style>
    <script>
        let elem = document.getElementById("range");
        let target = document.getElementById("value");
        let submit = document.getElementById("copy");

        let rangeValue = function (elem, target) {
            return function (evt) {
                if (elem.className === "minus") {
                    target.innerHTML = -1 * elem.value;
                } else {
                    target.innerHTML = elem.value;
                }
            };
        };
        let submitValue = function (elem, submit) {
            return function (evt) {
                if (elem.className === "minus") {
                    submit.value = -1 * elem.value;
                }
            };
        };
        elem.addEventListener("input", rangeValue(elem, target));
        if (elem.className === "minus") {
            elem.addEventListener("change", submitValue(elem, submit));
        }
    </script>
{{ endblock }}