{% extends "base.html" %}

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

{% block extra_head %}
    <meta name="author" content="{{ article.author }}">
    <meta name="keywords" content="{{ article.tags|join(',')|escape }}">
{% endblock %}

{% block head %}
    {{ super() }}
    {% import 'translations.html' as translations with context %}
    {% if translations.entry_hreflang(article) %}
        {{ translations.entry_hreflang(article) }}
    {% endif %}
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta property="og:title" content="{{ article.title }}">
    <meta property="og:type" content="article">
    <meta property="og:url" content="{{ SITEURL }}/{{ article.url }}">
    <meta property="article:published_time" content="{{ article.date.isoformat() }}">
    {% if article.modified %}
        <meta property="article:modified_time" content="{{ article.modified.isoformat() }}">
    {% endif %}
    <meta property="article:section" content="{{ article.category }}">
    {% set og_description = article.summary.split(ANOTHER_READ_MORE_LINK_FORMAT[:6])[0][3:]|striptags|escape %}
    {% set OG_DESC_LENGTH = 175 %}
    {% if og_description|length >= OG_DESC_LENGTH %}
        {# Quita la última palabra para no dejarla incompleta #}
        {% set og_description = og_description[:OG_DESC_LENGTH].split(' ')[:-1]|join(' ') %}
        {% if not og_description[-1] in ['.', '?', ':', '!'] %}
            {% set og_description = og_description + '…' %}
        {% endif %}
    {% endif %}
    <meta property="og:description" content="{{ og_description }}">
    {% if article.image %}
        <meta property="og:image" content="{{ article.image.split('"')[1] }}">
    {% endif %}
    {% for tag in article.tags %}
        <meta property="og:tag" content="{{ tag | escape }}">
    {% endfor %}

    {% 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 %}


{% endblock %}

{% block title %}{{ article.title|striptags }}{% endblock %}

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

                    <!-- post header -->
                    <div class="card-content-header">
                        <h4 class="title is-4 has-text-centered">{{ article.title }}</h4>
                    </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">
                                    {{ 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 -->
                                    <div class="columns">
                                        <div class="column has-text-left">
                                            <a class="button is-small is-button-grey" href="{{ SITEURL }}/">{{ _('Regresar al Inicio') }}</a>
                                        </div>
                                        <div class="column has-text-right">
                                            <span class="soumaicon">
                                                <svg>
                                                    <use href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/icons/master.svg#calendar" />
                                                </svg>
                                            </span>
                                            {% set año = article.date|strftime('%Y') %}
                                            {% set mes = article.date|strftime('%m') %}
                                            {% set nombre_mes = article.date|strftime('%B') %}
                                            <time class="entry-date published"
                                                  datetime="{{ article.date.isoformat() }}">
                                                <small>
                                                    {{ article.date|strftime('%a %-d') }}
                                                    <a href="{{ SITEURL }}/archives/{{ año }}/{{ mes }}/"
                                                       title="{% trans %}Artículos de {{ nombre_mes }} de {{ año }}{% endtrans %}">
                                                        {{ nombre_mes }}
                                                    </a>
                                                    <a href="{{ SITEURL }}/archives/{{ año }}/"
                                                       title="{% trans %}Artículos de {{ año }}{% endtrans %}">{{ año }}
                                                    </a>
                                                </small>
                                            </time>

                                            {% if not HIDE_AUTHORS and article.authors %}
                                                <span class="soumaicon">
                                                    <svg>
                                                        <use href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/icons/master.svg#user"/>
                                                    </svg>
                                                </span>
                                                {% for author in article.authors %}
                                                    <small>
                                                        <a href="{{ SITEURL }}/{{ author.url }}">{{ author }}</a>{% if not loop.last %}, {% endif %}
                                                    </small>
                                                {% endfor %}
                                            {% endif %}

                                        </div>
                                    </div>
                                    <!-- end of post footer nav -->
                                </div>
                                <!-- end of post footer -->
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end of post content -->

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