{% extends "singlelayout-wide.html" %} {% macro sentence_case(text) %}
{{text[0]|upper}}{{text[1:] }} {% endmacro %} 
{% block header %}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"
    type="text/javascript"></script>
<script src="{{url_for('static', filename='bootstrap3-typeahead.js')}}"></script>
<script src="{{url_for('static', filename='urlify.js')}}"></script>
<script src="{{url_for('static', filename='images-grid.js')}}"></script>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='images-grid.css') }}">
<script src="{{url_for('static', filename='github_preview.js')}}"></script>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<script src="{{url_for('static', filename='bootstrap-tagsinput.js')}}"></script>
<script src="{{url_for('static', filename='embed_links.js')}}"></script>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='bootstrap-tagsinput.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='jMentions.css') }}">
<script src="{{url_for('static', filename='jMentions.js')}}"></script>

<!-- Delete Comment Modal -->
<div class="modal fade" id="delete_comment" 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_comment_ModalLabel">Delete Comment?
                </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 comment?
            </div>
            <h4 style="margin-left: 30px; margin-right: 30px; margin-bottom: 30px; color: #2D355F;"
                id="delete_comment_body">
                Comment BODY
            </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"
                    id="delete_comment_button" data-dismiss="modal" aria-label="Close">Delete</button>

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

<!-- Edit Description Modal -->
<div class="modal fade" id="edit_project_description_Modal" tabindex="-1" role="dialog"
    aria-labelledby="edit_project_description_ModalLabel" 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="edit_project_description_ModalLabel">Edit project description
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <fieldset>
                    <div>
                        <h5 class="bold">
                            <h5 class="margin-bottom-xs black-text">Description</h5>
                            <textarea id="project_description" class="form-control form-control-lg"
                                placeholder='Project Description' style="height: 280px; margin-bottom: 10px;"
                                id="project_description">{{ project.description }}</textarea>
                            <div style="display: none;" id="project_description_ve">
                                <div class="d-flex align-items-center"
                                    style="background-color:#f1f1fb; padding: 10px 12px; border-radius: 8px; margin-top: 10px; height: auto;">
                                    <div class="row-gap d-flex align-items-center">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="#ff3464"
                                            class="bi bi-pencil-fill" viewBox="0 0 16 16">
                                            <path
                                                d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z" />
                                        </svg>
                                        <h6 class="no-margin-bottom" style="color: #ff3464;">Please enter a project
                                            description that has between 40 to 400 characters.</h6>
                                    </div>
                                </div>
                            </div>
                    </div>
                </fieldset>
            </div>
            <div class="modal-footer">
                <div class="d-flex justify-content-end">
                    <button class="button-add-blue" type="button" onclick="EditProjectDescription({{project.id}});"
                        data-dismiss="modal" aria-label="Close" id="save_button">Save</button>
                </div>
            </div>
        </div>
    </div>
</div>

<article>
    <div style="float: right;">
        <div class="row-gap d-flex justify-content-end align-items-center" style="margin-left: 25px;">
            <div class="share-cont" id="shr-btn">
                <div>
                    <i class="fa fa-share" id="shr-btn" style="color: white;"></i>
                    <div class="share-options" style="cursor:initial; ">
                        <div class="social-media">
                            <a class="social-media-btn" style="background-color: #25D366;"
                                href="https://api.whatsapp.com/send/?text=crowd.inc{{ url_for('project_bp.project', project_name=project.slug) }}&type=custom_url&app_absent=0"
                                target="_blank"><i class="fa fa-whatsapp"></i></a>
                            <a class="social-media-btn" style="background-color: #1DA1F2;"
                                href="https://twitter.com/intent/tweet?url=crowd.inc{{ url_for('project_bp.project', project_name=project.slug) }}&text=check this project"
                                target="_blank"><i class="fa fa-twitter"></i></a>
                            <a class="social-media-btn" style="background-color: #1877F2;"
                                href="https://www.facebook.com/sharer/sharer.php?u=crowd.inc{{ url_for('project_bp.project', project_name=project.slug) }}"
                                target="_blank"><i class="fa fa-facebook-f"></i></a>
                            <a class="social-media-btn" style="background-color: #0A66C2;"
                                href="https://www.linkedin.com/sharing/share-offsite/?url=crowd.inc{{ url_for('project_bp.project', project_name=project.slug) }}"
                                target="_blank"><i class="fa fa-linkedin"></i></a>
                        </div>
                        <div class="link-container">
                            <input class="link" id="shareLink"
                                value="crowd.inc{{ url_for('project_bp.project', project_name=project.slug) }}" />
                            <button class="copy-btn">copy</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row"
                style="gap: 5px; margin-right: 1px; padding: 8px; padding-left: 18px; padding-right: 15px; border: solid; border-radius: 30px; border-color:#EDF0FA; border-width: 2px;">
                <a class="row-gap-small justify-content-end no-underline d-flex align-items-center" href="#"
                    data-toggle="tooltip" title="Total stars receieved">
                    <h4 class="bold no-margin-bottom">{{ project.star_count }}</h4>
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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>
                </a>
                <a class="row-gap-small justify-content-end no-underline d-flex align-items-center" href="#"
                    data-toggle="tooltip" title="Total comments received">
                    <h4 class="bold" style="margin-bottom:0px; margin-left: 8px;" id="project_comment">
                        {{project.comment_count }}</h4>
                    <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>
                </a>
            </div>
        </div>
    </div>
    <div class="row" style="margin-bottom: 35px;">
        <a class="d-flex align-items-center" href="{{ url_for('project_bp.project_people',project_name=project.slug) }}">
            <img src="{{ url_for('static', filename='icons/project_back.svg') }}">
            <b class="no-margin-bottom" style="color: white; font-size: 34px;">{{ back }}</b>
        </a>
    </div>

