{#
// inputs:
// - layout: string - one of [classic, full] (required)
#}

<div class="block post post--layout--{{ layout }}">
    <div class="post__header post-header post-header--layout--{{ layout }}">
        <div class="post-header__categories">
            <a href="">Latest news</a>
        </div>
        <h1 class="post-header__title">Morbi Interdum Velit Quis Magna Placerat Lobortis Eget</h1>
        <div class="post-header__meta">
            <div class="post-header__meta-item">By <a href="">Jessica Moore</a></div>
            <div class="post-header__meta-item"><a href="">November 30, 2018</a></div>
            <div class="post-header__meta-item"><a href="">4 Comments</a></div>
        </div>
    </div>

    <div class="post__featured">
        <a href="">
            <img src="images/posts/post-featured.jpg" alt="">
        </a>
    </div>

    <div class="post__content typography {% if layout == 'full' %} typography--expanded {% endif %}">
        <p>
            Vestibulum sagittis justo sit amet nisl semper, et pulvinar elit maximus. Morbi interdum velit quis magna placerat lobortis
            eget pharetra magna. Nulla tristique sollicitudin turpis, eget maximus risus faucibus non. Nulla vestibulum ipsum risus,
            vitae maximus nunc bibendum quis.
        </p>
        <p>
            raesent eu consequat nibh. Quisque <i>ullamcorper</i>, augue eu fringilla sodales, leo metus volutpat risus, at suscipit ipsum
            diam eget sem. Maecenas dictum elit in enim molestie, <a href="">vel sollicitudin erat ultricies</a>. Sed risus tellus, molestie finibus
            dui quis, suscipit consequat ex.
        </p>
        <blockquote>
            <p>
                Sed a dictum elit. In iaculis porttitor luctus. Maecenas ultricies dolor et semper placerat.
                Proin at lectus felis.
            </p>
            <p><cite>John Mcarthy</cite></p>
        </blockquote>
        <p>
            Vivamus in nisi at turpis rhoncus feugiat. Mauris scelerisque non ante et ultrices. Donec sit amet sem lobortis,
            ullamcorper felis at, finibus sem. Curabitur tincidunt neque nunc.
        </p>
        <h3>Nam Eget Blandit Diam</h3>
        <p>
            Quisque semper magna eget libero maximus, a sollicitudin nunc hendrerit. Cras efficitur, ante vitae fringilla rutrum,
            mi tortor dapibus metus, in egestas metus erat sit amet orci. Ut faucibus non ante dapibus efficitur. Nam eget blandit
            diam, imperdiet condimentum neque. Donec risus nisi, aliquet a commodo ac, elementum vitae leo.
        </p>
        <p>
            Vestibulum sagittis justo sit amet nisl semper, et pulvinar elit maximus. Morbi interdum velit quis magna placerat
            lobortis eget pharetra magna.
        </p>
        <p>
            <strong>Nulla fringilla:</strong> <a href="#">Donec aliquet at felis et dignissim</a>
        </p>
        <figure>
            <a href="">
                <img src="images/posts/post-featured.jpg" alt="">
            </a>
            <figcaption>Nunc viverra, dui nec commodo dignissim, libero arcu.</figcaption>
        </figure>
        <p>
            Vestibulum non varius lectus. Cras vel elit id ligula laoreet imperdiet. Mauris quis laoreet velit.
            Suspendisse sed velit nec ante facilisis pharetra.
        </p>
        <p>
            Phasellus ut elit vestibulum, dignissim mi non, suscipit ex. Praesent eu consequat nibh. Quisque ullamcorper, augue
            eu fringilla sodales, leo metus volutpat risus, <a href="#">at suscipit ipsum diam eget sem</a>. Maecenas dictum elit in enim molestie,
            vel sollicitudin erat ultricies. Sed risus tellus, molestie finibus dui quis, suscipit consequat ex.
        </p>
        <hr>
        <h2>Nunc Dapibus Varius Ligula</h2>
        <p>
            Maecenas ultrices arcu ut feugiat semper. Praesent dictum tincidunt justo, ac tincidunt ante fermentum at. Vestibulum non
            varius lectus. Cras vel elit id ligula laoreet imperdiet. Mauris quis laoreet velit. Suspendisse sed velit nec ante
            facilisis pharetra. Duis vitae fermentum elit. Integer ac mattis elit.
        </p>
        <p>
            Mauris scelerisque non ante et ultrices. Donec sit amet sem lobortis:
        </p>
        <ol>
            <li>Duis <strong>finibus imperdiet ultricies</strong>. Donec vel pretium turpis. In auctor euismod posuere.</li>
            <li>Praesent dictum tincidunt justo, ac tincidunt ante fermentum at. Vestibulum non varius lectus. Cras vel elit id ligula laoreet imperdiet.</li>
            <li><strong>In iaculis porttitor luctus</strong>. Maecenas ultricies dolor et semper placerat. Proin at lectus felis. Quisque dapibus auctor justo id dictum.</li>
        </ol>
        <p>
            Ut faucibus non ante dapibus efficitur. Nam eget blandit diam, imperdiet condimentum neque. Donec risus nisi, aliquet a
            commodo ac, elementum vitae leo.
        </p>
    </div>

    <div class="post__footer">
        <div class="post__tags-share-links">
            <div class="post__tags tags">
                <div class="tags__list">
                    <a href="">Promotion</a>
                    <a href="">Power Tool</a>
                    <a href="">Wrench</a>
                    <a href="">Electrodes</a>
                </div>
            </div>
            <div class="post__share-links share-links">
                <ul class="share-links__list">
                    <li class="share-links__item share-links__item--type--like"><a href="">Like</a></li>
                    <li class="share-links__item share-links__item--type--tweet"><a href="">Tweet</a></li>
                    <li class="share-links__item share-links__item--type--pin"><a href="">Pin It</a></li>
                    <li class="share-links__item share-links__item--type--counter"><a href="">4K</a></li>
                </ul>
            </div>
        </div>
        <div class="post-author">
            <div class="post-author__avatar">
                <a href=""><img src="images/avatars/avatar-1.jpg" alt=""></a>
            </div>
            <div class="post-author__info">
                <div class="post-author__name">
                    <a href="">Jessica Moore</a>
                </div>
                <div class="post-author__about">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur suscipit suscipit mi, non
                    tempor nulla finibus eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </div>
            </div>
        </div>
    </div>


    <section class="post__section">
        <h4 class="post__section-title">Related Posts</h4>

        <div class="related-posts">
            <div class="related-posts__list">
                {% for post in posts[:2] %}
                    <div class="related-posts__item post-card post-card--layout--related">
                        <div class="post-card__image">
                            <a href="">
                                <img src="{{ post.image }}.jpg" alt="">
                            </a>
                        </div>
                        <div class="post-card__info">
                            <div class="post-card__name">
                                <a href="">{{ post.title }}</a>
                            </div>
                            <div class="post-card__date">{{ post.date }}</div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </section>


    <section class="post__section">
        <h4 class="post__section-title">Comments ({{ post_comments.count }})</h4>

        {% include '/partials/comments-list.twig' with {
            comments: post_comments.items
        } only %}
    </section>


    <section class="post__section">
        <h4 class="post__section-title">Write A Comment</h4>

        <form>
            <div class="form-row">
                <div class="form-group col-md-4">
                    <label for="comment-first-name">First Name</label>
                    <input type="text" class="form-control" id="comment-first-name" placeholder="First Name">
                </div>
                <div class="form-group col-md-4">
                    <label for="comment-last-name">Last Name</label>
                    <input type="text" class="form-control" id="comment-last-name" placeholder="Last Name">
                </div>
                <div class="form-group col-md-4">
                    <label for="comment-email">Email Address</label>
                    <input type="email" class="form-control" id="comment-email" placeholder="Email Address">
                </div>
            </div>
            <div class="form-group">
                <label for="comment-content">Comment</label>
                <textarea class="form-control" id="comment-content" rows="6"></textarea>
            </div>
            <div class="form-group mt-4">
                <button type="submit" class="btn btn-primary btn-lg">Post Comment</button>
            </div>
        </form>
    </section>
</div>