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

{% block styles %}
    <link rel="stylesheet" type="text/css" href="{% static 'global/main.css' %}">
{% endblock %}

{% block title %}
    <div class="center">
        Book Survey
    </div>
{% endblock %}

{% block content %}
    {% if player.weblink == 'd6_jQXoS0rs' %}
        <div class="center">
            <iframe width="750" height="425" src={{ link }} frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class="center">
            <p>
                Please press next after watching the entire video.
            </p>
        </div>
        <div class="center">
            <button class="otree-btn-next btn btn-primary">
                Next
            </button>
        </div>
    {% else %}
        <p>
            You are assigned to the Empathy Book, please <a href="http://booksurvey.herokuapp.com/room/empathy">click here.</a>
        </p>
    {% endif %}
    <div class="center">
    </div>
{% endblock %}