{% 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 extra_comment %}
    <link href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/modules/plyr/plyr.css" rel="stylesheet">
{% endblock %}

{% block head %}
    {{ super() }}
    {% import 'translations.html' as translations with context %}
    {% if translations.entry_hreflang(article) %}
        {{ translations.entry_hreflang(article) }}
    {% endif %}
    <meta property="og:title" content="{{ article.title }}">
    <meta itemprop="name" content="{{ article.title }}">
    <meta property="og:type" content="video.movie">
    <meta property="og:url" content="{{ SITEURL }}/{{ article.url }}">
    <meta property="video:release_date" content="{{ article.date.isoformat() }}">
    <meta itemprop="uploadDate" 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="{{ article.summary|striptags|escape }}"/>
    <meta itemprop="description" content="{{ article.summary|striptags|escape }}"/>
    {% if article.image %}
        <meta property="og:image" content="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/../wp-content/uploads/article/poster/{{ article.image }}"/>
        <meta itemprop="thumbnailURL" content="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/../wp-content/uploads/article/poster/{{ article.image }}">
    {% elif OPEN_GRAPH_IMAGE %}
        <meta property="og:image" content="{{ SITEURL }}/{{ OPEN_GRAPH_IMAGE }}"/>
    {% endif %}
    <!-- videograph -->
    {% if article.og_video %}
        <meta property="og:video" content="{{ article.og_video }}">
        <meta property="og:video:secure_url" content="{{ article.og_video }}">
        <meta property="og:video:type" content="video/webm">
        <meta property="og:video:width" content="400">
        <meta property="og:video:height" content="300">
    {% endif %}
    <!-- /videograph -->
    {% for tag in article.tags %}
        <meta property="og:video:tag" content="{{ tag | escape }}">
    {% endfor %}

    {% if article.styles %}
        {% for style in article.styles %}
            {{ style }}
        {% endfor %}
    {% endif %}

{% endblock %}

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

{%- block content -%}
    <!-- Main -->
    <div class="row mt-3 mt-10">
        <div class="col-md-12">
            <div class="row mr-3">
                <article class="col-md-8">

                    <!-- dinamic article content  -->
                    <div class="ml-3">
                        {{ article.content }}
                    </div>
                    <!-- End dinamic article content  -->

                    <!-- Author -->
                    <div class="ml-3">
                        <hr class="hr-author">

                        <p class="mb-0">
                            {% if not HIDE_AUTHORS and article.authors %}
                                <span class="soumaicon text-info">
                                    <svg>
                                        <use href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/svg/master.svg#user" />
                                    </svg>
                                </span>
                                {% for author in article.authors %}
                                    <a class="link-author" href="{{ SITEURL }}/{{ author.url }}" title="{{ author }}">{{ author }}</a>
                                    <span class="style-scope">
                                        <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false">
                                            <g>
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10 S17.52,2,12,2z M9.92,17.93l-4.95-4.95l2.05-2.05l2.9,2.9l7.35-7.35l2.05,2.05L9.92,17.93z" class="style-scope yt-icon"></path>
                                            </g>
                                        </svg>
                                    </span>
                                {% endfor %}
                            {% endif %}
                        </p>

                        <!-- time publish -->
                        {% 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>
                                {{ _('Publicado el') }}
                                {{ article.date|strftime('%a %-d') }}
                                <a class="text-info" href="{{ SITEURL }}/archives/{{ año }}/{{ mes }}/"
                                   title="{% trans %}Vídeos de {{ nombre_mes }} de {{ año }}{% endtrans %}">
                                    {{ nombre_mes }}
                                </a>
                                {{ _('de') }}
                                <a class="text-secondary" href="{{ SITEURL }}/archives/{{ año }}/"
                                   title="{% trans %}Vídeos de {{ año }}{% endtrans %}">{{ año }}
                                </a>
                            </small>
                        </time>
                        <!-- /time publish -->

                        <hr class="hr-author">
                    </div>
                    <!-- /Author -->

                    <!-- Comments -->
                    <div id="hashover" class="comments-container mt-4 ml-3">
                        <script src="/hashover-next/comments.php"></script>
                        <noscript>
                            <p>{% trans trimmed abre_enlace='<a href="mailto:heckyel@hyperbola.info?subject=Comentario_«%(titulo_art)s»">'|format(titulo_art=article.title|replace(' ', '%20')), cierra_enlace='</a>' %}
                                Lo siento, el sistema de comentarios no funciona sin JavaScript. Si
                                deseas, puedes {{ abre_enlace }} enviar tu comentario por correo
                                electrónico {{ cierra_enlace }}. El comentario será publicado en el espacio
                                reservado a comentarios de esta página.{% endtrans %}</p>
                        </noscript>
                    </div>
                    <!--End Comments -->

                </article>

                {% if SHOW_RECENT_POSTS %}

                    <div class="col-md-4">
                        <!-- article video 1 -->

                        {% for article in articles[:SHOW_RECENT_POSTS] %}
                            <article class="row justify-content-center align-items-center mt-1">
                                <!-- video next -->
                                <div class="col-md-6 mini">
                                    <a href="{{ SITEURL }}/{{ article.url }}">
                                        <div class="area">
                                            <div class="mask">

                                                <div class="vertical-align">
                                                    <i class="soumaicon play"><svg><use href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/svg/master.svg#play"/></svg></i>
                                                </div> <!-- End Vertical Align -->

                                            </div> <!-- End Mask / Hover -->

                                            {% if article.image %}
                                                <img src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/../wp-content/uploads/article/poster/{{ article.image }}" alt="{{ article.title }}" class="img-fluid">
                                            {% else %}
                                                <img src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/video.png" alt="video" class="img-fluid">
                                            {% endif %}

                                            {% if article.time %}
                                                <span class="duration">{{ article.time }}</span>
                                            {% else %}
                                                <span class="duration">{{ ('00:00') }}</span>
                                            {% endif %}

                                        </div> <!-- End Area -->
                                    </a>
                                </div>
                                <!-- video next -->

                                <!-- description -->
                                <div class="col-md-6">
                                    <h6><a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="{{ _('Ver %(articulo)s', articulo=article.title|striptags) }}">{{ article.title }}</a></h6>
                                    {% include "article_info_aside.html" %}
                                </div>
                            </article>
                        {% endfor %}

                    </div>
                {% endif %}

            </div>
        </div>
    </div>
    <!-- End Main -->
{%- endblock -%}

{% block extend_js %}
    <!-- Plyr -->
    <script src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/modules/plyr/plyr.min.js"
            integrity="sha512-Ci6lyxuIH1x0UIgsxN5MBKtQJ6PnR4iQwgMwVOeMjs8IzH7cTyBe7lsTjYqT6s53SXpc83qbvXBCEvWFgjH73A=="></script>
    <script src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/play.js"
            integrity="sha512-BN/U40V0xjbqvTnUUjG/FcqGUeUmmulDL6WF+uqVx8a4wRwaJQrEU/gg17P6wAiC3WhDCNxUvn9/NS65LvuJCg=="></script>
    <!-- /Plyr -->
{% endblock %}