</article>

<a id="circle" data-toggle="modal" data-target="#feedback_Modal"
    style="position:fixed; right:0px; margin: 30px; bottom:0px; background-color: #4140c1; border: 2px solid #FFFFFF; width: 64px; padding: 14px; border-radius: 50px; cursor: pointer;">
    <svg id="icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="white" class="bi bi-chat-fill"
        viewBox="0 0 16 16">
        <path
            d="M8,0C3.6,0,0,3.1,0,7c0,1.8,0.7,3.4,2,4.6c-0.1,1-0.4,2.1-0.8,3c-0.1,0.2,0.1,0.4,0.3,0.4c2.3-0.4,3.6-0.9,4.2-1.2 C6.4,13.9,7.2,14,8,14c4.4,0,8-3.1,8-7S12.4,0,8,0z M7.8,11.3c-0.6,0-1-0.4-1-0.9s0.5-0.9,1-0.9s1,0.4,1,0.9S8.4,11.3,7.8,11.3z M9.6,7.2c-0.5,0.4-0.7,0.6-0.9,1C8.5,8.5,8.3,8.8,7.8,8.8C7.3,8.8,7.1,8.5,7.1,8c0-0.6,0.3-1,1-1.6C8.6,6.1,9,5.8,9,5.3 c0-0.5-0.5-0.8-1.1-0.8C7.5,4.5,7.1,4.6,6.8,5C6.6,5.2,6.5,5.3,6.2,5.3C5.8,5.3,5.5,5,5.5,4.6c0-0.4,0.2-0.7,0.5-1 C6.5,3.3,7.2,3,8.1,3c1.6,0,2.8,0.8,2.8,2.2C10.9,6.2,10.3,6.7,9.6,7.2z" />
    </svg>
</a>
<div id="abc"
    style="background-color: transparent; width: 260px; height: 80px; position:fixed; right:-8px; margin: 30px; bottom:-8px; border-radius: 100px; z-index: -1;">
    <h5 id="texty" style="position:fixed; right:78px; margin: 30px; bottom:20px; color: transparent;z-index: -2;">
        Share Feedback
    </h5>
</div>
{% endblock header %}

{% block content %}

