{% 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 %}
    <!-- page content -->
    <div class="main-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="">
			                        <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>
		                        <!-- 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">
			                        <i class="fa fa-calendar">
                                                    {% 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>
			                        </i>
			                    </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>
    </div>
    <!-- end of page content -->
{% endblock %}