{% extends "layout-right.html" %} {% macro sentence_case(text) %} {{
text[0]|upper}}{{text[1:] }} {% endmacro %}
{% block header %}
<script src="{{url_for('static', filename='urlify.js')}}"></script>
<style>
    .list-group-item:first-child {
        border-radius: 10px;
    }

    .list-group-item:last-child {
        border-radius: 10px;
    }
</style>
{% endblock header%}

{% block sidebar %}
<ul class="list-group">
    <a class="list-group-item row-gap" href="{{ url_for('admin_bp.users')}}">
        <div class="d-flex align-items-center" style="color: white;">
            All Users
        </div>
    </a>
    <a class="list-group-item row-gap" href="{{ url_for('admin_bp.projects')}}">
        <div class="d-flex align-items-center" style="color: white;">
            All Projects
        </div>
    </a>
    <a class="list-group-item row-gap" href="{{ url_for('admin_bp.challenges')}}">
        <div class="d-flex align-items-center" style="color: white;">
            All Challenges
        </div>
    </a>
    <a class="list-group-item row-gap" href="{{ url_for('admin_bp.solutions')}}">
        <div class="d-flex align-items-center" style="color: white;">
            All Solutions
        </div>
    </a>
    <a class="list-group-item row-gap" href="{{ url_for('admin_bp.get_comments()')}}">
        <div class="d-flex align-items-center" style="color: white;">
            All Comments
        </div>
    </a>
    <a class="list-group-item row-gap" href="{{ url_for('admin_bp.feedbacks')}}">
        <div class="d-flex align-items-center" style="color: white;">
            All Feedbacks
        </div>
    </a>
    <a class="list-group-item row-gap" href="{{ url_for('admin_bp.reports')}}">
        <div class="d-flex align-items-center" style="color: white;">
            All Reports
        </div>
    </a>
</ul>
{% endblock sidebar %}


{% block content %}

<div>
    {% for comment in comments %}
    <div class="content-section" style="margin-top: 20px" id="comment_{{comment.id}}">
        <h6 style="margin-top: 10px;" id="comments_{{comment.id}}">
            <script>
                var abc = document.getElementById('comments_{{comment.id}}')
                abc.innerHTML = urlify('{{comment.body}}');
            </script>
        </h6>
        <div class="row d-flex align-items-center">
            <div class="col-md-9 row-gap d-flex align-items-center">
                <img class="rounded-circle" style="width:32px;"
                    src="{{ url_for('static', filename='profile_pics/' + comment.poster.image_file) }}">
                <h4 class="grey-text" style="padding-top:10px; font-size: 14px;">
                    {{ comment.poster.username }} • {{ comment.date_posted.strftime('%d %b %H:%M') }}
                </h4>
                {% if comment.can_delete(current_user) %}
                <a style="padding-top: 2px" href="" data-toggle="modal" data-target="#delete_comment"
                    onclick="showDeleteCommentModal({{comment.id}},false)">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill=white class="bi bi-trash-fill"
                        viewBox="0 0 16 16">
                        <path
                            d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z" />
                    </svg>
                </a>
                {% endif %}
            </div>
            <div class="col-md-3 d-flex justify-content-end">
                {% if current_user.id == comment.poster.id or not current_user.is_authenticated %}
                <div class="row-gap highlight-box d-flex align-items-center" style="background-color: transparent;">
                    <h5 class="d-flex align-items-center bold no-margin-bottom">{{ comment.star_count }}</h5>
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="#FFB900"
                        class="bi bi-star-fill" viewBox="0 0 16 16">
                        <path
                            d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
                    </svg>
                </div>
                {% else %}
                <a id="comment_a_{{ comment.id }}" data-toggle="tooltip" data-placement="top"
                    title="give star to comment" {% if comment.gave_star(current_user) %}
                    class="highlight-box d-flex align-items-center" style="background-color: white; width: 60px;" {%
                    else %} class="highlight-box d-flex align-items-center" style="width: 60px;" {% endif %}>
                    <h5 id="comment_h5_{{ comment.id }}" {% if comment.gave_star(current_user) %}
                        class="bold black-text no-margin-bottom" {% else %}
                        class="d-flex align-items-center bold no-margin-bottom" {% endif %}>{{ comment.star_count }}
                    </h5>
                    <img id="comment_star_{{comment.id}}" {% if comment.gave_star(current_user) %}
                        src="{{ url_for('static', filename='icons/check.svg') }}" {% else %}
                        src="{{ url_for('static', filename='icons/star.svg') }}" {% endif %}>
                </a>
                {% endif %}
            </div>
        </div>
    </div>
    {% endfor %}
</div>

{% endblock content%}