{% extends "base.html" %}

{% block html_lang %}{{ article.lang }}{% endblock %}
{% block head %}
    {% block title %}
        <title>{{ article.title }} - {{SITENAME}}</title>
    {% endblock %}
    {{ super() }}
    {% import 'translations.html' as translations with context %}
    {% if translations.entry_hreflang(article) %}
        {{ translations.entry_hreflang(article) }}
    {% endif %}

    {% if article.styles %}
        {% for style in article.styles %}
            {{ style|format(SITEURL) }}
        {% endfor %}
    {% endif %}
    {% if article.js %}
        {% for script in article.js %}
            {% if 'top' in script[-7:] %}
                {{ script[:-5]|format(SITEURL) }}
            {% endif %}
        {% endfor %}
    {% endif %}
    {% block seo %}
        {% set seo_description = article.summary|striptags %}
        {% set SEO_DESC_LENGTH = 175 %}
        {% if seo_description|length >= SEO_DESC_LENGTH %}
            {# Quita la última palabra para no dejarla incompleta #}
            {% set seo_description = seo_description[:SEO_DESC_LENGTH].split(' ')[:-1]|join(' ') %}
            {% if not seo_description[-1] in ['.', '?', ':', '!'] %}
                {% set seo_description = seo_description + '…' %}
            {% endif %}
        {% endif %}
        <!-- Meta Article -->
        <meta name="author" content="{{ article.author.name }}"/>
        <meta name="description" content="{{ seo_description }}"/>
        <meta name="keywords" content="{{ article.tags|join(', ') }}"/>
        <meta property="article:author" content="{{ article.author }}"/>
        <meta property="article:section" content="{{ article.category }}"/>
        <meta property="article:published_time" content="{{ article.date.strftime("%Y-%m-%d-T%H-%M-%S") }}"/>
        {% if article.modified %}
            <meta property="article:modified_time" content="{{ article.modified.isoformat() }}"/>
        {% endif %}

        <!-- OpenGraph -->
        <meta property="og:type" content="article"/>
        <meta property="og:tag" content="{{ article.tags|join(',')|escape }}"/>
        <meta property="og:title" content="{{ article.title }} - {{ SITENAME }}"/>
        <meta property="og:description" content="{{ seo_description }}"/>
        <meta property="og:site_name" content="{{ SITENAME }}"/>
        <meta property="og:url" content="{{ SITEURL }}/{{ article.url }}"/>
        <meta property="og:image" content="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/../wp-content/uploads/article/poster/{{ article.image }}"/>

        <!-- Twitter -->
        <meta name="twitter:card" content="summary"/>
        <meta name="twitter:title" content="{{ article.title }} - {{ SITENAME }}"/>
        <meta name="twitter:description" content="{{ seo_description }}"/>
        <meta name="twitter:url" content="{{ SITEURL }}/{{ article.url }}"/>
        <meta name="twitter:image" content="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/../wp-content/uploads/article/poster/{{ article.image }}"/>
    {% endblock %}
{% endblock %}

{% block content %}
    <div class="container">
        <!-- start of posts -->
        <div class="columns is-multiline is-centered">
            <!-- start of post -->
            <article class="column is-10">
                <div class="card">

                    <!-- post header -->
                    <div class="card-content-header">
                        <h2 class="title is-4 has-text-centered" id="titulo">{{ article.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">
                                    {% if article.toc %}
                                        <nav class="toc">
                                            {{ article.toc }}
                                        </nav>
                                    {% endif %}

                                    {{ article.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['mastodom'] }}">
                                            <span class="soumaicon">
                                                <svg>
                                                    <use href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/icons/master.svg#mastodom" />
                                                    <title>Mastodom</title>
                                                </svg>
                                            </span>
                                        </a>
                                    </div>
                                    <!-- post footer nav -->
                                    {% include 'article_info.html' %}
                                    <!-- end of post footer nav -->
                                </div>
                                <!-- end of post footer -->
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end of post content -->

                <!-- post comments -->
                {% include 'comments.html' %}
                <!-- end of comments -->

            </article>
            <!-- end of post -->
        </div>
        <!-- end of post column -->
    </div>
{% endblock %}