{% extends "global/PageExt.html" %}
{% load staticfiles otree_tags %}

{% block title %}
{% endblock %}

{% block inner_content %}
<div class="row">
    <div class="col-sm-12">
        <div class="box box1 shadow1">
            {% include "consent/ConsentContent.html" %}
        </div>
    </div>
</div>
<div class="new_placeholder_for_otree_timer"></div>
{% next_button %}
{% if form.consent.errors %}
<div class="modal fade" tabindex="-1" role="dialog" id='myModal'>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">Please, accept this consent agreement</h4>
            </div>
            <div class="modal-body">
                <p>{{ form.consent.errors }}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
{% endif %}

</div>
{% if form.consent.errors %}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
        integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
        crossorigin="anonymous"></script>
<script>
    $('#myModal').modal('toggle');
    $(document).ready(function () {
        var probs = $('.probs');
        probs.html("");
    });




</script>

{% endif %}
<script>
    var $otree_timer = $('.otree-timer');
    $otree_timer.remove();
    $otree_timer.removeClass('alert alert-warning');
    $otree_timer.addClass('bs-callout bs-callout-danger');
    $('.new_placeholder_for_otree_timer').append($otree_timer);
    $otree_timer.show()




</script>

{% endblock %}


{% block styles%}
<style>
    .otree-timer {
        display: none;
    }

    .box {
        width: 100%;
        /*height:200px;*/
        float: left;
        background-color: white;
        /*margin:0px 10px 25px 15px;*/
        margin-bottom: 30px;
        border-radius: 5px;
    }

    .box1 {
        background-color: #fcf8e3;
        padding: 20px;
    }

    /*
    .shadow1{
      position:relative;
    }*/
    .shadow1 {
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;
    }

    .red {
        color: red;
    }




</style>{% endblock %}