<!DOCTYPE html>
<html lang="{% block html_lang %}{{ DEFAULT_LANG }}{% endblock %}">
    <head prefix="og: http://ogp.me/ns# {% if article %}article: http://ogp.me/ns/article#{% endif%}">
        {% block head %}
            <meta charset="UTF-8"/>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>{% block title %}{{ SITENAME }}{% endblock title %}</title>
            <!-- Metas -->
            {% block extra_head %}
                {% set SITE_DESCRIPTION = _('Sitio web que trata temas diversos relacionados con la libertad, como la cultura libre y el software libre.') %}
                <meta http-equiv="X-UA-Compatible" content="ie=edge">
                <meta name="description" content="{{ SITE_DESCRIPTION }}">
                <meta name="keywords" content="{{ _('software libre,libertad,libertad de expresión,privacidad,formación,tutoriales,guías,GNU/Linux,desarrollo web,Hyperbola') }}">
                <meta property="og:title" content="{{ SITENAME }}">
                <meta property="og:type" content="website">
                <meta property="og:url" content="{{ SITEURL }}">
                <meta property="og:description" content="{{ SITE_DESCRIPTION }}">
            {% endblock %}
            <!-- fonts -->
            <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/fontawesome.css">
            <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/libresocial.css">
            <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/roboto.css">
            <!-- stylesheets -->
            <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/bulma.css">
            <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/hover.css">
            <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/style.css">
            <!-- favicon -->
            <link rel="icon" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/favicon/cl-favicon-16x16.png" sizes="16x16">
            <link rel="icon" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/favicon/cl-favicon-32x32.png" sizes="32x32">
            <link rel="icon" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/favicon/cl-favicon-96x96.png" sizes="96x96">
            <link rel="icon" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/favicon/cl-favicon-192x192.png" sizes="192x192">
            <link rel="apple-touch-icon-precomposed" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/favicon/cl-favicon-180x180.png">
        {% endblock head %}
    </head>
    <body>
        <!-- navigation -->
        <header class="navigation">
            <nav class="navbar">
	        <div class="container">
	            <!-- nav site title -->
                    <!-- Input for menu-mobile with checkbox-->
                    <input id="navbar-toggle-cbox" role="button" type="checkbox">
                    <!-- End Input for menu-mobile with checkbox-->
                    <div class="navbar-brand">

                        <a class="navbar-item" href="{{ SITEURL }}/" rel="home">
                            <h3 class="title is-3" style="color: white;">{{ SITENAME_SINGLE }}</h3>
                        </a>

                        <!-- this "navbar-burger" hamburger menu is only visible on mobile -->
                        <label class="navbar-burger" for="navbar-toggle-cbox" data-target="navMenu">
                            <span></span>
                            <span></span>
                            <span></span>
                        </label>
                        <!-- end of burger -->
                    </div>

	            <!-- this "navbar-menu" is hidden on mobile -->
                    {% if DISPLAY_PAGES_ON_MENU %}
                        <div id="navMenu" class="navbar-menu">
                            <ul class="navbar-end">
                                <li><a href="{{ SITEURL }}/" class="navbar-item is-tab {% if output_file == 'index.html' %} is-active{% endif %}">{{ _('Inicio') }}</a></li>
                                {% for p in pages %}
                                    <li><a href="{{ SITEURL }}/{{ p.url }}" class="navbar-item is-tab {% if p == page %} is-active{% endif %}">{{ p.title }}</a></li>
                                {% endfor %}
                                <li><a href="{{ SITEURL }}/{{ ARCHIVES_URL }}" class="navbar-item is-tab {% if output_file == ARCHIVES_SAVE_AS %} is-active {% endif %}">{{ _('Archivos') }}</a></li>
                                <li><a href="{{ SITEURL }}/{{ AUTHORS_URL }}" class="navbar-item is-tab {% if output_file == AUTHORS_SAVE_AS %} is-active{% endif %}">{{ _('Créditos') }}</a></li>
                            </ul>
                        </div>
                    {% endif %}
	            <!-- end of nav -->
	        </div>
            </nav>
        </header>
        <!-- end navigation -->

        <!-- page header (title, etc) -->
        <div class="main-header">
            <section class="hero">
	        <div class="hero-body">
	            <div class="container">
	                <div class="has-text-centered">
                            {%- block sitename -%}
	                        <!-- header && subheader -->
	                        <h1 class="title is-1 is-spaced">{{ SITENAME }}</h1>
	                        <h4 class="subtitle is-4">{{ SITESUBTITLE }}</h4>
                            {%- endblock -%}

                            <!-- search form -->
                            <div class="column is-6 is-offset-3">
                                <div class="box has-background-black-ter">
                                    <form class="field has-addons" action="{{ SITEURL }}/buscar.php">
                                        <div class="control is-expanded">
                                            <input class="input has-text-centered"
                                                   type="search"
                                                   name="q" required
                                                   placeholder="{{ _('» » » » » » búscame « « « « « «') }}">
                                        </div>
                                        <input class="button is-dark" name="submit" value="{{ _('Buscar') }}" type="submit">
                                    </form>
                                </div>
                            </div>
                            <!-- end search form -->

	                    <!-- end of header && subheader -->
	                </div>
	            </div>
	        </div>
            </section>
        </div>
        <!-- end page header -->

        <!-- page content -->
        <div class="main-content">
            {%- block content -%}
                <div class="container">
	            <!-- start of posts -->
                    <div class="columns is-multiline is-centered has-text-centered">
	                <!-- start of post -->
                        {% for article in articles_page.object_list %}
	                    <div class="column is-4">
	                        <div class="card">
	                            <!-- image for post -->
                                    {% if article.image %}
	                                <div class="card-image">
                                            <a href="{{ SITEURL }}/{{ article.url }}#titulo">
		                                <figure class="image ihover circle3">
                                                    <img src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/../wp-content/uploads/article/poster/{{ article.image }}" alt="{{ article.title }}">
		                                </figure>
                                            </a>
	                                </div>
                                    {% else %}
                                        <div class="card-image">
                                            <a href="{{ SITEURL }}/{{ article.url }}#titulo">
                                                <figure class="image ihover circle3">
		                                    <img src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/background/745x372.png" alt="Image">
		                                </figure>
                                            </a>
                                        </div>
                                    {% endif %}
	                            <!-- end of image for post -->

	                            <!-- post header -->
	                            <div class="card-content-header">
		                        <h4 class="title is-4"><a href="{{ SITEURL }}/{{ article.url }}#titulo">{{ article.title }}</a></h4>
	                            </div>
	                            <!-- end of post header -->

	                            <!-- post content -->
	                            <div class="card-content">
		                        <div class="content social">
		                            <div class="navbar is-social-center">
		                                <a class="navbar-item" href="">
		                                    <span class="icon">
			                                <i class="icon-gnusocial"></i>
		                                    </span>
		                                </a>
		                                <a class="navbar-item" href="">
		                                    <span class="icon">
			                                <i class="icon-diaspora"></i>
		                                    </span>
		                                </a>
		                                <a class="navbar-item" href="">
		                                    <span class="icon">
			                                <i class="icon-mastodon"></i>
		                                    </span>
		                                </a>
		                            </div>
		                        </div>

		                        <!-- post footer -->
                                        {% include "article_info.html" %}
		                        <!-- end of post footer -->
	                            </div>
                                    <!-- end of post content -->
	                        </div>
	                    </div>
                        {% endfor %}
	                <!-- end of post -->
	            </div>
	            <!-- end of posts -->
                </div>
                <!-- pagination -->
                {% include "pagination.html" %}
                <!-- end of pagination -->
            {%- endblock -%}
        </div>
        <!-- end of page content -->
        <!-- .site-content -->

        <footer class="footer footer-top-shadow">

            <!-- header nav content -->
	    <div class="navbar is-social-center">
	        <a class="navbar-item" href="">
		    <span class="icon">
		        <i class="icon-diaspora"></i>
		    </span>
	        </a>
	        <a class="navbar-item" href="">
		    <span class="icon">
		        <i class="icon-gnusocial"></i>
		    </span>
	        </a>
	        <a class="navbar-item" href="">
		    <span class="icon">
		        <i class="icon-pump"></i>
		    </span>
	        </a>
	        <a class="navbar-item" href="">
		    <span class="icon">
		        <i class="icon-pixelfed"></i>
		    </span>
	        </a>
	        <a class="navbar-item" href="">
		    <span class="icon">
		        <i class="icon-peertube"></i>
		    </span>
	        </a>
	        <a class="navbar-item" href="">
		    <span class="icon">
		        <i class="icon-mediagoblin"></i>
		    </span>
	        </a>
	        <a class="navbar-item" href="">
		    <span class="icon">
		        <i class="icon-matrix"></i>
		    </span>
	        </a>
	        <a class="navbar-item" href="">
		    <span class="icon">
		        <i class="fa fa-rss"></i>
		    </span>
	        </a>
	    </div>
	    <!-- end of header nav content -->
            <div class="container has-text-centered">
	        <span class="icon">
	            <i class="icon-libregit"></i>
	        </span>
	        <p>{{ _('Escrito por') }}
                    <a href="https://libregit.org/heckyel">libregit.org/heckyel</a>
                </p>
	        <p>{{ _('Este sitio es Software Libre') }}</p>
                <p>
                    <a href="https://libregit.org/heckyel/cl">{{ _('Código fuente') }}</a>
                    <span class="icon">
                        <i class="fa fa-code"></i>
		    </span>
                </p>
                <p>
                    <a href="{{ SITEURL }}/pages/librejs.html" data-jslicense="1">{{ _('Licencias de JavaScript') }}</a>
                </p>
            </div>
        </footer>
        <!-- end of footer -->
        <!-- navbar-burger -->
        <script src="{{ SITEURL}}/{{ THEME_STATIC_DIR }}/js/navbar-burger.js"></script>
        <!-- end of navbar-burger -->
        {% if article %}
            {% if article.js %}
                {% for script in article.js %}
                    {% if 'bottom' in script[-7:] %}
                        {{ script[:-8]|format(SITEURL) }}
                    {% endif %}
                {% endfor %}
            {% endif %}
        {% endif %}

        {% if page %}
            {% if page.js %}
                {% for script in page.js %}
                    {% if 'bottom' in script[-7:] %}
                        {{ script[:-8]|format(SITEURL) }}
                    {% endif %}
                {% endfor %}
            {% endif %}
        {% endif %}
    </body>
</html>
