{% 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 %}
    <!-- plyr -->
    <link href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/modules/plyr/plyr.css" rel="stylesheet">
    <!--/ plyr -->
    {% if article.styles %}
        {% for style in article.styles %}
            {{ style }}
        {% endfor %}
    {% endif %}
    {% block seo %}
        {% set seo_description = article.summary|striptags %}
        {% set SEO_DESC_LENGTH = 160 %}
        {% 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_more = seo_description + '…' %}
                {% set seo_description = seo_more|replace('"','') %}
            {% endif %}
        {% endif %}
        <!-- Article Image -->
        {% set article_image = "%s/%s/../wp-content/uploads/article/thumbnail/%s" % (SITEURL, THEME_STATIC_DIR, article.image) %}
        <!-- Meta Article -->
        <meta name="author" content="{{ article.author }}"/>
        <meta name="description" content="{{ seo_description|striptags }}"/>
        <meta name="keywords" content="{{ article.tags|join(',')|escape }}"/>
        <!-- Schema -->
        <meta itemprop="name" content="{{ article.title }}"/>
        <meta itemprop="description" content="{{ seo_description|striptags }}"/>
        <meta itemprop="uploadDate" content="{{ article.date.isoformat() }}"/>
        <meta itemprop="thumbnailURL" content="{{ article_image }}"/>
        <!-- OpenGraph -->
        <meta property="article:section" content="{{ article.category }}"/>
        <meta property="video:release_date" content="{{ article.date.isoformat() }}"/>
        {% if article.modified %}
            <meta property="article:modified_time" content="{{ article.modified.isoformat() }}"/>
        {% endif %}
        <meta property="og:title" content="{{ article.title }}"/>
        <meta property="og:type" content="video.movie"/>
        <meta property="og:url" content="{{ SITEURL }}/{{ article.url }}"/>
        <meta property="og:description" content="{{ seo_description|striptags }}"/>
        <meta property="og:image" content="{{ article_image }}"/>
        {% for tag in article.tags %}
            <meta property="og:video:tag" content="{{ tag | escape }}"/>
        {% endfor %}
        {% if article.og_video %}
            <!-- videograph -->
            <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"/>
            <!-- /videograph -->
        {% endif %}
        <!-- Twitter -->
        <meta name="twitter:card" content="summary"/>
        <meta name="twitter:title" content="{{ article.title }} - {{ SITENAME }}"/>
        <meta name="twitter:description" content="{{ seo_description|striptags }}"/>
        <meta name="twitter:url" content="{{ SITEURL }}/{{ article.url }}"/>
        <meta name="twitter:image" content="{{ article_image }}"/>
    {% endblock %}
{% endblock %}

