{# templates/characters.html #}
{% extends 'base.html' %}
{% block h1 %}登場人物の選択{% endblock %}
{% block content %}

    <p>以下の登場人物候補から<span style="color: red;">3人</span>を選択してください。</p>  {# 赤字で強調 #}
     {% with messages = get_flashed_messages() %}
        {% if messages %}
            <div class="alert alert-danger" role="alert">
                {% for message in messages %}
                    {{ message }}
                {% endfor %}
            </div>
        {% endif %}
    {% endwith %}
    <form method="post" action="{{ url_for('select_characters') }}">
        {% for character in characters %}
            <div class="form-check">
                <input class="form-check-input" type="checkbox" name="characters" value="{{ loop.index0 }}" id="char{{ loop.index0 }}">
                <label class="form-check-label" for="char{{ loop.index0 }}">
                    {{ character.name }} ({{ character.age }}歳, {{ character.personality }}, {{character.background}})
                </label>
            </div>
        {% endfor %}

        <button type="submit" class="btn btn-primary">次へ</button>
    </form>
     <script>  // JavaScriptでチェックボックスの数をチェック
        const checkboxes = document.querySelectorAll('input[name="characters"]');
        const submitButton = document.querySelector('button[type="submit"]');

        checkboxes.forEach(checkbox => {
            checkbox.addEventListener('change', () => {
                const checkedCount = document.querySelectorAll('input[name="characters"]:checked').length;
                if (checkedCount === 3) {
                    checkboxes.forEach(cb => {
                        if (!cb.checked) {
                            cb.disabled = true; // 3つ選択されたら、他のチェックボックスを無効化
                        }
                    });
                } else {
                    checkboxes.forEach(cb => {
                        cb.disabled = false; // 3つ未満なら、全て有効化
                    });
                }
            });
        });

    </script>
{% endblock %}