Smarter/smarter/templates/question-sets/browse.j2

{% extends "base.j2" %}

{% block title %}
    {% if for_game %}
        Select a question set
    {% else %}
        Browse question sets
    {% endif %}
{% endblock %}

{% block after_bootstrap_js %}
<script src="{{ url_for('static', filename='js/question_set_browse.js') }}"></script>
{% endblock %}

{% block main %}
<div class="container">
    {% if not for_game %}
    <div id="confirmDeleteModal" class="modal fade" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content bg-info-subtle text-success border-success-subtle">
                <div class="modal-header border-success-subtle">
                    <h5 class="modal-title">Confirm deletion</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>Do you really want to delete this question set? This action is irreversible.</p>
                </div>
                <div class="modal-footer justify-content-evenly border-success-subtle">
                    <button type="button" class="btn btn-outline-success" data-bs-dismiss="modal">Cancel</button>
                    <form id="confirmDeleteForm" method="post">
                        <button type="submit" class="btn btn-outline-danger">Delete</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
    {% if for_game %}
        {% if game is not none %}
        <div class="row justify-content-center mt-3">
            <div class="col-md-6">
                <div class="alert bg-info-subtle text-success border-success-subtle" role="alert">
                    You are already in a game. <a class="text-success link-offset-2" href={{ "/join/" + game }}>Rejoin</a>.
                </div>
            </div>
        </div>
        {% endif %}

        <h2 class="text-center text-primary-emphasis mt-2">Select a question set for playing</h2>
        <hr class="border-primary">
        <form action="{{ url_for('game.create_game') }}" method="post">
            <div class="row justify-content-center text-center mt-3">
                <div class="col-4 col-sm-3 m-2">
                    <input class="bg-info-subtle text-success border-success-subtle form-control" name="id" type="number" required>
                </div>
                <div class="col-md-2 m-2">
                    <button type="submit" class="btn btn-outline-primary">Select by ID</button>
                </div>
            </div>
        </form>
        <hr class="border-primary">
    {% endif %}
    {% if g.user %}
    <h3 class="text-center mt-2 text-primary-emphasis"> Your question sets </h3>
    {% for question_set in owned_question_sets %}
    <div class="row justify-content-center mt-3">
        <div class="col-lg-5 card bg-info-subtle border-primary-subtle text-primary-emphasis">
            <div class="card-body">
                <h6 class="mt-2 card-title">
                    {{ question_set["name"] }} (ID {{ question_set["id"] }})
                    {% if question_set["private"] %}
                        <span class="ms-2 badge rounded-pill bg-primary">Private</span>
                    {% endif %}
                </h6>
                <p class="card-text">
                    {{ question_set["questions"] | length }} questions
                </p>
                <!-- The buttons become too small when size switches to large,
                because the parent element becomes smaller -->
               <div class="row justify-content-end">
                    <button class="col-4 col-md-3 col-lg-4 col-xl-3 btn btn-outline-primary"
                    data-bs-toggle="collapse" data-bs-target="#questionInfo{{ question_set['id'] }}priv">
                        Show
                    </button>
                    {% if for_game %}
                        <form class="col-5 col-md-3 col-lg-5 col-xl-4 ms-2"
                        action="{{ url_for('game.create_game') }}" method="post">
                            <input type="hidden" name="id" value="{{ question_set['id'] }}">
                            <button class="w-100 btn btn-outline-success">Select</button>
                        </form>
                    {% else %}
                    <button data-bs-toggle="modal" data-bs-target="#confirmDeleteModal" data-bs-set-id="{{ question_set['id'] }}" class="col-4 col-md-3 col-lg-4 col-xl-3 ms-2 btn btn-outline-danger">Delete</button>
                    {% endif %}
                </div>
                <div class="collapse mt-4" id="questionInfo{{ question_set['id'] }}priv">
                    <div class="card border-primary-subtle">
                        <ul class="list-group list-group-flush">
                            {% for question in question_set["questions"] %}
                                <li class="list-group-item list-group-item-info border-primary-subtle text-primary-emphasis">
                                    {{ question["question"] }} ({{ question["category"] }}, {{ question["difficulty"] }}{{ ', ID ' ~ question["id"] if question["source"] == 'user' }})
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}

    <hr class="border-primary">
    {% endif %}

    <h3 class="text-center text-primary-emphasis mt-2"> All question sets </h3>
    {% for question_set in question_sets %}
    <div class="row justify-content-center mt-3">
        <div class="col-lg-5 card bg-info-subtle border-primary-subtle text-primary-emphasis">
            <div class="card-body">
                <h6 class="card-title">
                    {{ question_set["name"] }} (ID {{ question_set["id"] }})
                </h6>
                <h6 class="card-subtitle mb-2">
                    <strong>By {{ question_set["creator"] }}</strong>
                </h6>
                <p class="card-text">
                    {{ question_set["questions"] | length }} questions
                </p>
                <!-- The buttons become too small when size switches to large,
                because the parent element becomes smaller -->
                <div class="row justify-content-end">
                    <button class="col-4 col-md-3 col-xl-3 col-lg-4 btn btn-outline-primary"
                    data-bs-toggle="collapse" data-bs-target="#questionInfo{{ question_set['id'] }}pub">
                        Show
                    </button>
                    {% if for_game %}
                        <form class="col-5 col-md-3 col-lg-5 col-xl-4 ms-2"
                        action="{{ url_for('game.create_game') }}" method="post">
                            <input type="hidden" name="id" value="{{ question_set['id'] }}">
                            <button class="w-100 btn btn-outline-success">Select</button>
                        </form>
                    {% endif %}
                </div>
                <div class="collapse mt-4" id="questionInfo{{ question_set['id'] }}pub">
                    <div class="card border-primary-subtle">
                        <ul class="list-group list-group-flush">
                            {% for question in question_set["questions"] %}
                                <li class="list-group-item list-group-item-info border-primary-subtle text-primary-emphasis">
                                    {{ question["question"] }} ({{ question["category"] }}, {{ question["difficulty"] }}, ID {{ question["id"] }})
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
    <hr class="border-primary">
</div>
{% endblock %}