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

{% block styles %}

<style>

.tg {
    height: 560px;
    table-layout: fixed;
    width: 500px;
}

.tg td {
    border: 1px solid silver;
    height: 70px;
    padding: 0px 15px 0px 15px;
    text-align: left;
    vertical-align: middle;
}

input[type=text] {
    margin-bottom: 0px;
    margin-top: 15px;
}

</style>

{% endblock %}

{% block title %}

Payment Information

{% endblock %}

{% block content %}

<p align="justify">
<i> Please provide the following payment information. </i>
</p>

<br />

<center>

<table class="tg">
  <tr>
    <td style="width: 175px"> First name: </td>
    <td> {% formfield player.first_name label="" %} </td>
  </tr>
  <tr>
    <td style="width: 175px"> Last name: </td>
    <td> {% formfield player.last_name label="" %} </td>
  </tr>
  <tr>
    <td style="width: 175px"> Address: </td>
    <td> {% formfield player.address label="" %} </td>
  </tr>
  <tr>
    <td style="width: 175px"> City: </td>
    <td> {% formfield player.city label="" %} </td>
  </tr>
  <tr>
    <td style="width: 175px"> Country: </td>
    <td> {% formfield player.country label="" %} </td>
  </tr>
  <tr>
    <td style="width: 175px"> Date of birth: </td>
    <td> {% formfield player.dob label="" %} </td>
  </tr>
  <tr>
    <td style="width: 175px"> IBAN: </td>
    <td> {% formfield player.iban label="" %} </td>
  </tr>
  <tr>
    <td style="width: 175px"> E-mail&#42; <i> (optional)</i>: </td>
    <td> {% formfield player.email label="" %} </td>
  </tr>
</table>

</center>

<br />

<p align="justify">
<i> &#42;Provide your e-mail address to receive a written confirmation of your payment within 5 working days. </i>
</p>

<br />

<button class="btn btn-primary btn-large" style="float: right"> Next </button>

{% endblock %}