{% extends "base.twig" %}

{% block content %}

<div class="article ie-margin">
    <div class="container container--narrow">
        <div class="article__container">

            <div class="article__cover">
                <img src="{{ post.thumbnail.src }}" alt="{{ post.thumbnail.alt }}" />
            </div>

            <div class="article__main">
                <div class="article__header text-align-{{post.title_align}}">
                    <h6 class="article__date">{{post.date}}</h6>
                    <h2 class="article__title article__title--{{post.title_size}}">{{post.title}}</h2>
                </div>

                <!-- Display content from classic editor, not ACF fields -->
                <div class="article__text">
                    {{post.content}}
                </div>
            </div>

            {% if post.author_full_name|length %}
            <div class="article__footer">
                <div class="article__footer-author">
                    <h4 class="article__footer-title">AUTHOR</h4>
                    <div class="article__footer-author-image">
                        <img class="article__footer-image" src="{{ TimberImage(post.author_image).src }}" alt="{{ TimberImage(post.author_image).alt }}">
                    </div>
                    <div class="article__footer-about">
                        <h4 class="article__footer-about-name">{{post.author_full_name}}</h4>
                        <h6 class="article__footer-about-title">{{post.author_title}}</h6>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>

        <div class="article-more">
            <div class="row">
                <div class="col-12">
                    <div class="row">
                        <div class="col-12 col-md-6">
                            {% if previous_post %}
                                <h4 class="h4">Previous article</h4>
                                <div class="card card-horizontal-stacked article-more__card">
                                    <div class="card__header">
                                        <div class="card__img-wrap">
                                            <a href="{{previous_post.link}}">
                                                <img class="card__img" src="{{ previous_post.thumbnail.src }}" alt="{{ previous_post.thumbnail.alt }}">
                                            </a>
                                        </div>
                                    </div>
                                    <div class="card__content article-more__tile">
                                        <div class="article-more__tile-about">
                                            <h6 class="card__subtitle">{{previous_post.date}}</h6>
                                            <h4 class="card__title">{{previous_post.title}}</h4>
                                            <div>
                                                <a class="btn btn--gradient-small" href="{{previous_post.link}}">Read Article</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                        {% if next_post %}
                            <div class="col-12 col-md-6">
                                <h4 class="h4">Next article</h4>
                                <div class="card card-horizontal-stacked article-more__card">
                                    <div class="card__header">
                                        <div class="card__img-wrap">
                                            <a href="{{next_post.link}}">
                                                <img class="card__img" src="{{ next_post.thumbnail.src }}" alt="{{ next_post.thumbnail.alt }}">
                                            </a>
                                        </div>
                                    </div>
                                    <div class="article-more__tile card__content">
                                        <h6 class="card__subtitle">{{next_post.date}}</h6>
                                        <h4 class="card__title">{{next_post.title}}</h4>
                                        <div>
                                            <a class="btn btn--gradient-small" href="{{next_post.link}}">Read Article</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <div class="btn-center">
                <a class="btn btn--hollow text-dark" href="{{ articles_page_link }}">
                    <span>See all articles</span>
                </a>
            </div>
        </div>

    </div>
</div>

{% endblock %}