{% extends '_layout.twig' %}

{% block main %}
    
    <h1>{{ entry.title }}</h1>
    <p>entry contents...</p>

    {# start comments #}
    {# you may want to put this code in an include or embed for reusability #}

    <div id="comments"><!-- anchor --></div>
    {# @var commentsWork \twentyfourhoursmedia\commentswork\services\CommentsWorkService #}
    {% set commentsWork = craft.commentsWork.service %}
    {# check if the user has just posted a comment and provide feedback #}
    {% set justPosted = commentsWork.checkJustPosted() %}

    {% if justPosted %}
        {# show a message not the form #}
        {% if justPosted.error %}
            <div class="alert alert-danger">
                <p>The comment could not be posted.</p>
            </div>
        {% else %}
            {% if justPosted.status == 'APPROVED' %}
                <div class="alert alert-success"><p>Your comment has been published.</p></div>
            {% elseif justPosted.status == 'PENDING' %}
                <div class="alert alert-warning"><p>Your comment has been posted and is awaiting moderation.</p></div>
            {% else %}
                {# the status is either trashed or spam for some reason,, #}
                <div class="alert alert-danger"><p>Your comment has been posted but has not been not published..</p>
                </div>
            {% endif %}
        {% endif %}
    {% else %}
        {# show the form #}
        {% if not currentUser and not commentsWork.allowAnonymous(entry) %}
            <p>Anonymous commenting is not allowed. Please login.</p>
        {% else %}
            <div class="card bg-light">
                <div class="card-header">
                    Leave a comment
                </div>
                <div class="card-body">
                    <form method="post" action="{{ url('/actions/comments-work/default/post-comment') }}">
                        {{ csrfInput() }}
                        {{ signCommentForm(entry) }}
                        <input name="redirect" value="{{ craft.app.request.url }}#comments" type="hidden"/>
                        <input name="elementId" value="{{ entry.id }}" type="hidden"/>
                        <input name="siteId" value="{{ entry.siteId }}" type="hidden"/>
                        <input name="commentFormat" value="text" type="hidden"/>

                        <div class="form-group">
                            <label for="comment-title">Title</label>
                            <input name="title" id="comment-title" type="text" class="form-control"/>
                        </div>
                        <div class="form-group">
                            <label for="comment-content">Comment</label>
                            <textarea name="comment" rows="5" id="comment-content" class="form-control"></textarea>
                        </div>

                        <div>
                            <input type="submit" class="btn btn-primary" value="Post comment"/>
                        </div>
                    </form>
                </div>
            </div>
        {% endif %}
    {% endif %}

    {# show latest 50 comments#}
    <p>{{ commentsWork.countComments(entry) }} total comments</p>

    {% set comments = commentsWork.fetchComments(entry, 0, 50) %}
    {% for comment in comments %}
        {# @var comment \twentyfourhoursmedia\commentswork\models\CommentModel #}
        <div class="card card bg-light">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-2">
                        <img src="https://image.ibb.co/jw55Ex/def_face.jpg" class="img img-rounded img-fluid"
                             width="64">
                        <p class="text-secondary text-center">{{ comment.dateCreated | date }} {{ comment.dateCreated | date('H:i') }}</p>
                    </div>
                    <div class="col-md-10">
                        {%- if comment.user %}<p><a
                                    href="https://maniruzzaman-akash.blogspot.com/p/contact.html"><strong>{{ comment.user.friendlyName }}</strong></a>
                            </p>{% endif -%}
                        {%- if comment.title is not empty %}
                            <p><strong>{{ comment.title }}</strong></p>
                        {% endif -%}
                        {%- if comment.comment is not empty %}
                            <p>
                                {{ comment | commentAsHtml }}
                            </p>
                        {% endif -%}
                    </div>
                </div>
            </div>
        </div>
        <br/>
    {% endfor %}
    {# end comments #}

{% endblock %}