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

{% block title %}
    Page 11 / 14
{% endblock %}

{% block content %}

<p style="border:3px; border-style:solid; border-color:#404040; padding: 1em; border-radius:25px;">
    As part of your team project, you will need to complete various tasks.<br>
    One of the main tasks for your team is to plan a book tour for the new author you won.<br>
    <br>
    <b>In your team, how will you distribute your tasks?</b>
</p>


<div class="card-deck">
    <div class="card">
      <img class="card-img-top" src="{% static 'global/team.jpg' %}" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title"></h5>
        <p class="card-text"> We collaborate and try to distribute the tasks in such a way
            that team members work together on several different tasks as each team member
            can contribute to the tasks in different ways.
        </p>
      </div>
        <div class="card-footer">
      <small class="text-muted">Choice A</small>
    </div>
    </div>
    <div class="card">
      <img class="card-img-top" src="{% static 'global/index.jpg' %}" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title"></h5>
        <p class="card-text">Everyone decides which tasks he or she wants to be responsible for. <br>
            Each team member will pick the tasks he or she can handle.
        </p>
      </div>
        <div class="card-footer">
      <small class="text-muted">Choice B</small>
    </div>
    </div>
    <div class="card" >
      <img class="card-img-top" src="{% static 'global/delegate.jpg' %}" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title"></h5>
        <p class="card-text">We ask our supervisor to make the task distribution as we don't know a lot about each other.
        </p>
      </div>
        <div class="card-footer">
      <small class="text-muted">Choice C</small>
    </div>
    </div>
</div>

 {% formfield player.choice1 %}
<br>
<em>Please click on the <b>'Next'</b> button to proceed.
            </em>
<br><br><br>
    {% next_button %}
{% endblock %}