{% load static %}
{% get_static_prefix as STATIC_URL %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>{% block title %}M3{% endblock %}</title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
        <meta http-equiv="X-UA-Compatible" content="IE=10">
        {% block extra_meta %}{% endblock %}
        <style type='text/css'>
            html, body{font-family:Tahoma,Sans;font-size:11px;}
            #loading-mask{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000;z-index:1001;}
            #loading{position:absolute;top:40%;left:45%;z-index:1002;}
        </style>
        <!-- css классы extjs -->
        <link rel='stylesheet' type='text/css' href='{{ STATIC_URL }}vendor/extjs/resources/css/ext-all.css'/>
        <link rel='stylesheet' type='text/css' href='{{ STATIC_URL }}vendor/extjs/resources/css/ux/ux-all.css'/>

        <!-- m3 css-->
        <link rel='stylesheet' type='text/css' href='{{ STATIC_URL }}m3/css/m3.css'/>
        <link rel='stylesheet' type='text/css' href='{{ STATIC_URL }}m3/css/icons.css'/>

        <!-- m3 lightbox css-->
        <link rel='stylesheet' type='text/css' href='{{ STATIC_URL }}ext/css/lightbox.css'/>

        <!-- базовые файлы extjs -->
        {% if debug  %}
            <script type="text/javascript" src="{{ STATIC_URL }}vendor/extjs/adapter/ext/ext-base-debug.js"></script>
            <script type='text/javascript' src='{{ STATIC_URL }}vendor/extjs/ext-all-debug.js'></script>
            <script type='text/javascript' src='{{ STATIC_URL }}vendor/extjs/ux-all-debug.js'></script>
        {% else %}
            <script type="text/javascript" src="{{ STATIC_URL }}vendor/extjs/adapter/ext/ext-base.js"></script>
            <script type='text/javascript' src='{{ STATIC_URL }}vendor/extjs/ext-all.js'></script>
            <script type='text/javascript' src='{{ STATIC_URL }}vendor/extjs/ux-all.js'></script>
        {% endif %}
        <script type='text/javascript' src='{{ STATIC_URL }}vendor/extjs/locale/ext-lang-ru.js'></script>
        <script type='text/javascript' src='{{ STATIC_URL }}vendor/extjs/locale/ux-lang-ru.js'></script>

        <!-- web-desktop css и js -->
        {% block desktop_css %}
            <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}ext/web-desktop/css/desktop.css" />
        {% endblock %}
        {% block desktop_script %}
            <script type="text/javascript" src="{{ STATIC_URL }}ext/web-desktop/js/desktop.js"></script>
        {% endblock %}

        <!-- m3 js-->
        {% if debug  %}
            <script type='text/javascript' src='{{ STATIC_URL }}m3/js/m3-debug.js'></script>
        {% else %}
            <script type='text/javascript' src='{{ STATIC_URL }}m3/js/m3-opt.js'></script>
        {% endif %}

        <link rel='stylesheet' type='text/css' href='{{ STATIC_URL }}m3/css/locking-grouping-grid.css'/>
        <script src="{{ STATIC_URL }}m3/js/ext-extensions/LockingGridColumnWithHeaderGroup.js"></script>

        {# Точка расширения для скриптов #}
        {% block content_head %}
        {% endblock %}
    </head>
    <body scroll="no">
        <!-- Анимация при входе на рабочий стол -->
        {# preload indicator area #}
        <div id="loading-mask"></div>
        <div id="loading">
            <span id="loading-message">Загрузка приложения...</span>
        </div>
        {# END: preload indicator area #}

        <!-- Анимация при входе на рабочий стол -->
        <script type='text/javascript'>
            Ext.onReady(function(){
                // Инициализация всплывающих подсказок в extjs
                Ext.QuickTips.init();

                var loadingMask = Ext.get('loading-mask');
                var loading = Ext.get('loading');
                // Hide loading message
                loading.fadeOut({ duration: 0.2, remove: true });
                // Hide loading mask
                loadingMask.setOpacity(0.9);
                loadingMask.shift({
                    xy: loading.getXY(),
                    width: loading.getWidth(),
                    height: loading.getHeight(),
                    remove: true,
                    duration: 1,
                    opacity: 0.1,
                    easing: 'bounceOut'
                });
            });

        </script>

        {# Точка расширения для дополнительно html кода #}
        {% block content %}
        {% endblock %}
    </body>
</html>