{% block menu_header %} <!-- empty -->{% endblock menu_header %}

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

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

                    <!-- License -->
                    <div class="d-flex align-items-center ml-3">
                        <h6 class="mr-3 font-weight-bold">{{ _('Licencia') }}</h6>
                        {% if article.license ==  LICENSE['allrights']['name'] %}
                            <!-- allrights -->
                            <a>{{ article.license }}</a>
                            <!-- cc - version 4 -->
                        {% elif article.license ==  LICENSE['ccby4']['name']%}
                            <!-- ccby4 -->
                            <a href="{{ LICENSE['ccby4']['url'] }}" rel="noopener noreferrer" target="_blank"><abbr title="{{ LICENSE['ccby4']['fullname'] }}">{{ article.license }}</abbr></a>
                        {% elif article.license ==  LICENSE['ccbysa4']['name']%}
                            <!-- ccbysa4 -->
                            <a href="{{ LICENSE['ccbysa4']['url'] }}" rel="noopener noreferrer" target="_blank"><abbr title="{{ LICENSE['ccbysa4']['fullname'] }}">{{ article.license }}</abbr></a>
                        {% elif article.license ==  LICENSE['ccbynd4']['name']%}
                            <!-- ccbynd4 -->
                            <a href="{{ LICENSE['ccbynd4']['url'] }}" rel="noopener noreferrer" target="_blank"><abbr title="{{ LICENSE['ccbynd4']['fullname'] }}">{{ article.license }}</abbr></a>
                        {% elif article.license ==  LICENSE['ccbync4']['name']%}
                            <!-- ccbync4 -->
                            <a href="{{ LICENSE['ccbync4']['url'] }}" rel="noopener noreferrer" target="_blank"><abbr title="{{ LICENSE['ccbync4']['fullname'] }}">{{ article.license }}</abbr></a>
                        {% elif article.license ==  LICENSE['ccbyncsa4']['name']%}
                            <!-- ccbyncsa4 -->
                            <a href="{{ LICENSE['ccbyncsa4']['url'] }}" rel="noopener noreferrer" target="_blank"><abbr title="{{ LICENSE['ccbyncsa4']['fullname'] }}">{{ article.license }}</abbr></a>
                        {% elif article.license ==  LICENSE['ccbyncnd4']['name']%}
                            <!-- ccbyncnd4 -->
                            <a href="{{ LICENSE['ccbyncnd4']['url'] }}" rel="noopener noreferrer" target="_blank"><abbr title="{{ LICENSE['ccbyncnd4']['fullname'] }}">{{ article.license }}</abbr></a>
                            <!-- cc - version 3 -->
                        {% elif article.license ==  LICENSE['ccby3']['name']%}
                            <!-- ccby3 -->
                            <a href="{{ LICENSE['ccby3']['url'] }}" rel="noopener noreferrer" target="_blank"><abbr title="{{ LICENSE['ccby3']['fullname'] }}">{{ article.license }}</abbr></a>
                        {% elif article.license ==  LICENSE['ccbysa3']['name']%}
                            <!-- ccbysa3 -->
                            <a href="{{ LICENSE['ccbysa3']['url'] }}" rel="noopener noreferrer" target="_blank"><abbr title="{{ LICENSE['ccbysa3']['fullname'] }}">{{ article.license }}</abbr></a>
                        {% elif article.license ==  LICENSE['ccbynd3']['name']%}
                            <!-- ccbynd3 -->
                            <a href="{{ LICENSE['ccbynd3']['url'] }}" rel="noopener noreferrer" target="_blank"><abbr title="{{ LICENSE['ccbynd3']['fullname'] }}">{{ article.license }}</abbr></a>
                        {% elif article.license ==  LICENSE['ccbync3']['name']%}
                            <!-- ccbync3 -->
                            <a href="{{ LICENSE['ccbync3']['url'] }}" rel="noopener noreferrer" target="_blank"><abbr title="{{ LICENSE['ccbync3']['fullname'] }}">{{ article.license }}</abbr></a>
                        {% elif article.license ==  LICENSE['ccbyncsa3']['name']%}
                            <!-- ccbyncsa3 -->
                            <a href="{{ LICENSE['ccbyncsa3']['url'] }}" rel="noopener noreferrer" target="_blank"><abbr title="{{ LICENSE['ccbyncsa3']['fullname'] }}">{{ article.license }}</abbr></a>
                        {% elif article.license ==  LICENSE['ccbyncnd3']['name']%}
                            <!-- ccbyncnd3 -->
                            <a href="{{ LICENSE['ccbyncnd3']['url'] }}" rel="noopener noreferrer" target="_blank"><abbr title="{{ LICENSE['ccbyncnd3']['fullname'] }}">{{ article.license }}</abbr></a>
                        {% elif article.license ==  LICENSE['cc01']['name']%}
                            <!-- cc01 -->
                            <a href="{{ LICENSE['cc01']['url'] }}" rel="noopener noreferrer" target="_blank"><abbr title="{{ LICENSE['cc01']['fullname'] }}">{{ article.license }}</abbr></a>
                            {% elif article.license ==  LICENSE['publicdomain']['name']%}
                            <!-- publicdomanin -->
                            <a href="{{ LICENSE['publicdomain']['url'] }}" rel="noopener noreferrer" target="_blank"><abbr title="{{ LICENSE['publicdomain']['fullname'] }}">{{ article.license }}</abbr></a>
                        {% else %}
                            <a href="https://creativecommons.org/licenses/by-sa/4.0/" rel="noopener noreferrer" target="_blank"><abbr title="Attribution-ShareAlike 4.0 International">CC BY-SA 4.0</abbr></a>
                        {% endif %}
                    </div>
                    <!-- /License -->

                    <!-- 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 -->

                </div>

                {% 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/thumbnail/{{ 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>
    </main>
    <!-- End Main -->
{%- endblock -%}

{% block extend_js %}
    <!-- Plyr -->
    <script src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/modules/plyr/plyr.min.js"
            integrity="sha512-l6ZzdXpfMHRfifqaR79wbYCEWjLDMI9DnROvb+oLkKq6d7MGroGpMbI7HFpicvmAH/2aQO+vJhewq8rhysrImw=="
            crossorigin="anonymous"></script>
    <script src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/play.js"></script>
    <!-- /Plyr -->
{% endblock %}