{# templates/blog/blog_show.html.twig #}
{% extends 'base.html.twig' %}

{% block title %} Blogpost {% endblock %}

{% block body %}

    <div class="container box">
        <div class="row">
            <div class="col-sm-12">
                <div class="show-article-container p-3 mt-4">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="">
                                <a href="{{ path('blog_edit', { id : blog.id }) }}"><i class="fas fa-edit"></i></a>
                                <a href="{{ path('blogs') }}"><i class="fas fa-trash-alt"></i></a>
                            </div>
                            <img class="show-article-img" src="{{ asset('build/images/asteroid.jpeg') }}" alt="asteroid">
                            <div class="show-article-title-container d-inline-block pl-3 align-middle">
                                <span class="show-article-title ">{{ blog.title }}</span>
                                <br>
                                <span class="align-left article-details">
                                    <img class="article-author-img rounded-circle" src="{{ asset('build/images/alien-profile.png') }}" alt="profile">
                                    {{  blog.author }}
                                </span>
                                <span class="pl-2 article-details">{{ blog.createdAt | ago }} updated: {{ blog.editedAt | ago }} </span>
                                <span class="pl-2 article-details">
                            </span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="article-text">
                                {{ blog.content }}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <p class="share-icons mb-5">
                                <span class="pr-1">Share:</span>
                                <i class="pr-1 fa-2x fab fa-facebook-square"></i>
                                <i class="pr-1 fa-2x fab fa-twitter-square"></i>
                                <i class="pr-1 fa-2x fab fa-reddit-square"></i>
                                <i class="pr-1 fa-2x  fa fa-share-alt-square"></i>
                            </p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <h3>

                                <!--
                                <i class="pr-3 fa fa-comment"></i>Comments</h3>

                                -->
                            <hr>

                            <div class="row mb-5">
                                <div class="col-sm-12">
                                    <img class="comment-img rounded-circle" src="{{ asset('build/images/alien-profile.png') }}" alt="profile">
                                    <div class="comment-container d-inline-block pl-3 align-top">
                                        <span class="commenter-name">Amy Oort</span>
                                        <div class="form-group">
                                            <label for="articleText"></label>
                                            <textarea class="form-control comment-form" id="articleText" rows="1"></textarea>
                                        </div>
                                        <button type="submit" class="btn btn-primary">Comment</button>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



{% endblock %}