{% extends "timeline-page.html" %}

{% block main_body %}
    <style>
        {# copied from https://codepen.io/bernethe/pen/dorozd #}
        .sp {
            width: 32px;
            height: 32px;
            clear: both;
            margin: 20px auto;
        }

        /* Spinner 3Balls Scale */
        .sp-3balls, .sp-3balls:before, .sp-3balls:after {
            border-radius: 50%;
            background-color: #4989C8;
            width: 18px;
            height: 18px;
            transform-origin: center center;
            display: inline-block;
        }

        .sp-3balls {
            position: relative;
            background-color: #4989C8;
            opacity: 1;
            -webkit-animation: spScaleAlpha 1s infinite linear;
            animation: spScaleAlpha 1s infinite linear;
        }

        .sp-3balls:before, .sp-3balls:after {
            content: '';
            position: relative;
            opacity: 0.25;
        }

        .sp-3balls:before {
            left: 30px;
            top: 0px;
            -webkit-animation: spScaleAlphaBefore 1s infinite linear;
            animation: spScaleAlphaBefore 1s infinite linear;
        }

        .sp-3balls:after {
            left: -30px;
            top: -23px;
            -webkit-animation: spScaleAlphaAfter 1s infinite linear;
            animation: spScaleAlphaAfter 1s infinite linear;
        }

        @-webkit-keyframes spScaleAlpha {
            0% {
                opacity: 1;
            }
            33% {
                opacity: 0.25;
            }
            66% {
                opacity: 0.25;
            }
            100% {
                opacity: 1;
            }
        }

        @keyframes spScaleAlpha {
            0% {
                opacity: 1;
            }
            33% {
                opacity: 0.25;
            }
            66% {
                opacity: 0.25;
            }
            100% {
                opacity: 1;
            }
        }

        @-webkit-keyframes spScaleAlphaBefore {
            0% {
                opacity: 0.25;
            }
            33% {
                opacity: 1;
            }
            66% {
                opacity: 0.25;
            }
        }

        @keyframes spScaleAlphaBefore {
            0% {
                opacity: 0.25;
            }
            33% {
                opacity: 1;
            }
            66% {
                opacity: 0.25;
            }
        }

        @-webkit-keyframes spScaleAlphaAfter {
            33% {
                opacity: 0.25;
            }
            66% {
                opacity: 1;
            }
            100% {
                opacity: 0.25;
            }
        }

        @keyframes spScaleAlphaAfter {
            33% {
                opacity: 0.25;
            }
            66% {
                opacity: 1;
            }
            100% {
                opacity: 0.25;
            }
        }

        .vcenter {
            display: inline-block;
            vertical-align: middle;
            float: none;
        }
    </style>
    <div class="row">
        <div class="col-xs-1 col-md-1 col-lg-1 vcenter" style="min-width:100px">
            <div class="sp sp-3balls"></div>
        </div>
        <div class="col-10 vcenter">
            <p>{{ content }}</p>
        </div>
    </div>
{% endblock %}

{% block scripts %}
    {{ super() }}

    <script>
        setTimeout(function () {
            psynet.nextPage();
        }, 1000 * {{ wait_time }});
    </script>
{% endblock %}
