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

{% block styles %}
<link href="{% static 'Welcome/css/custom.css' %}" rel="stylesheet"/>
<style>
    .title-with-logos {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 40px;
        margin-top: 10px;
    }

    .title-text {
        flex-grow: 1;
        text-align: center;
        font-size: 24px;
        font-weight: bold;
    }

    .title-logo {
        width: 100px;
        height: auto;
    }

    .instructions {
        padding: 0 40px;
        margin-top: 20px;
    }
</style>
{% endblock %}

{% block title %}
<div class="title-with-logos">
    <img src="{% static 'img/Lund.png' %}" class="title-logo" alt="Lund Logo">
    <div class="title-text">
        {% trans "Important Note About Payment" %}
    </div>
    <img src="{% static 'img/INSEAD.png' %}" class="title-logo" alt="INSEAD Logo">
</div>
{% endblock %}

{% block content %}
<div class="instructions" align="justify">
    <p>
        To receive your payment, your participation needs to be manually approved
        by the researchers after you complete the study.
        While we aim to process approvals carefully, there have been occasional instances where,
        due to oversight on our part, a participant's payment was not approved at all.
    </p>
    <p>
       If you notice that your payment has not arrived,
        please contact us at <b>[contact@domain.com]</b>.
    </p>
    <p>
        <b>We recommend that you take note of this email address.</b>
    </p>

    <button name="Consent" value="True" class="btn btn-primary btn-large">
        I confirm that I have received the information about the payment.
    </button>
</div>
{% endblock %}