{{ extends 'global/IntroPage.html' }}
{{ block title }}Today's Experiment{{ endblock }}

{{ block page_body }}

<style>
.intro-layout {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 40px;
}
.intro-layout-text {
    flex: 1;
    min-width: 280px;
}
.intro-layout-image {
    flex: 2;
    min-width: 380px;
    text-align: center;
}
</style>

<div class="intro-layout">
    <div class="intro-layout-text">
        <p>In the <b>island assignment process</b>, there are <b>{{ num_players }}</b> travelers and <b>{{ C.NUM_CAP }}</b> islands.</p>
        <p>Each island only has room for <b>{{ num_quota }}</b> travelers.</p>
	<p>You are one of the travelers. The other {{ num_other_players }} are other Prolific participants.</p>
    </div>
    <div class="intro-layout-image">
        <img src="{{ static img_path }}" style="max-width: 100%; max-height: 460px;">
    </div>
</div>

<p></p>
<div class="otree-nav-buttons">{{ back_button }} {{ next_button }}</div>

{{ endblock }}