{% extends "skeleton.html" %}
{% load static %}
{% load i18n %}

{% block head %}
<meta http-equiv="refresh" content="30">
{% endblock %}

{% block page_title %}
{% trans 'Site is in Maintenance' %}
{% endblock %}

{% block body_class %}login-screen{% endblock %}

{% block body %}
    <!-- 
        Background Image Attribution: https://unsplash.com/photos/Ixvv3YZkd7w
    -->
    <div class='container-fluid'>
        <div class='notification-area' id='alerts'>
            <!-- Div for displayed alerts -->
        </div>
    </div>

    <div class='main body-wrapper login-screen d-flex'>


        <div class='login-container'>
        <div class="row">
            <div class='container-fluid'>

                <div class='clearfix content-heading login-header d-flex flex-wrap'>
                    <img class="pull-left" src="{% static 'img/inventree.png' %}" width="60" height="60"/>
                    {% include "spacer.html" %}
                    <span class='float-right'><h3>{% block body_title %}{% trans 'Site is in Maintenance' %}{% endblock %}</h3></span>
                </div>
            </div>
                <div class='container-fluid'>
                    <hr>
                    {% block content %}
                    {% trans 'The site is currently in maintenance and should be up again soon!' %}
                    {% endblock %}
                </div>
        </div>
        </div>

        {% block extra_body %}
        {% endblock %}
    </div>
{% endblock %}

{% block js_base %}
<script type='text/javascript'>
$(document).ready(function () {
    // notifications
    {% if messages %}
    {% for message in messages %}
    showAlertOrCache(
        '{{ message }}',
        true,
        {
            style: 'info',
        }
    );
    {% endfor %}
    {% endif %}

    inventreeDocReady();
});
</script>
{% endblock %}
</body>
</html>