<%


dark_checked=''
dark_css=''

if user.get('theme', 0)==1:
    dark_checked='checked'
    dark_css='dark'


%>
<!DOCTYPE html>
<html>
<head>                                                                                          
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>${title}</title>
<link href="${make_media_url('css/admin.css', 'admin')}" rel="stylesheet" />
<link href="${make_media_url('css/font-awesome.min.css', 'admin')}" rel="stylesheet" />
<link href="${make_media_url('css/responsive-nav.css', 'admin')}" rel="stylesheet" />
<link href="${make_media_url('css/tooltipster.bundle.min.css', 'admin')}" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
<%block name="extra_css">
</%block>
<script language="Javascript" src="${make_media_url('js/jquery.min.js', 'admin')}"></script>
<script language="Javascript" src="${make_media_url('js/responsive-nav.min.js', 'admin')}"></script>
<script language="Javascript" src="${make_media_url('js/tooltipster.bundle.min.js', 'admin')}"></script>
${load_js()|n}
<%block name="extra_js">
</%block>
<%block name="extra_header">
</%block>
</head>
<body class="${dark_css}">
<div id="layer_loading"><div id="container_loading"><div class="lds-dual-ring"></div></div></div>
<div id="languages_general">
</div>
<div id="logout">
<%block name="logout"><a href="${make_url('admin/logout')}"><i class="fa fa-power-off" aria-hidden="true"></i> Logout</a></%block>
</div>

<div id="center_body">
    <div id="header">
        <a href="#nav" id="toggle"><i class="fa fa-bars" aria-hidden="true"></i><span>Menu</span></a>
        <%block name="title_admin">
        <%

        from settings import config

        portal_admin_name_set=('Paramecio', 'Framework!')

        if hasattr(config, 'portal_admin_name_set'):
            portal_admin_name_set=('Paramecio', 'Framework!')

        %>
        <span id="title_phango">${portal_admin_name_set[0]}</span> <span id="title_framework">${portal_admin_name_set[1]}</span>
        </%block>
        
    </div>
    <div class="content_admin">
    
        <nav id="menu" class="nav-collapse">
            <ul>
                <li class="menu_title"><%block name="applications"><i class="fa fa-gear" aria-hidden="true"></i>${_('Applications')}</li></%block>
                <%block name="menu_list">
                <%
                
                from paramecio2.libraries.config_admin import config_admin
    
                %>
                % for admin in config_admin:

                    <%
                    
                    class_selected=''
                    link_text=''
                    
                    %>
                
                    % if len(admin)>=3:
                    <%
                    
                    if admin[2]==path_module:
                        class_selected='selected_menu'
                        
                    icon_module='fa-circle-o'
                    
                    if len(admin)>3:
                        icon_module=admin[3]
                    
                    if type(admin[0]).__name__=='function':
                        link_text=admin[0]()
                    else:
                        link_text=admin[0]
                    
                    %>
                
                    <li><a href="${url_for(admin[2])}" class="${class_selected}">&nbsp;<i class="fa ${icon_module}" aria-hidden="true"></i>${link_text}</a></li>
                                        
                    % elif len(admin)==1:
                    <%
                    if type(admin[0]).__name__=='function':
                        link_text=admin[0]()
                    else:
                        link_text=admin[0]
                    %>
                    
                    <li><div class="father_admin">${link_text}</div></li>
                    
                    % endif
                
                % endfor
                </%block>
            </ul>
        </nav>
        <div class="contents">
            <h1>${title}</h1>
            <div class="switch-btn">
                <div class="switch-text">
                    ${_('Dark theme')}
                </div>
                <div class="switch-slider">
                    <label class="switch">
                        <input type="checkbox" name="theme" value="1" id="theme" ${dark_checked}/>
                        <span class="slider round"></span>
                    </label>
                </div>
            </div>
            <div class="content">
                <script>setTimeout(function () { $(".flash").fadeOut();  }, 3000);</script>
                <%block name="content">
                </%block>
            </div>
    </div>
</div>
<div id="loading_ajax">
</div>
<script>
    var navigation = responsiveNav(".nav-collapse", {customToggle: "#toggle"});
    
    $('.tooltip').tooltipster({
        animation: 'fade',
        delay: 100,
        trigger: 'click'
    });
    
    const slider = document.querySelector('input[name="theme"]');

    slider.addEventListener("change", function () {
        
        //Block button while send to ajax. 
        
        $(this).prop("disabled",true);
        
        var dark='';
        
        if (this.checked) {
            document.body.classList.add("dark");
            
            dark='1';
            
        } else {
            document.body.classList.remove("dark");
            
            dark='0';
        }
        
        $.ajax({
            url: "${make_url('admin/change_theme')}?theme="+dark,
            type: 'GET',
            data:  {},
            success: function (data) {

                if(!data.error) {

                    console.log('Changed to dark in all pages');

                }
                else {

                    console.log('Cannot set dark theme in all pages!');

                }
                
                $(slider).prop("disabled",false);

            },
            error: function (data) {

                alert('Error: '+data.status+' '+data.statusText);
                
                $(slider).prop("disabled", false);

            },
            dataType: 'json'
        });

    });
    
    $(document).ready(function () {
        
        $('#layer_loading').hide();
    
    });

</script>
<%block name="jscript_block">
</%block>
</body>
</html>
