{% extends "base.html" %}

{% block html_lang %}{{ page.lang }}{% endblock%}

{% block head %}
    {% block title %}
        <title>{{ page.title }} - {{SITENAME}}</title>
    {% endblock %}
    {% import 'translations.html' as translations with context %}
    {% if translations.entry_hreflang(page) %}
        {{ translations.entry_hreflang(page) }}
    {% endif %}
    {{ super() }}
    {% if page.styles %}
        {% for style in page.styles %}
            {{ style|format(SITEURL) }}
        {% endfor %}
    {% endif %}
    {% if page.js %}
        {% for script in page.js %}
            {% if 'top' in script[-7:] %}
                {{ script[:-5]|format(SITEURL) }}
            {% endif %}
        {% endfor %}
    {% endif %}
    {% block seo %}
        <!-- Meta Page -->
        <meta name="description" content="{{ page.title }} - {{ SITENAME }}"/>
        <meta name="author" content="{{ page.author }}"/>

        <!-- OpenGraph -->
        <meta property="og:type" content="article"/>
        <meta property="og:title" content="{{ page.title }}"/>
        <meta property="og:description" content="{{ page.title }} - {{ SITENAME }}"/>
        <meta property="og:site_name" content="{{ SITENAME }}"/>
        <meta property="og:url" content="{{ SITEURL }}/{{ page.url }}"/>

        <!-- Twitter -->
        <meta name="twitter:card" content="summary"/>
        <meta name="twitter:title" content="{{ page.title }}"/>
        <meta name="twitter:description" content="{{ page.title }} - {{ SITENAME }}"/>
        <meta name="twitter:url" content="{{ SITEURL }}/{{ page.url }}"/>
    {% endblock %}
{% endblock %}

{% block content %}
    <div class="container">
        <!-- start of pages -->
        <div class="columns is-multiline is-centered">
            <!-- start of page -->
            <div class="column is-7" itemscope itemtype="https://schema.org/CreativeWork">
                <div class="card">
                    <!-- post header -->
                    <div class="card-content-header">
                        <h2 class="title is-4 has-text-centered" itemprop="name">{{ page.title }}</h2>
                    </div>
                    <!-- end of post header -->
                    <!-- post content -->
                    <div class="card-content">
                        <div class="content">
                            <div class="card-inner-wrapper">
                                <!-- post text -->
                                <div class="card-content-text has-text-justified">
                                    {{ page.content }}
                                </div>
                                <!-- end of post text -->

                                <!-- post footer -->
                                <div class="card-content-footer-small">
                                    <div class="navbar is-social-center">
                                        <a class="navbar-item" href="{{ SOCIAL['gnusocial'] }}">
                                            <span class="soumaicon">
                                                <svg>
                                                    <use href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/icons/master.svg#gnusocial" />
                                                    <title>GNUSocial</title>
                                                </svg>
                                            </span>
                                        </a>
                                        <a class="navbar-item" href="{{ SOCIAL['diaspora'] }}">
                                            <span class="soumaicon">
                                                <svg>
                                                    <use href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/icons/master.svg#diaspora" />
                                                    <title>Diaspora</title>
                                                </svg>
                                            </span>
                                        </a>
                                        <a class="navbar-item" href="{{ SOCIAL['mastodon'] }}">
                                            <span class="soumaicon">
                                                <svg>
                                                    <use href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/icons/master.svg#mastodon" />
                                                    <title>Mastodon</title>
                                                </svg>
                                            </span>
                                        </a>
                                    </div>
                                    <!-- post footer nav -->
                                    <footer class="columns">
                                        <div class="column has-text-left">
                                            <a class="button is-small is-button-grey" href="{{ SITEURL }}/">{{ _('Regresar al Inicio') }}</a>
                                        </div>
                                        {% import 'translations.html' as translations with context %}
                                        {% if translations.translations_for(page) %}
                                            <div class="column has-text-right">
                                                <span class="soumaicon">
                                                    <svg>
                                                        <use href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/icons/master.svg#translate" />
                                                    </svg>
                                                </span>
                                                <small>
                                                    {{ translations.translations_for(page) }}
                                                </small>
                                            </div>
                                        {% endif %}
                                    </footer>
                                    <!-- end of post footer nav -->
                                </div>
                                <!-- end of post footer -->
                            </div>
                        </div>
                    </div>
                    <!-- end page content -->
                </div>
            </div>
            <!-- end of page -->
        </div>
        <!-- end of pages -->
    </div>
{% endblock %}
