{% extends ../base.html %}

{% block meta %}
{% end %}

{% block title %}Crafty Controller Starting{% end %}

{% block content %}
<div class="content-wrapper">
    <div class="card-header justify-content-between align-items-center" style="border: none;">
        <div id="image-div" style="width: 100%;">
            <img class="img-center" id="logo-animate" src="../static/assets/images/crafty-logo-square-1024.png"
                alt="Crafty Logo, Crafty is loading" width="20%" style="clear: both;">
        </div>
        <br>
        </br>
        <div id="text-div" style="width: 100%; text-align: center;">
            <h2 id="status" style="display: block;" data-init="{{ translate('startup', 'serverInit', data['lang']) }}"
                data-server="{{ translate('startup', 'server', data['lang']) }}"
                data-internet="{{ translate('startup', 'internet', data['lang']) }}"
                data-tasks="{{ translate('startup', 'tasks', data['lang']) }}"
                data-internals="{{ translate('startup', 'internals', data['lang']) }}"
                data-almost="{{ translate('startup', 'almost', data['lang']) }}">
                {{ translate('startup', 'starting', data['lang']) }}</h2>
        </div>

    </div>
</div>
<style>
    .img-center {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
</style>
<script>
    function rotateImage(degree) {
        $('#logo-animate').animate({ transform: degree }, {
            step: function (now, fx) {
                $(this).css({
                    '-webkit-transform': 'rotate(' + now + 'deg)',
                    '-moz-transform': 'rotate(' + now + 'deg)',
                    'transform': 'rotate(' + now + 'deg)'
                });
            }
        });
        setTimeout(function () {
            rotateImage(360);
        }, 2000);
    }
    $(document).ready(function () {
        setTimeout(function () {
            rotateImage(360);
        }, 2000);
        if (webSocket) {
            webSocket.on('update', function (data) {
                if ("server" in data) {
                    $("#status").html(`${$("#status").data(data.section)} ${data.server}...`);
                } else {
                    $("#status").html($("#status").data(data.section));
                }
            });
            webSocket.on('send_start_reload', function () {
                setTimeout(function () {
                    location.href = '/panel/dashboard'
                }, 5000);

            });
        }
    });

</script>
{% end %}