<!-- templates/rikai.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rikai Page</title>
</head>
<body>
    <h1>Rikai Page</h1>
    
    <form action="/submit" method="POST" enctype="multipart/form-data">
        {% set categories = {"小学校国語": ["a", "i", "u", "e", "o"],
                            "小学校算数": ["あ", "い", "う", "え", "お"],
                            "小学校理科": ["1", "2", "3", "4"],
                            } %}

        {% for category, subjects in categories.items() %}
        <h2>{{ category }}</h2>
        <div class="box">
            {% for subject in subjects %}
            <div class="box__card">
                <label for="{{ category|lower }}_{{ subject|lower }}">{{ subject }}の成績</label><br />
                <input type="range" id="{{ category|lower }}_{{ subject|lower }}" name="{{ category|lower }}_{{ subject|lower }}" list="tickmarks" min="-1"
                    max="4" step="1" value="-1">
                <datalist id="tickmarks">
                    <option value="-1" label="未"></option>
                    <option value="0" label="落単"></option>
                    <option value="1" label="Ｃ"></option>
                    <option value="2" label="Ｂ"></option>
                    <option value="3" label="Ａ"></option>
                    <option value="4" label="Ｓ"></option>
                </datalist>
                <input type="checkbox" name="{{ category|lower }}_{{ subject|lower }}_checkbox">
            </div>
            {% endfor %}
        </div>
        {% endfor %}
        <button type="submit">更新します</button>
    </form>
</body>
</html>
