<%

from cuchulu.modules.admin2.libraries.config import modules_admin, modules_admin_icons
from cuchulu.libraries.i18n import I18n
from cuchulu.libraries.sessionplugin import get_session

i18n=I18n('admin2')

dark_checked=""
dark_css=""

session=get_session()

if session.get('theme', '0')==True:
    dark_checked='checked'
    dark_css='dark'


lang_selected=session['lang']

%>
<!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', 'admin2')}" rel="stylesheet" />
<link href="${make_media_url('css/responsive-nav.css', 'admin2')}" rel="stylesheet" />
<link href="${make_media_url('css/tooltipster.bundle.min.css', 'admin2')}" 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-3.7.1.min.js', 'admin2')}"></script>
<script language="Javascript" src="${make_media_url('js/responsive-nav.min.js', 'admin2')}"></script>
<script language="Javascript" src="${make_media_url('js/tooltipster.bundle.min.js', 'admin2')}"></script>
${load_js()|n}
<%block name="extra_js">
</%block>
<%block name="extra_header">
</%block>
</head>
<body class="${dark_css}">
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="home" viewBox="0 0 16 16">
    <path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"/>
  </symbol>
  %for module_icon in modules_admin_icons.values():
  
  ${module_icon|n}
  
  %endfor
</svg>
<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="${url_for('admin_app.logout_admin')}"><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"><span id="title_phango">Admin</span> <span id="title_framework">site!</span>
        </%block>
        <%block name="languages">
        <div id="languages_general">
        <%def name="select_lang(i18n, lang_selected)">${'choose_flag' if i18n==lang_selected  else 'no_choose_flag'}</%def>
        </%block>
        % if lang_selected!=None:
            % for i18n_lang in i18n.dict_i18n:
                <a class="${select_lang(i18n_lang, lang_selected)}" href="${url_for('change_lang', lang=i18n_lang)}"><img src="${make_media_url('images/languages/'+i18n_lang+'.png', 'admin2')}" alt="${i18n_lang}"/></a> 
            % endfor 
        % endif
        </div>
    </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>
                 % for module, arr_mod_v in modules_admin.items():
                <li>
                    % if module in session['modules']:
                    % for mod_v in arr_mod_v:
                        % if len(mod_v)>2 and type(mod_v[2]).__name__=='str':
                                <div class="father_admin">
                                <svg class="bi me-2" width="16" height="16"><use xlink:href="#${mod_v[1]}"></use></svg>
                                    % if type(mod_v[0]).__name__=='function':
                                    ${mod_v[0]()}
                                    % else:
                                    ${mod_v[0]}
                                    %endif
                                </div>
                        % else:
                            <a href="${url_for(module)}" class="${'selected_menu' if module==module_selected else ''}">
                                <svg class="bi me-2" width="16" height="16"><use xlink:href="#${mod_v[1]}"></use></svg>
                                % if type(mod_v[0]).__name__=='function':
                                ${mod_v[0]()}
                                % else:
                                ${mod_v[0]}
                                %endif
                            </a>
                        % endif
                    % endfor
                    % endif
                </li>
                % endfor
            </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">
                <%
                flash=show_flash_message()
                %>
                % if flash!='':
                <div class="flash">${flash}</div>
                <script>setTimeout(function () { $(".flash").fadeOut();  }, 3000);</script>
                % endif
                <%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: "${url_for('admin_app.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>
