{% extends "layout-right.html" %} {% macro sentence_case(text) %} {{
text[0]|upper}}{{text[1:] }} {% endmacro %}
{% block header %}
<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 %}


{% for goal in challenges %}

<article id="goal_{{goal.id}}" class="content-section" style="padding: 20px;">
    <div class="media-body">
        <div class="row-gap d-flex align-items-center">

            <a class="semibold" style=" color: white; font-size: 20px;">
                {{sentence_case(goal.description) }}
            </a>

            <div class="ml-auto">
                {% if not current_user.is_authenticated %}
                <div class="row-gap highlight-box d-flex align-items-center" style="background-color: transparent;"
                    id="na_{{goal.id}}">
                    <h5 class="d-flex align-items-center bold no-margin-bottom" id="nh_{{goal.id}}">{{ goal.star_count
                        }}
                    </h5>
                    <img id="goal_star_{{goal.id}}" src="{{ url_for('static', filename='icons/star.svg') }}">
                </div>
                {% elif current_user.id == goal.poster.id %}
                <div class="row-gap highlight-box d-flex align-items-center" style="background-color: transparent;"
                    id="na_{{goal.id}}">
                    <h5 class="d-flex align-items-center bold no-margin-bottom" id="nh_{{goal.id}}">{{ goal.star_count
                        }}
                    </h5>
                    <img id="goal_star_{{goal.id}}" src="{{ url_for('static', filename='icons/star.svg') }}">
                </div>
                {% elif not current_user.email_confirmed %}
                <a id="goal_a_{{goal.id}}" class="highlight-box d-flex align-items-center" style="width: 60px;"
                    onclick="vt.error('You have to confirm email!', { position: 'top-right' });">
                    <h5 id="goal_h5_{{goal.id}}" class="d-flex align-items-center bold no-margin-bottom">{{
                        goal.star_count }}
                    </h5>
                    <img id="goal_star_{{goal.id}}" src="{{ url_for('static', filename='icons/star.svg') }}">
                </a>
                {% elif goal.gave_star(current_user) %}
                <a id="goal_a_{{goal.id}}" class="highlight-box d-flex align-items-center"
                    style="background-color: white; width: 60px;">

                    <h5 id="goal_h5_{{goal.id}}" class="bold black-text no-margin-bottom">{{ goal.star_count }}
                    </h5>
                    <img id="goal_star_{{goal.id}}" src="{{ url_for('static', filename='icons/check.svg') }}">
                </a>
                {% else %}

                <a id="goal_a_{{goal.id}}" class="highlight-box d-flex align-items-center" style="width: 60px;">
                    <h5 id="goal_h5_{{goal.id}}" class="d-flex align-items-center bold no-margin-bottom">{{
                        goal.star_count }}
                    </h5>
                    <img id="goal_star_{{goal.id}}" src="{{ url_for('static', filename='icons/star.svg') }}">
                </a>
                {% endif %}
            </div>
        </div>
        {% if goal.solutions|length == 0 %}
        <div class="row">
            <div class="row justify-content-center w-98 mx-auto"
                style="border-radius: 50px; background-color: #0000002E; text-align: center; height: 42px; margin-top: 20px; width: 98%;">
                <h5 class="align-self-center" style="color: #5C6492; margin-top: 5px;">No solutions yet. Feel free to
                    suggest a solution to this challenge</h5>
            </div>
        </div>
        {% else %}
        <div style="border-radius: 16px; background-color: white; height: max-content; margin-top: 20px;">
            <div class="d-flex align-items-center" style="margin: 0; ">
                <p class="solution-header-font" style="margin-top: 18px; margin-left: 20px; color: #2D355F;"
                    href="javascript:void(0)">
                    {{goal.solutions|length}}
                </p>
                <p class="solution-header2-font" style="margin-left: 8px; margin-top: 20px;">Solutions</p>
                {% for icon,count in goal.get_solution_types_counts('dark').items() recursive %}
                {% if count != 0 %}

                <img src="{{ url_for('static', filename='sol-icons/' + icon) }}"
                    style="margin-left: 15px; width: 20px; height: 20px;">
                <p class="solution-header2-font" style="margin-left: 5px; margin-top: 20px;">{{count}}</p>

                {% endif %}
                {% endfor %}

            </div>
            <hr style="color: black; margin: 0;width:  calc(100% - 40px); margin-left: 20px;">

            <!-- EMAİL DOĞRULAMASI YAPILACAK -->

            <div class="goal" id="goal_{{goal.id}}_solutions">
                {% for solution in goal.solutions %}
                {% if loop.index < 6 %} <div id="solution_{{solution.id}}" class="goal-solutions">

                    {% if not current_user.is_authenticated %}
                    <a class="sol-star" onclick="vt.error('Please register or login!', { position: 'top-right' });"
                        style="background-color: #2D355F0A;" id="solution_a_{{solution.id}}">
                        <h5 style="color: #2D355F; margin: 0; font-weight: bold;" id="solution_h5_{{solution.id}}">
                            {{solution.star_count }}
                        </h5>

                        <img id="solution_star_{{solution.id}}"
                            src="{{ url_for('static', filename='icons/star.svg') }}">
                    </a>
                    {% elif current_user.id == solution.poster.id %}
                    <a class="sol-star" data-toggle="tooltip" data-placement="top" title="give star the solution"
                        style="background-color: #2D355F0A;" id="solution_a_{{solution.id}}">
                        <h5 style="color: #2D355F; margin: 0; font-weight: bold;" id="solution_h5_{{solution.id}}">
                            {{solution.star_count }}
                        </h5>

                        <img id="solution_star_{{solution.id}}"
                            src="{{ url_for('static', filename='icons/star.svg') }}">
                    </a>
                    {% elif not current_user.email_confirmed %}
                    <a class="sol-star" data-toggle="tooltip" data-placement="top" title="give star the solution"
                        style="background-color: #2D355F0A;" id="solution_a_{{solution.id}}">
                        <h5 style="color: #2D355F; margin: 0; font-weight: bold;" id="solution_h5_{{solution.id}}">
                            {{solution.star_count }}
                        </h5>

                        <img id="solution_star_{{solution.id}}"
                            src="{{ url_for('static', filename='icons/star.svg') }}">
                    </a>
                    {% else %}
                    <a class="sol-star" data-toggle="tooltip" data-placement="top" title="give star the solution"
                        style="background-color: #2D355F0A;" id="solution_a_{{solution.id}}">
                        <h5 style="color: #2D355F; margin: 0; font-weight: bold;" id="solution_h5_{{solution.id}}">
                            {{solution.star_count }}
                        </h5>

                        <img id="solution_star_{{solution.id}}" {% if solution.gave_star(current_user) %}
                            src="{{ url_for('static', filename='icons/check.svg') }}" {% else %}
                            src="{{ url_for('static', filename='icons/star.svg') }}" {% endif %}>
                    </a>
                    {% endif %}

                    <img class="icon-20" style="margin-left: 20px;"
                        src="{{url_for('static', filename='sol-icons/' + solution.get_icon('dark'))}}">
                    <a style="margin: 0; margin-left: 20px; color: #2D355F;" data-toggle="modal"
                        data-target="#solution-detail-modal" onclick="showSolutionModal({{solution.id}})"
                        href="javascript:void(0)">
                        {{solution.title}}
                    </a>

                    <div class="row ml-auto sm-1" style="margin-right: 30px;">
                        <h5 class="align-items-center bold no-margin-bottom" style="color: black;">
                            {{solution.comment_count}}
                        </h5>
                        <img src="{{ url_for('static', filename='icons/comment.svg') }}"
                            style="margin-bottom: 5px; margin-left: 10px;">
                    </div>
            </div>

            <hr style="color: black; margin: 0;width:  calc(100% - 50px); margin-left: 20px;">
            {% endif %}
            {% endfor %}

            {% if goal.solutions|length > 5 %}
            <div class="more-sol-cont">
                <a class="more-sol">{{goal.solutions|length-5}}
                    more solutions</a>
            </div>
            {% endif %}
        </div>
    </div>
    {% endif %}
    </div>

    <div style="margin-top: 20px; display: flex; align-items: center;">
        <comment-button class="mr-1" style="border-radius: 50px;">
            <div class="d-flex row-gap highlight-box">
                <h5 class="bold no-margin-bottom" id="goal_comment_count_{{goal.id}}">{{ goal.comment_count }}</h5>
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#00D1FF" class="bi bi-chat-fill"
                    viewBox="0 0 16 16">
                    <path
                        d="M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9.06 9.06 0 0 0 8 15z" />
                </svg>
            </div>
        </comment-button>

        <h6 class="grey-text no-margin-bottom" style="font-size: 14px;">Challenge added by</h6>
        <img class="rounded-circle" style="width:24px; height: 24px; margin-left: 5px; margin-right: 5px;"
            src="{{ url_for('static', filename='profile_pics/' + goal.poster.image_file) }}">
        <h6 class="grey-text no-margin-bottom" style="font-size: 14px;">{{
            goal.poster.username
            }} • {{ goal.elapsed_time() }}</h6>

        {% if current_user.id == goal.poster.id %}

        {% if goal.can_delete(current_user) %}

        <a style="margin-left: auto; cursor: pointer;" data-toggle="modal"
            data-target="#delete_goal{{ goal.id }}">
            <img src="{{ url_for('static', filename='icons/trash.svg') }}">
        </a>
        <!-- Delete goal Modal -->
        <div class="modal fade" id="delete_goal{{ goal.id }}" tabindex="-1" role="dialog"
            aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title black-text" id="delete_project_ModalLabel">Delete Post?</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        Are you sure you would like to delete this goal?
                    </div>
                    <h4 class="black-text" style="margin-left: 30px; margin-right: 30px; margin-bottom: 30px;">
                        {{ sentence_case(goal.description) }}
                    </h4>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button class="btn btn-danger mt-3" style="margin-bottom: 16px;" type="button"
                            data-dismiss="modal" aria-label="Close"> Delete goal </button>
                    </div>
                </div>
            </div>
        </div>

        {% else %}

        <a style="margin-left: auto; cursor: pointer;" data-toggle="tooltip" data-placement="top"
            title="Challenge cannot be deleted because it has solutions added by others.">
            <img src="{{ url_for('static', filename='icons/trash-grey.svg') }}">
        </a>

        {% endif %}
        {% endif %}

        {% if current_user != goal.poster %}
        <a style="margin-left: auto; cursor: pointer;" data-toggle="modal" data-target="#Report_Modal">
            <img src="{{ url_for('static', filename='icons/report.svg') }}">
        </a>
        {% endif %}
    </div>
    <comments style="display:none;">

        <div style="margin-top: 20px;">
            <fieldset class="form-group" style="margin-bottom: 0px;">
                <div class="form-group">
                    <div class="comment-area-container">
                        {% if current_user.is_authenticated %}
                        <img class="rounded-circle" style="width:48px; height: 48px; margin-right: 10px;"
                            src="{{ url_for('static', filename='profile_pics/' + current_user.image_file) }}">
                        {% else %}
                        <img class="rounded-circle" style="width:48px; height: 48px; margin-right: 10px;"
                            src="{{ url_for('static', filename='profile_pics/default.jpg') }}">
                        {% endif %}
                        <textarea id="goal_comment_text_{{goal.id}}" class="comment-field"
                            placeholder="Type in a comment" oninput="linecount(this)"></textarea>
                        <div class="form-group d-flex justify-content-end no-margin-bottom">
                            {% if current_user.is_authenticated %}
                            <button class="comment-send-button" style="margin-top: 0px; height: 38px;">
                                <img src="/static/icons/comment-send.svg"></button>
                            {% else %}
                            <a href="{{ url_for('auth_bp.login') }}">
                                <button class="comment-send-button" style="margin-top: 0px; height: 38px;">
                                    <img src="/static/icons/comment-send.svg">
                                </button>
                            </a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </fieldset>
        </div>
        <div id="comment_goal_{{goal.id}}">
            {% for comment in goal.get_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 current_user.id == comment.user_id %}
                        <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>
    </comments>
</article>
{% endfor %}

{% endblock content%}