{# {%  import 'pcs/comments.html' as pcs with context %} #}
{% 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_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 -->
            <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 -->
                                    <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 }}"
                                                           title="{% trans %}Autor del artículo{% endtrans %}">{{ 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 -->

                <!-- post comments -->
                <div class="comments-content">
                    <!-- comment header -->
                    <div class="comments-header has-text-centered">
                        <h4 class="title is-4">{{ _('Comentarios') }} </h4>
                    </div>

                    <div class="comments-wrapper">
                        <!-- comments content -->
                        <div class="comments-content">
                            <!-- end of comment header -->
                            {% if article.comments %}
                                {% for comment in article.comments %}
                                    <!-- start of comment -->
                                    <div class="media" id="comment-{{comment.slug}}">
                                        <!-- comment user image -->
                                        <figure class="media-left">
                                            <p class="image is-64x64">
                                                {% if comment.avatar %}
                                                    <img src="{{ comment.avatar }}"
                                                         alt="{{ comment.author }}"
                                                         title="{{ comment.author }}">
                                                {% else %}
                                                    <img src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/avatar/avatar.png"
                                                         alt="{{ comment.author }}"
                                                         title="{{ comment.author }}">
                                                {% endif %}
                                            </p>
                                        </figure>

                                        <!-- end of comment user image -->
                                        <!-- comment content -->
                                        <div class="media-content">
                                            <div class="content">
                                                {% if comment.web %}
                                                    <p>
                                                        <strong>
                                                            <a href="{{ comment.web }}"
                                                               rel="noopener noreferrer"
                                                               target="_blank">{{ comment.author }}</a>
                                                        </strong>
                                                    </p>
                                                {% else %}
                                                    <p><strong>{{ comment.author }}</strong></p>
                                                {% endif %}
                                                {{ comment.content }}
                                                <small><a href="{{ SITEURL }}/{{ article.url }}#comment-{{comment.slug}}">Permalink</a>
                                                    | {{ comment.date }}</small>
                                            </div>
                                        </div>
                                        <!-- end of comment content -->
                                    </div>
                                    <!-- end of comments -->
                                {% endfor %}
                            {% endif %}

                            <!-- form begin -->
                            <form class="media" id="commentform" method="POST" action="{{ SITEURL }}/vendor/form-comments/commentsubmit.php">
                                <input type="hidden" name="post_id" value="{{ article.url }}">
                                <input type="hidden" name="return_url" value="{{ SITEURL }}/{{ article.url }}" />
                                <figure class="media-left">
                                    <p class="image is-64x64">
                                        <img src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/avatar/avatar.png" alt="placeholder">
                                    </p>
                                </figure>
                                <div class="media-content">
                                    <div class="field">
                                        <div class="control">
                                            <input class="input" type="text" placeholder="{{ _('Su nombre o nick') }}" name="name">
                                        </div>
                                    </div>
                                    <div class="field">
                                        <div class="control">
                                            <input class="input" type="email"
                                                   placeholder="{{ _('E-mail (requerido, no será publicado)') }}"
                                                   name="email">
                                        </div>
                                    </div>
                                    <div class="field">
                                        <div class="control">
                                            <input class="input" type="url"
                                                   placeholder="{{ _('Su sitio web (opcional)') }}"
                                                   name="link">
                                        </div>
                                    </div>
                                    <div class="field">
                                        <p class="control">
                                            <textarea class="textarea" placeholder="{{ _('Agrega un comentario...') }}" name="comment"></textarea>
                                        </p>
                                    </div>
                                    <div class="field">
                                        <div class="control">
                                            <p>{{ _('Puede formatear su comentario con') }}
                                                <a href="https://en.wikipedia.org/wiki/Markdown"
                                                   rel="noopener noreferrer" target="_blank">Markdown</a>.
                                            </p>
                                        </div>
                                    </div>
                                    <div class="field">
                                        <p class="control">
                                            <button class="button is-button-grey" name="submit">{{ _('Enviar comentario') }}</button>
                                            <!-- Política de Uso -->
                                            {% if DEFAULT_LANG == 'en' %}
                                                <a href="{{ SITEURL}}/pages/politica-de-uso-es.html">{{ _('Política de uso') }}</a>
                                            {% elif DEFAULT_LANG == 'fr' %}
                                                <a href="{{ SITEURL}}/pages/politica-de-uso-es.html">{{ _('Política de uso') }}</a>
                                            {% else %}
                                                <a href="{{ SITEURL}}/pages/politica-de-uso.html">{{ _('Política de uso') }}</a>
                                            {% endif %}
                                            <!-- /Política de Uso -->
                                        </p>
                                    </div>
                                </div>
                            </form>
                            <!-- form end -->
                        </div>
                    </div>
                </div>
                <!-- end of comments -->

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