{% extends "base.html" %}

{# SEO ARTICLE INFO #}
{% set ARTICLE_TITLE = article.title|striptags|escape %}
{%  set ARTICLE_DESCRIPTION = article.summary|striptags|escape|truncate(150) %}

{% if article.banner %}
{% set ARTICLE_IMAGE = SITEURL + article.banner %}
{% elif OPEN_GRAPH_IMAGE %}
{% set ARTICLE_IMAGE = SITEURL + OPEN_GRAPH_IMAGE %}
{% else %}
{% set ARTICLE_IMAGE = None %}
{% endif %}
{# END SEO ARTICLE INFO #}

{% block opengraph %}
    <!-- OpenGraph -->
    <meta property="og:type" content="article"/>
    <meta property="og:title" content="{{ ARTICLE_TITLE }}"/>
    <meta property="og:url" content="{{ SITEURL }}/{{ article.url }}"/>
    <meta property="og:site_name" content="{{ SITENAME }}"/>
    <meta property="og:description" content="{{ ARTICLE_DESCRIPTION }}"/>
    {% if article.banner %}
    <meta property="og:image" content="{{ ARTICLE_IMAGE }}"/>
    {% elif OPEN_GRAPH_IMAGE %}
    <meta property="og:image" content="{{ SITEURL }}{{ OPEN_GRAPH_IMAGE }}"/>
    {% endif %}

{% if TWITTER %}
    <!-- Twitter -->
    <meta name="twitter:card" content="summary"/>
    <meta name="twitter:site" content="{{ TWITTER }}"/>
    {% if article.author.social.get('twitter') %}
    <meta name="twitter:creator" content="{{ article.author.social['twitter'] }}"/>
    {% elif article.author.name in AUTHORS and "twitter" in AUTHORS[article.author.name] %}
    <meta name="twitter:creator" content="{{ AUTHORS[article.author.name]["twitter"] }}"/>
    {% endif %}
    <meta name="twitter:domain" content="{{ SITEURL|replace("http://", "")|replace("https://", "") }}"/>
    <meta name="twitter:title" content="{{ ARTICLE_TITLE }}"/>
    <meta name="twitter:description" content="{{ ARTICLE_DESCRIPTION }}"/>
    {% if article.banner %}
    <meta name="twitter:image:src" content="{{ ARTICLE_IMAGE }}"/>
    {% elif OPEN_GRAPH_IMAGE %}
    <meta name="twitter:image:src" content="{{ SITEURL }}{{ OPEN_GRAPH_IMAGE }}"/>
    {% endif %}
{% endif %}

    <!-- Article meta -->
    <meta property="article:author" content="{{ article.author }}"/>
    <meta property="article:section" content="{{ article.category }}"/>
    <meta property="article:tag" content="{{ article.tags|join(', ') }}"/>
    <meta property="article:published_time" content="{{ article.locale_date }}"/>

    <!-- Google+ -->
    <meta itemprop="name" content="{{ ARTICLE_TITLE }}"/>
    <meta itemprop="description" content="{{ ARTICLE_DESCRIPTION }}"/>
    {% if article.banner %}
    <meta itemprop="image" content="{{ ARTICLE_IMAGE }}"/>
    {% elif OPEN_GRAPH_IMAGE %}
    <meta itemprop="image" content="{{ SITEURL }}{{ OPEN_GRAPH_IMAGE }}"/>
    {% endif %}

    <!-- General purpose meta -->
    <meta name="description" content="{{ ARTICLE_DESCRIPTION }}"/>
    {% if article.tags %}
    <meta name="keywords" content="{{ article.tags|join(', ') }}"/>
    {% endif %}
{% endblock %}

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

{% block styles %}
    {{ super() }}
    <link href="{{ SITEURL }}/theme/css/article.css" type="text/css" rel="stylesheet" media="screen,projection"/>
{% endblock %}

{% block banner %}
<div class="hero hero-article" style="background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('{{ SITEURL }}{{ article.banner }}')">
</div>
{% endblock %}

{% block content %}
<div class="container content-container">


    <div class="row">
        <div class="col s12 m12 l12 center-align animated bounceInDown slow article-meta">
            <h1 class="white-text">{{ article.title }}</h1>
            <div class="article-metadata {{ MALT_BASE_COLOR }}-text text-lighten-5">
                <span class="article-author-name">
                <a href="{{ SITEURL }}/{{ article.author.url }}" title="{{ article.author.name|escape }}" class="{{ MALT_BASE_COLOR }}-text text-lighten-5">
                        <i class="fa fa-user"></i> {{ article.author.name }}
                    </a>
                </span>
                <span class="article-category">
                <a href="{{ SITEURL }}/{{ article.category.url }}" title="{{ article.category.name|escape }}" class="{{ MALT_BASE_COLOR }}-text text-lighten-5">
                        <i class="fa fa-folder"></i> {{ article.category.name }}
                    </a>
                </span>
                <span class="article-datetime">
                    <i class="fa fa-calendar"></i> <time datetime="{{ article.date.isoformat() }}" title="{{ article.date.isoformat() }}">{{ article.locale_date }}</time>
                </span>
            </div>
        </div>
    </div>

    {% set BREADCRUMB_ELEMENTS = [(article.category, article.category.url)] %}

    <div class="row">
        <div class="col s12 m12 l12 white z-depth-2 article">
            {% include "includes/breadcrumbs.html" %}
            <div class="article-contents">
            {{ article.content }}
            </div>
            <div class="article-tags">
                <span class="icon"><i title="Tags do artigo" class="fa fa-tags"></i></i></span>
                {% for tag in article.tags %}
                <span class="pill {{ MALT_BASE_COLOR }} lighten-2"><a class="white-text" href="{{ SITEURL }}/{{ tag.url }}" title="Tag '{{ tag.name|escape }}'">{{ tag.name }}</a></span>
                {% endfor %}
            </div>
        </div>
    </div>

    {% if article.comments != "closed" %}
        {% include "includes/comments.html" %}
    {% endif %}
</div>"
{% endblock %}
