{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
    Please select the book you want.
{% endblock %}

{% block content %}
<div class="wrapper">
    <div class="wrapper instructions">
        <div style="text-align: justify">

            <p align= "center">
                As stated earlier in the session, you will receive a free book. Please tell us which book you prefer.
            </p>
    
            <p>
                <table align= "center" border = "1px solid black" border-collapse = 'collapse'>
                    <tr>
                        <th> <img src="{% static "books/2.jpg" %}"/></th>
                        <th> <img src="{% static "books/1.png" %}"/></th>
                    </tr>
                    <tr align= "center">
                        <th> Book 1 (Book on Empathy)</th>
                        <th> Book 2 (Book on Public Policy)</th>
                    </tr>
                    <tr>
                        
                    </tr>
                </table>
            </p>
            <p>
                We hope to send you the book of your choice. Therefore, it is very important that you provide us the mailing address where you would like to receive the book in the next two weeks. You will also receive questions about the book from the Civil Service Academy, so make sure you receive the book on time.
            </p>
            <p>
                {% formfields %}
            </p>
            <p>
                
            </p>
        
        </div>      
    </div>
    <button class="otree-btn-next btn btn-primary">Submit</button>
</div>
{% endblock %}