{% extends "base.html" %}
{% block main %}
    <div style="min-height: 100vh;" class="container bg-deepmatte p-6 brdr-yayellow">
        <h1 class="title has-text-white has-text-centered is-capitalized">
            {% if action == "spam" %}
                {{ i18n['manage_spam'] }}
            {% else %}
                    {{ i18n['manage_comments'] }}
            {% endif %}
        </h1>
        <div class="field">
            <form method="GET" action="/dashboard/{{ project }}/manage-{{action}}/">
                <div class="control">
                    <div class="select">
                        <label for="location">
                            <select name="location" onchange="this.form.submit();">
                                <option value="-1">{{ i18n['select_article'] }}</option>
                                {% for each in locations %}
                                    {% if selected is defined %}
                                        {% if selected | string() == each.id_location | string() %}
                                            <option selected="selected" value="{{ each.id_location }}">{{ each.location }}</option>
                                        {% else %}
                                            <option value="{{ each.id_location }}">{{ each.location }}</option>
                                        {% endif %}
                                    {% else %}
                                        <option value="{{ each.id_location }}">{{ each.location }}</option>
                                    {% endif %}
                                {% endfor %}
                            </select>
                        </label>
                    </div>
                </div>
            </form>
        </div>
        <div>
            {% if locations | length == 0 %}
                {% if action == "spam" %}
                    <div class="block">
                        <p class="has-text-centered mt-5 is-size-2">{{ i18n['hooray_no_spam'] }}</p>
                    </div>
                {% endif %}
            {% endif %}
            {% if spam_comments is defined %}
                {% for comment in spam_comments %}
                    <article>
                        <div class="media mb-5 brdr-yayellow my-shadow-subtle bg-compliment">
                            <figure class="media-left ml-0 mb-0">
                                <p class="image is-128x128">
                                    <img alt="gravatar portrait" src="https://gravatar.com/avatar/{{comment.gravatar}}?size=128">
                                </p>
                            </figure>
                            <div class="media-content">
                                <div class="content mr-5 mt-2">
                                    <a data-tippy-content="comment ID"
                                       id="comment_{{comment.comments_id}}"
                                       href="#comment_{{comment.comments_id}}">
                                        #{{comment.comments_id}}
                                    </a>
                                    &nbsp;<span class="fg-yellow">{{comment.email}}</span>
                                    &nbsp;<span class="fg-yellow">{{comment.created_on}}</span>
                                    &nbsp;{{ i18n['spam_score'] }}:&nbsp;
                                    <span data-tippy-content="{{ i18n['tooltip_spam_score'] }}"
                                          class="fg-yellow">
                                    {{  comment.spam_score | round(5) }}</span>
                                    &nbsp;{{ i18n['published'] }}:&nbsp;<span class="fg-yellow">{{ comment.is_published }}</span>
                                    <br><br>
                                    <span class="mt-5">
                                    {{comment.content}}
                                </span>
                                </div>
                                <nav class="level is-mobile">
                                    <a data-tippy-content="{{ i18n['manage_comments_delete_comment'] }}"
                                       class="level-item"
                                       href="/api/comment-delete/{{ comment.comments_id }}?location={{ selected }}">
                                       <span class="icon is-medium"><i class="mdi mdi-24px mdi-trash-can"></i></span>
                                    </a>
                                    <a data-tippy-content="{{ i18n['manage_comments_delete_and_block'] }}"
                                       class="level-item"
                                       href="/api/comment-block-mail/{{ comment.comments_id }}?location={{ selected }}">
                                       <span class="icon is-medium"><i class="mdi mdi-24px mdi-close-box"></i></span>
                                    </a>
                                    <a data-tippy-content="{{ i18n['manage_comments_allow_comment'] }}"
                                       class="level-item"
                                       href="/api/comment-allow/{{ comment.comments_id }}?location={{ selected }}">
                                       <span class="icon is-medium"><i class="mdi mdi-24px mdi-check"></i></span>
                                    </a>
                                    <a data-tippy-content="{{ i18n['manage_comments_allow_and_approve'] }}"
                                       class="level-item"
                                       href="/api/comment-allow-user/{{ comment.comments_id }}?location={{ selected }}">
                                       <span class="icon is-medium"><i class="mdi mdi-24px mdi-check-all"></i></span>
                                    </a>
                                </nav>
                            </div>
                        </div>
                    </article>
                {% endfor %}
            {% endif %}
        </div>
    </div>

{% endblock %}