<%

from settings import config

base_url=config.application_root

%><!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <%block name="metatags">
      </%block>
      <title>${title}</title>
      <meta name="title" content="${lang('cuchulublog', 'cuchulu_com_talking_about', 'Cuchulu.com. Hablando de ingeniería informática.')}">
      <meta name="description" content="${lang('cuchulublog', 'cuchulu_com_personal_project', 'Página personal de los proyectos relacionados con Paramecio Framework, Linux, Apache, NGINX, Email servers, selfcloud y más cosas...')}">
      <meta name="keywords" content="cloud, linux, apache, nginx, python, php, webserver, selfcloud, mi cloud, ahorrar dinero en servidor">
      <meta name="robots" content="index, follow">
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <meta name="language" content="Spanish">
      <meta name="author" content="Antonio De La Rosa">

      <!-- Google Font: Source Sans Pro -->
      <link rel="preconnect" href="https://fonts.gstatic.com" />
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,500,500italic&display=fallback">
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,400i,700&display=fallback">
      <!-- styles -->
      <!--<link href="${make_media_url('css/font-awesome.min.css', 'admin')}" rel="stylesheet" />-->
      <link href="${make_media_url('css/bootstrap/bootstrap-reboot.min.css', 'cuchulublog')}" rel="stylesheet" type="text/css"/>
      <!--<link href="${make_media_url('css/bootstrap/bootstrap-grid.min.css', 'cuchulublog')}" rel="stylesheet" type="text/css"/>-->
      <link href="${make_media_url('css/font-awesome.min.css', 'cuchulublog')}" rel="stylesheet" type="text/css"/>
      <link href="${make_media_url('css/layout.css', 'cuchulublog')}" rel="stylesheet" type="text/css"/>
    <link rel="icon" type="image/png" href="${make_media_url('images/logo.png', 'cuchulublog')}">
      <%block name="header_css">
      </%block>
    </head>
    <body>
    <div id="loading" style="position:fixed;top:0px;height:100vh;width:100%;border: solid #f00 0px;display:none;">
        <div style="display: flex;padding: 0px;align-items: center;justify-content: center;height:100vh;width:100%;">
            <i class="fa fa-refresh fa-spin fa-3x fa-fw" style="position:absolute;top:50%;"></i>
        </div>
    </div>
    <div class="container-top">
        <div class="container" style="background: #fbfbfb;border: solid #cbcbcb;border-width: 0px 1px;">
            <div class="column_left logo">
                <div class="center_flex" style="height:50px;font-size:24px;font-family:Open Sans;background: #253062;color: #fff;">
                    <a href="/" id="logo_url">Cuchulu.com</a>
                    <div id="nav_home_mobile">
                        <a href="#" id="nav_button"><i class="fa fa-bars" aria-hidden="true"><span>Navigator button</span></i></a>
                    </div>
                </div>
            </div>
            <div class="column_content" id="menu_big">
                <div class="right_flex header_nav">
                <nav id="nav_home">
                    <ul>
                        <li>
                            <a href="${url_for('.cuchulublog_home')}" id="cuchulu_home"><i class="fa fa-home" aria-hidden="true"></i>&nbsp;&nbsp; ${lang('cuchulublog', 'home', 'Home')}</a>
                        </li><li>
                            <a href="${url_for('.cuchulublog_projects')}" id="cuchulu_projects"><i class="fa fa-globe" aria-hidden="true"></i>&nbsp;&nbsp; ${lang('cuchulublog', 'projects', 'Projects')}</a>
                        </li><li>
                            <a href="${url_for('.cuchulublog_all_posts')}" id="cuchulu_blog"><i class="fa fa-comments" aria-hidden="true"></i>&nbsp;&nbsp; ${lang('cuchulublog', 'blog', 'Blog')}</a>
                        </li><li>
                            <a href="${url_for('.cuchulublog_contact')}" id="cuchulu_contact"><i class="fa fa-envelope-o" aria-hidden="true"></i>&nbsp;&nbsp; ${lang('cuchulublog', 'contact', 'Contact')}</a>
                        </li><li>
                            <a href="${url_for('.cuchulublog_about')}" id="cuchulu_about"><i class="fa fa-info" aria-hidden="true"></i>&nbsp;&nbsp; ${lang('cuchulublog', 'about', 'About')}</a>
                        </li>
                    </ul>
                </nav>
                </div>
            </div>
        <nav id="nav_mobile" style="display:none;">
            <ul>
                <li>
                    <a href="${url_for('.cuchulublog_home')}"><i class="fa fa-home" aria-hidden="true"></i>&nbsp;&nbsp; ${lang('cuchulublog', 'home', 'Home')}</a>
                </li>
                <li>
                    <a href="${url_for('.cuchulublog_projects')}"><i class="fa fa-globe" aria-hidden="true"></i>&nbsp;&nbsp; ${lang('cuchulublog', 'projects', 'Projects')}</a>
                </li>
                <li>
                    <a href="${url_for('.cuchulublog_all_posts')}"><i class="fa fa-comments" aria-hidden="true"></i>&nbsp;&nbsp; ${lang('cuchulublog', 'blog', 'Blog')}</a>
                </li>
                <li>
                    <a href="${url_for('.cuchulublog_contact')}"><i class="fa fa-envelope-o" aria-hidden="true"></i>&nbsp;&nbsp; ${lang('cuchulublog', 'contact', 'Contact')}</a>
                </li>
                <li>
                    <a href="${url_for('.cuchulublog_about')}"><i class="fa fa-info" aria-hidden="true"></i>&nbsp;&nbsp; ${lang('cuchulublog', 'about', 'About')}</a>
                </li>
            </ul>
        </nav>
        <div id="content_home">
    <%block name="content">
            
                <div align="center" style="padding-top:40px;">
                    <img src="${make_media_url('images/logo.png', 'cuchulublog')}" width="75" height="75" alt="Cuchulu logo" />
                    <h1>${lang('cuchulublog', 'welcome_to_cuchulu', 'Welcome to cuchulu.com!!!')}</h1>
                    <p>
                    ${lang('cuchulublog', 'cuchulu_is_set_projects', 'Cuchulu.com is a set of projects of Antonio de la Rosa, a coder and Linux sysadmin from Spain.')}
                    </p>
                    <p>
                    ${lang('cuchulublog', 'you_can_find_multiple', 'You can find multiple utilities for Linux administration, cloud systems, monitoritation tools and more.')}
                    </p>
                    <p>
                    ${lang('cuchulublog', 'of_course_if_you_need', 'Of course, if you need Linux admin services, create an App or other computer enginering services, you can <a href="">contact me</a>.')|n}
                    </p>
                    <%include file="mantained_projects.phtml" />
                    <section id="blog_section">
                    <h2>${lang('cuchulublog', 'blog_last_posts', 'Blog - Last posts')}</h2>
                    <article style="display:none;" class="tpl_post">
                        <header>
                          <h1 class="blog_post_name">Apple</h1>
                          <p>${lang('cuchulublog', 'published', 'Published')}: <time pubdate="pubdate" class="date_post">09/10/2009</time></p>
                        </header>
                        <div class="content_post">
                        </div>
                        <footer>
                          <!--<p><small>Licencia Creative Commons Reconocimiento-Compartir bajo la misma</small></p>-->
                          <p><a href="#" class="url_post">${lang('cuchulublog', 'read_more', 'Read more')}</a></p>
                        </footer>
                    </article>
                    <br clear="all" />
                </section>

                </div>
            <!--<div class="column_left" id="nav_column_left">
                <nav id="nav_column">
                    <ul>
                        <li>Home</li>
                    </ul>
                </nav>
            </div>-->
    </%block>
    </div>
    <footer id="footer_page">
        &copy; Antonio de la Rosa - <a href="${url_for('.cuchulublog_about')}">About</a>
    </footer>
        </div>
    </div>
    <script language="Javascript" src="${make_media_url('js/jquery.min.js', 'admin')}"></script>
    <script>
        $('a#nav_button').click(function () {
        
            if($('#nav_mobile').css('display')=='none') {
                
               $('#nav_mobile').show(); 
                
            }
            else {
                
                $('#nav_mobile').hide();
                
            }
        
            return false;
        
        });
        
        base_url="${base_url}";
    
        menu={'': '#cuchulu_home','home': '#cuchulu_home', 'projects': '#cuchulu_projects', 'blog': '#cuchulu_blog', 'contact': '#cuchulu_contact', 'about': '#cuchulu_about'};
        
        page=location.pathname.replace(base_url, '')
        
        $(menu[page]).addClass('title_menu');
        
    </script>
    <%block name="js_footer">
    <script>
        
        <%

        from paramecio2.libraries.i18n import I18n

        lang_default=I18n.default_lang

        %>        
        
        var lang_default="${lang_default}";
        
        $.ajax({
            url: "${url_for('blog_app.get_last_posts')}",
            data: {},
            success: function (data) {
                
                for(i in data) {
                
                    var tpl=$('.tpl_post').clone().appendTo('#blog_section');
                    
                    tpl.removeClass('tpl_post');
                    
                    tpl.attr('id', 'tpl_post_'+data[i].id);
                    
                    tpl.find('.blog_post_name').html(JSON.parse(data[i].title)[lang_default]);
                    tpl.find('.content_post').html(JSON.parse(data[i].lead)[lang_default]);
                    
                    //console.log(data[i].date.replace(' 00:00:00', '').replace(/-/g, '/'));
                    
                    var date_post=data[i].date.replace(' 00:00:00', '').replace(/-/g, '/');
                    
                    tpl.find('.date_post').html(date_post);
                    
                    tpl.find('.url_post').attr('href', '/blog/'+date_post+'/'+data[i].slugify+'/'+data[i].id);
                    
                    tpl.show();
                
                }
                
            },
            dataType: 'json'
        });
        
    </script>
    </%block>
    </body>
</html>