{% for goal in goals %}
<article id="goal_{{goal.id}}" class="content-section" style="padding: 20px;">
    <div class="media-body">
        <div class="row-gap d-flex align-items-center">
            <div>
                {% 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 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 src="{{ url_for('static', filename='icons/star.svg') }}">
                </div>
                {% elif not current_user.email_confirmed %}
                <a 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 class="highlight-box d-flex align-items-center star_button"
                    style="background-color: white; width: 60px;" data-id="{{goal.id}}" data-category="goal">
                    <h5 class="bold black-text no-margin-bottom">
                        {{ goal.star_count }}
                    </h5>
                    <img src="{{ url_for('static', filename='icons/check.svg') }}">
                </a>
                {% else %}
                <a class="highlight-box d-flex align-items-center star_button" style="width: 60px;"
                    data-id="{{goal.id}}" data-category="goal">
                    <h5 class="d-flex align-items-center bold no-margin-bottom">
                        {{ goal.star_count }}
                    </h5>
                    <img src="{{ url_for('static', filename='icons/star.svg') }}">
                </a>
                {% endif %}
            </div>

            <a class="semibold" style=" color: white; font-size: 20px;"
                href="{{ url_for('project_bp.detail_goal', project_name=project.slug,goal_id=goal.id) }}">
                {{sentence_case(goal.description) }}
            </a>

            <div class="ml-auto">
                {% if not current_user.is_authenticated %}
                <a class="d-flex justify-content-end no-underline"
                    onclick="vt.error('You have to register or login!',{position: 'top-right'});">
                    <button class="btn btn-light add-button" style="margin: 0;">
                        <i class="fa fa-plus fa-sm"></i>
                        Solution
                    </button>
                </a>
                {% elif not current_user.email_confirmed %}
                <a class="justify-content-end no-underline" style="float: right;"
                    onclick="vt.error('You have to confirm email!',{position: 'top-right'});">
                    <button class="btn btn-light add-button" style="margin: 0;">
                        <i class="fa fa-plus fa-sm"></i>
                        Solution
                    </button>
                </a>
                {% else %}
                <a class="justify-content-end no-underline" href="#" data-toggle="modal" style="float: right;"
                    onclick="showModal('{{goal.description}}',{{goal.id}});" data-target="#add_solution_Modal">
                    <button class="btn btn-light add-button" style="margin: 0;">
                        <i class="fa fa-plus fa-sm"></i>
                        Solution
                    </button>
                </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: 0;">No solutions yet. Feel free to
                    suggest a solution to this goal</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 class="solution-contributors">
                    {% if goal.get_user_list()|length >5 %}
                    <div class="solution-contributor">
                        <h5 class="contributor-count">+{{goal.get_user_list()|length-5}}</h5>
                    </div>
                    {% endif %}

                    {% for user in goal.get_user_list() %}

                    {% if loop.index < 5 %} <a class="solution-contributor"
                        href="{{ url_for('profile_bp.user_profile', username=user.username) }}">
                        <img class="contributor-img"
                            src="{{ url_for('static', filename='profile_pics/' + user.image_file) }}">
                        </a>
                        {% endif %}
                        {% endfor %}
                </div>

            </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;">
                        <h5 style="color: #2D355F; margin: 0; font-weight: bold;">
                            {{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" style="background-color: #2D355F0A;">
                        <h5 style="color: #2D355F; margin: 0; font-weight: bold;">
                            {{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" onclick="vt.error('You have to confirm email!', { position: 'top-right' });"
                        data-toggle="tooltip" data-placement="top" title="give star the solution"
                        style="background-color: #2D355F0A;">
                        <h5 style="color: #2D355F; margin: 0; font-weight: bold;">
                            {{solution.star_count }}
                        </h5>

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

                        <img {% 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-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"
                    href="{{ url_for('project_bp.detail_goal', project_name=project.slug,goal_id=goal.id) }}">{{goal.solutions|length-5}}
                    more solutions</a>
            </div>
            {% endif %}
        </div>
    </div>
    {% endif %}
    </div>

    <div style="margin-top: 20px; display: flex; align-items: center; gap: 6px;">
        <comment-button>
            <div class="d-flex" style="gap: 10px;">
                <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>
                <img src="{{ url_for('static', filename='icons/comment-show.svg') }}">
            </div>
        </comment-button>

        <h6 class="grey-text no-margin-bottom" style="font-size: 14px;"> </h6>
        <img class="rounded-circle" style="width:24px; height: 24px;"
            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>

        <div class="ml-auto">
            {% if goal.can_delete(current_user) %}
            <a style="margin-left: auto; cursor: pointer; margin-left: auto;" 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"
                                onclick="deleteIdeate({{project.id}},'goal',{{goal.id}});" data-dismiss="modal"
                                aria-label="Close"> Delete goal </button>
                        </div>
                    </div>
                </div>
            </div>
            {% elif goal.can_delete_error(current_user)=='cannot' %}

            {% elif goal.can_delete_error(current_user)=='other' %}
            <a style="cursor: pointer;" data-toggle="tooltip" data-placement="top"
                title="Goal cannot be deleted because it has solutions added by others.">
                <img src="{{ url_for('static', filename='icons/trash-grey.svg') }}">
            </a>
            {% endif %}

            {% if current_user.id != goal.poster.id %}
            <a class="report_modal" style="cursor: pointer;" data-toggle="modal" data-target="#Report_Modal"
                data-id="{{goal.id}}" data-category="goal">
                <img src="{{ url_for('static', filename='icons/report.svg') }}">
            </a>
            {% endif %}
        </div>
    </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 %}
                        <div style="width: 100%;">
                            <div id="goal_comment_text_{{goal.id}}" class="comment-field" contenteditable="true"
                                data-text="Type in a comment"></div>
                            <script>
                                $('#goal_comment_text_{{goal.id}}').jMentions({
                                    source: function (prefix) {
                                        var dfd = jQuery.Deferred(),
                                            filteredUsers = [];

                                        users.forEach(function (elm) {
                                            if (elm.value.indexOf(prefix) != -1) {
                                                filteredUsers = filteredUsers.concat(elm);
                                            }
                                        })

                                        dfd.resolve(filteredUsers);
                                        return dfd.promise();
                                    }
                                });
                            </script>
                        </div>
                        <div class="form-group d-flex justify-content-end no-margin-bottom">
                            {% if not current_user.is_authenticated %}
                            <button class="comment-send-button" id="comment-send-button"
                                style="margin-top: 0px; height: 38px;"
                                onclick="vt.error('You have to register or login!', { position: 'top-right' });">
                                <img src="{{ url_for('static', filename='icons/comment-send.svg') }}">
                            </button>
                            {% elif not current_user.email_confirmed %}
                            <button class="comment-send-button" id="comment-send-button"
                                style="margin-top: 0px; height: 38px;"
                                onclick="vt.error('You have to confirm email!', { position: 'top-right' });">
                                <img src="{{ url_for('static', filename='icons/comment-send.svg') }}">
                            </button>
                            {% else %}
                            <button class="comment-send-button" id="comment-send-button" data-id="{{goal.id}}"
                                data-category="goal" style="margin-top: 0px; height: 38px;">
                                <img src="{{ url_for('static', filename='icons/comment-send.svg') }}">
                            </button>
                            {% 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; padding-bottom: 10px;" id="comments_{{comment.id}}">
                    <script>
                        var abc = document.getElementById('comments_{{comment.id}}')
                        abc.innerHTML = mentionify(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 m0" style="width:32px;"
                            src="{{ url_for('static', filename='profile_pics/' + comment.poster.image_file) }}">
                        <h4 class="grey-text m0" style="font-size: 14px;">
                            {{ comment.poster.username }} • {{ comment.date_posted.strftime('%d %b %H:%M') }}
                        </h4>
                        {% if comment.can_delete(current_user) %}
                        <a class="delete_comment m0" href="" data-toggle="modal" data-target="#delete_comment"
                            onclick="showDeleteCommentModal({{comment.id}},false)">
                            <img src="{{ url_for('static', filename='icons/trash.svg') }}">
                        </a>
                        {% endif %}
                    </div>
                    <div class="col-md-3 d-flex justify-content-end">
                        {% if 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>
                            <img src="{{ url_for('static', filename='icons/star.svg') }}">
                        </div>
                        {% elif current_user.id == comment.poster.id %}
                        <div class="row-gap highlight-box d-flex align-items-center"
                            style="background-color: transparent; display: block;">
                            <h5 class="d-flex align-items-center bold no-margin-bottom">
                                {{ comment.star_count }}
                            </h5>
                            <img src="{{ url_for('static', filename='icons/star.svg') }}">
                        </div>
                        {% elif not current_user.email_confirmed %}
                        <a class="highlight-box d-flex align-items-center" style="width: 60px;"
                            onclick="vt.error('You have to confirm email!', { position: 'top-right' });">
                            <h5 class="d-flex align-items-center bold no-margin-bottom">
                                {{ comment.star_count }}
                            </h5>
                            <img id="goal_star_{{goal.id}}"
                                src="{{ url_for('static', filename='icons/star.svg') }}">
                        </a>
                        {% elif comment.gave_star(current_user) %}
                        <a class="highlight-box d-flex align-items-center star_button"
                            style="background-color: white; width: 60px;" data-id="{{comment.id}}"
                            data-category="comment">
                            <h5 class="bold black-text no-margin-bottom">
                                {{ comment.star_count }}
                            </h5>
                            <img src="{{ url_for('static', filename='icons/check.svg') }}">
                        </a>
                        {% else %}
                        <a class="highlight-box d-flex align-items-center star_button" style="width: 60px;"
                            data-id="{{comment.id}}" data-category="comment">
                            <h5 class="d-flex align-items-center bold no-margin-bottom">
                                {{ comment.star_count }}
                            </h5>
                            <img src="{{ url_for('static', filename='icons/star.svg') }}">
                        </a>
                        {% endif %}
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </comments>
</article>
{% endfor %} 
<script src="{{url_for('static', filename='project.js')}}"></script>
<script>
    $(".tab-slider--nav li").click(function () {
        $(".tab-slider--body").hide();
        var activeTab = $(this).attr("rel");
        $("#" + activeTab).fadeIn();
        if ($(this).attr("rel") == "tab2") {
            $('.tab-slider--tabs').addClass('slide');
            document.getElementById('goal_type').value = 'internal';
        } else {
            $('.tab-slider--tabs').removeClass('slide');
            document.getElementById('goal_type').value = 'external';
        }
        $(".tab-slider--nav li").removeClass("active");
        $(this).addClass("active");
    });


    function showTab(id) {
        let showelement = document.getElementById(id);
        let hidelement = document.getElementById('tab_main');
        let submit_button = document.getElementById('solution_submit_button');

        if (id == 'tab_main') {
            document.getElementById('tab-text').style.display = 'none';
            hidelement.style.display = 'block';
            submit_button.style.display = 'none';
            document.getElementById('solution_type').value = '';
        }
        else {
            showelement.style.display = 'block';
            hidelement.style.display = 'none';
            submit_button.style.display = 'block';
            document.getElementById('solution_type').value = 'text';
        }
    }

    function showModal(goal_description, goal_id) {
        document.getElementById('modal_goal_description').innerHTML = goal_description;
        document.getElementById('goal_id').value = goal_id;
    }

    $("#add_solution_Modal").on("hide.bs.modal", function () {
        showTab('tab_main');
    });
</script>
<style>
    .tab-slider--nav {
        width: 100%;
        float: left;
        margin-bottom: 20px;
    }

    .tab-slider--tabs {
        display: block;
        float: left;
        margin: 0;
        padding: 0;
        list-style: none;
        position: relative;
        border-radius: 35px;
        overflow: hidden;
        background: #E7E9F4;
        height: 35px;
        user-select: none;
    }

    .tab-slider--tabs:after {
        content: "";
        width: 50%;
        background: #4082F6;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        transition: all 250ms ease-in-out;
        border-radius: 35px;
    }

    .tab-slider--tabs.slide:after {
        left: 50%;
    }

    .tab-slider--trigger {
        font-size: 12px;
        line-height: 1;
        font-weight: bold;
        color: #4082F6;
        text-transform: uppercase;
        text-align: center;
        padding: 11px 20px;
        position: relative;
        z-index: 2;
        cursor: pointer;
        display: inline-block;
        transition: color 250ms ease-in-out;
        user-select: none;
    }

    .tab-slider--trigger.active {
        color: #fff;
    }

    .tab-slider--body {
        margin-bottom: 20px;
    }
</style>
<script>
    var users = [];
    $(window).bind("load", function () {
        console.log('ready!')

        $.ajax({
            type: "POST",
            url: '/get_users',
            dataType: "json",
            data: JSON.stringify({ 'abc': '' }),
            contentType: 'application/json;charset=UTF-8',
            async: false,
            beforeSend: function () {
                /*  $(".spinner").css('display','block'); */
            },
            success: function (data) {
                data.users.forEach(user => {
                    user_json = {
                        "value": user.username,
                        "label": user.username,
                        "avatar": Flask.url_for('static', { 'filename': 'profile_pics/' + user.image_file })
                    };
                    users.push(user_json);
                });
            }
        });

        $('[data-toggle="tooltip"]').tooltip();
        if ("{{toastMessage|safe}}" != "") {
            vt.success("{{toastMessage|safe}}", { position: 'top-right' });
        }

        if (location.hash) {
            $('html, body').animate({
                'scrollTop': $(location.hash).offset().top - 200
                //--OFFSET--//
            }, 500);

            if (location.hash.includes('comment_goal')) {
                $("#goal_comments").toggle();
            }
            else if (location.hash.includes('comment')) {
                let id = $(location.hash).parent().data('id');
                console.log(id)
                $('#solution_comments_' + id).toggle();
                console.log($('#solution_comments_' + id))
            }

            let x = JSON.parse('{{src_list|safe}}')

            x.data.forEach(element => {
                $('#solution_iframe_' + element.solution_id).attr('src', getEmbed(element.link))
            });

            let selector = location.hash;
            $(selector).addClass('gradient-border')
            $(selector).css('border-radius', 10);
        }
    });
</script>
{% endblock content %}