{% extends 'base.html' %}

{% block header %}
{% endblock %}

{% block content %}
<header>
    <div class="jumbotron jumbotron-fluid">
        <div class="container">
            <h1 class="display-4">Language questionnaires ({{ quest_id }})</h1>
            <p class="lead">Showing details about language questionnaire {{ quest_id }}. To modify, hit the
                "Modify
                questionnaire"
                button.
            </p>
        </div>
    </div>
    <hr class="my-4">
</header>

<body>
    <div class="row">
        <div class="col">
            <div class="btn-group" role="group" aria-label="Basic example">
                <a
                    href="{{ url_for('questionnaire_modify', appt_id = appt_id, ppt_id = ppt_id, quest_id = quest_id) }}"><button
                        type="button" class="btn btn-warning" style="float: left; margin: 0.5em;"><i
                            class="fa fa-pen"></i>&nbsp&nbspModify
                        questionnaire</button></a>
            </div>
        </div>
    </div>
    <br>
    <div class="card">
        <div class="card-header">Linguistic information</div>
        <div class="card-body">
            <table class="table table-hover table-responsive">
                <caption>Updated on the {{ data["updated"] }}</caption>
                <thead>
                    <tr>
                        <th scope="col"></th>
                        <th scope="col">Language</th>
                        <th scope="col">Exposure (%)</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">1</th>
                        <td>{{ data["lang1"] }}</td>
                        <td>{{ data["lang1_exp"] }}</td>
                    </tr>
                    <tr>
                        <th scope="row">2</th>
                        <td>{{ data["lang2"] }}</td>
                        <td>{{ data["lang2_exp"] }}</td>
                    </tr>
                    <tr>
                        <th scope="row">3</th>
                        <td>{{ data["lang3"] }}</td>
                        <td>{{ data["lang3_exp"] }}</td>
                    </tr>
                    <tr>
                        <th scope="row">4</th>
                        <td>{{ data["lang4"] }}</td>
                        <td>{{ data["lang4_exp"] }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
{% endblock %}