{% extends "cjkcms/pages/web_page.html" %}
{% load wagtailadmin_tags wagtailcore_tags wagtailimages_tags cjkcms_tags %}

{% block content %}
    <article class="cjkcms-article {%if self.cover_image %}has-img{% endif %}">
        {% block article_cover_image %}
        {% if self.cover_image %}
        {% image self.cover_image fill-2000x1000 as cover_image %}
        <img src="{{cover_image.url}}" class="w-100" />
        {% endif %}
        {% endblock article_cover_image %}
        <div class="container">
            {% block article_header %}
            <div class="article-header">
                <h1 {% if not self.cover_image %}class="mt-5"{% endif %}>{{ self.title }}</h1>
                {% if self.caption %}
                <p class="lead">{{self.caption}}</p>
                {% endif %}
                <p>
                    {% if settings.cjkcms.LayoutSettings.articles_show_author %}
                        {% if self.author %}
                        <img class="article-author-img rounded-circle mr-2" src="{% avatar_url self.author %}">
                        {% elif self.owner %}
                        <img class="article-author-img rounded-circle mr-2" src="{% avatar_url self.author %}">
                        {% endif %}
                        <span class="mx-2"></span>
                    {% endif %}
                    {% if settings.cjkcms.LayoutSettings.articles_date_format %}
                    <span class="article-date">{{ self.seo_published_at|date:settings.cjkcms.LayoutSettings.articles_date_format }}</span>
                    {% endif %}
                </p>
                <hr>
            </div>
            {% endblock article_header %}
            {% block article_body %}
            <div class="article-body">
                {% include_block self.body with settings=settings %}
            </div>
            {% endblock article_body %}
        </div>
        {% block related_content %}
        {{ block.super }}
        {% endblock %}
    </article>
{% endblock %}
