{% extends "mobile-layout.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>
<style>
    .jmentions-dropdown {
        margin-left: 0 !important;
    }
    .ment{
        margin: 0 5 0 5;
    }
</style>
<script>
    var users = [];
    $(document).ready(function () {
        $('[data-toggle="tooltip"]').tooltip();
        if ("{{toastMessage|safe}}" != "") {
            vt.success("{{toastMessage|safe}}", { position: 'top-right' });
        }

        $.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);
                });
            }
        });
    });
</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>
{% endblock header %}

{% block content %}
<!-- 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>
<!-- Delete Project Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel"
    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="deleteModalLabel">Delete Project?</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <h4 class="black-text" style="margin: 30px;">
                Are you sure you would like to delete this project?
            </h4>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <form action="{{ url_for('project_bp.delete_project', project_id=project.id) }}" method="POST">
                    <input class="btn btn-danger mt-3" type="submit" value="Delete">
                </form>
            </div>

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

<article class="d-flex" style="margin-left: 15px;">
    <div class="row" style="margin-bottom: 15px;">
        <a class="d-flex align-items-center" href="{{ url_for('project_bp.project',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; ">
                {{ project.title }}
            </b>
        </a>
    </div>
</article>

<article id="goal_{{goal.id}}" class="content-section" style="padding: 20px;">
    <div class="media-body">
        <div>
            <div class="d-flex align-items-center">
                <h5 class="semibold m0" style="font-size: 20px;padding-right: 10px;"
                    href="{{ url_for('project_bp.project', project_name=project.slug) }}">
                    {{sentence_case(goal.description) }}
                </h5>
                <div class="ml-auto" style="display: grid; gap: 10px;">
                    {% if not current_user.is_authenticated %}
                    <div class="highlight-box d-flex align-items-center" style="background-color: transparent;">
                        <h5 class="d-flex align-items-center bold no-margin-bottom">
                            {{ goal.star_count }}
                        </h5>
                        <img src="{{ url_for('static', filename='icons/star.svg') }}">
                    </div>
                    {% elif current_user.id == goal.poster.id %}
                    <div class="highlight-box d-flex align-items-center" style="background-color: transparent;">
                        <h5 class="d-flex align-items-center bold no-margin-bottom">
                            {{ 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 class="d-flex align-items-center bold no-margin-bottom">
                            {{ goal.star_count }}
                        </h5>
                        <img 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 %}
                    <comment-button style="background-color: unset; padding: 0; margin: 0;">
                        <div class="d-flex 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>
                </div>
            </div>
        </div>

        <div style="margin-top: 10px; display: grid; gap: 10px;">
            <div class="row row-gap d-flex align-items-center" style="padding-left: 15px;">
                <h6 class="grey-text no-margin-bottom m0" 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 m0" style="font-size: 14px;">{{
                    goal.poster.username
                    }} • {{ goal.elapsed_time() }}
                </h6>
            </div>

            <div class="d-flex align-items-center" style="gap: 10px;">
                {% if goal.can_delete(current_user) %}
                <a style="padding-top: 6px; margin-left: auto;" href="" data-toggle="modal"
                    data-target="#delete_goal{{ goal.id }}">
                    <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>

                <!-- 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>
                {% endif %}
            </div>
        </div>

        <!--goal COMMENT SECTION -->
        <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}}" data-text="Type in a comment"
                                    class="comment-field" contenteditable="true"></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 current_user.is_authenticated %}
                                <button class="comment-send-button" style="margin-top: 0px; height: 38px;"
                                    data-id="{{goal.id}}" data-category="goal">
                                    <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>
            {% for comment in goal.get_comments() %}
            <div id="comment_goal_{{goal.id}}">
                <div class="content-section" style="margin-top: 20px" id="comment_{{comment.id}}">
                    <h6 style="margin-top: 10px; color: white; display: flex; align-items: baseline;"
                        id="comments_{{comment.id}}">
                        <script>
                            var abc = document.getElementById('comments_{{comment.id}}')
                            abc.innerHTML = mentionify(urlify('{{comment.body}}')).replace(/[\u200B-\u200D\uFEFF]/g, '');
                        </script>
                        <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>
                    </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 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)">
                                <img src="{{ url_for('static', filename='icons/trash.svg') }}">
                            </a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </comments>

        {% 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: 90px; margin-top: 20px;">
                <h5 class="align-self-center" style="color: #5C6492;">No solutions yet. Feel free to
                    suggest a solution to this goal</h5>
            </div>
        </div>
        {% else %}
        <div class="goal-detail-header">
            <div class="d-flex align-items-center" style="padding-top: 15px; padding-bottom: 10px;">
                <p class="solution-header-font" style="margin: 0; margin-left: 20px;" href="javascript:void(0)">
                    {{goal.solutions|length}}
                </p>
                <p class="solution-header2-font" style="margin: 0; margin-left: 8px;">Solutions</p>
            </div>

            <div class="d-flex align-items-center" style="margin: 0; flex-wrap: wrap;  margin-left: 20px; gap:10px;">
                {% for icon,count in goal.get_solution_types_counts('light').items() recursive %}
                {% if count != 0 %}

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

                {% endif %}
                {% endfor %}
            </div>
        </div>

        <div class="goal" id="goal_{{goal.id}}_solutions">
            {% for solution in goal.solutions %}
            <article class="goal-detail-sol detail-text" id="solution_{{solution.id}}"
                style="width: calc(100% + 40px);margin-left: -20px; padding-bottom: 0;">
                <div style=" display: flex; align-items: center; padding-top: 20px;">
                    <img src="{{ url_for('static', filename='sol-icons/' + solution.get_icon('light')) }}"
                        style="margin-left: 20px; width: 20px; height: 20px; fill: white;">

                    <h5 class="goal-detail-sol-title" style="width: 160px; width: auto;">
                        <!--  BURASI BAŞLIKK -->
                        {{solution.title}}
                    </h5>

                    <div style="margin-right: 15px;">
                        {% if not current_user.is_authenticated %}
                        <a class="sol-star" onclick="vt.error('Please register or login!', { position: 'top-right' });">
                            <h5 style="color: white; 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">
                            <h5 style="color: white; 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">
                            <h5 style="color: white; 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 solution.gave_star(current_user) %}
                        <a class="sol-star star_button" style="background-color: white;" data-id="{{solution.id}}"
                            data-category="solution">
                            <h5 class="bold black-text no-margin-bottom">
                                {{ solution.star_count }}
                            </h5>
                            <img src="{{ url_for('static', filename='icons/check.svg') }}">
                        </a>
                        {% else %}
                        <a class="sol-star star_button" data-id="{{solution.id}}" data-category="solution">
                            <h5 class="d-flex align-items-center bold no-margin-bottom">
                                {{ solution.star_count }}
                            </h5>
                            <img src="{{ url_for('static', filename='icons/star.svg') }}">
                        </a>
                        {% endif %}
                    </div>
                </div>
                <div style="margin-left:20px">
                    <h5 class="goal-detail-sol-title"
                        style="margin-left: auto; margin-right: 15px; margin-top: 15px; padding-bottom: 15px">
                        <!--  BURASI AÇIKLAMA -->
                        {{solution.description}}
                    </h5>
                </div>


                {% if solution.attachment_type == SolutionType.Code %}
                <hr>
                <div style="display: flex;justify-content: space-between; align-items: center;">
                    <p id="solution-code-info-{{solution.id}}" style="margin: 0; margin-left: 20px;">
                        <!-- username  |  ⭐️1.2k Stars  ⑂ 112 Forks [firmware] [manager] [bluetooth] [earbuds] [+3] -->
                        <script>
                            GitHubInfo('#solution-code-info-{{solution.id}}', '{{solution.link}}');
                        </script>
                    </p>
                    <a href="{{solution.link}}" target="_blank" style="margin-right: 20px;">
                        <button class="btn btn-light"
                            style="background-color: #4082F6; color:white; height: unset;">View on GitHub</button>
                    </a>
                </div>

                <hr>

                <div style="margin-left: 20px; margin-bottom: 20px;">
                    <div class="solution-code-mobile" id="solution-code-{{solution.id}}">
                        <script>
                            GitHubPreview('#solution-code-{{solution.id}}', '{{solution.link}}');
                        </script>
                    </div>
                </div>
                <hr>

                {% elif solution.attachment_type == SolutionType.Photo %}
                <div class="goal-detail-photo-container" id="photo-container-{{solution.id}}">
                    {% for image in solution.images %}
                    <img src="{{ url_for('static', filename='solution_images/'+image.image_file) }}">
                    {% endfor %}
                </div>

                <script>
                    photo_array = $('#photo-container-{{solution.id}} img').toArray();
                    src_array = [];
                    if (photo_array.length > 0) {
                        photo_array.forEach(image => {
                            src_array.push(image.src);
                        });
                    }

                    $('#photo-container-{{solution.id}}').imagesGrid({

                        images: src_array,
                        align: true,
                        cells: 4,
                        nextOnClick: true,
                        showViewAll: 'more',

                        getViewAllText: function (imgsCount) { return 'View all ' + imgsCount }
                    });
                </script>

                {% elif solution.attachment_type == SolutionType.PDF %}

                <iframe loading="lazy" src="{{ url_for('static', filename='PDFs/'+solution.folder) }}" width="100%"
                    height="500px"></iframe>

                {% elif solution.link!=None %}
                <div style="display: flex; justify-content: center; padding-bottom: 10px;">
                    <iframe loading="lazy" style="border: 1px solid rgba(0, 0, 0, 0.1); width: 100%;"
                        onload="this.src=getEmbed('{{solution.link}}'); this.removeAttribute('onload');" {% if
                        solution.type !=SolutionType.Audio %} height="450" {% endif %} allowfullscreen>
                    </iframe>
                </div>
                {% endif %}

                <div class="solution-footer" style="padding-top: 0; flex-wrap: wrap;">
                    <comment-button>
                        <h5 id="solution_comment_count_{{solution.id}}" class="align-items-center bold no-margin-bottom"
                            style="color: white;">
                            {{solution.comment_count}}
                        </h5>
                        <img src="{{ url_for('static', filename='icons/comment.svg') }}" style="margin-left: 10px;">
                        <img style="margin-left: 6px;" src="{{ url_for('static', filename='icons/comment-show.svg') }}">
                    </comment-button>

                    <h6 class="goal-detail-footer-font m0" style="font-size: 14px;">
                          
                    </h6>
                    <img class="rounded-circle m0" style="width:24px; height: 24px; margin: 0 5 0 5"
                        src="{{ url_for('static', filename='profile_pics/' + solution.poster.image_file) }}">
                    <h6 class="goal-detail-footer-font m0" style="font-size: 14px;">
                        {{solution.poster.username }} • {{ solution.elapsed_time() }}
                    </h6>
                </div>
                <!-- <div class="d-flex ml-auto" style="margin-right: 24px;">
                    {% if solution.can_delete(current_user) %}
                    <a style="margin-left: auto;" href="" data-toggle="modal"
                        data-target="#delete_solution{{ solution.id }}">
                        <img src="{{ url_for('static', filename='icons/trash.svg') }}">
                    </a>
                    {% endif %}
                </div> -->
                <!-- COMMENT SECTION -->
                <div class="comment-section">
                    <comments style="display: none;">
                        <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) }}">

                            <textarea oninput="linecount(this)" style="padding: 10px;"
                                id="solution_comment_text_{{solution.id}}" class="comment-field-1"></textarea>
                            <button class="comment-send-button"
                                onclick="addComment({{project.id}},'solution',{{solution.id}},'{{current_user.username}}','{{current_user.image_file}}')">
                                <img src="{{ url_for('static', filename='icons/comment-send.svg') }}">
                            </button>
                            {% else %}
                            <img class="rounded-circle" style="width:48px; height: 48px; margin-right: 10px;"
                                src="{{ url_for('static', filename='profile_pics/default.jpg') }}">

                            <textarea oninput="linecount(this)" style="padding: 10px;"
                                id="solution_comment_text_{{solution.id}}" class="comment-field-1"></textarea>
                            <button class="comment-send-button"
                                onclick="vt.error('You have to Register',{position: 'top-right'});">
                                <img src="{{ url_for('static', filename='icons/comment-send.svg') }}">
                            </button>
                            {% endif %}

                        </div>
                        <div class="user-comments" id="comment_solution_{{solution.id}}">
                            {% for comment in solution.get_comments() %}
                            <div class="content-section" style="border-radius: 10px;" 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 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 width="20" height="20" viewBox="0 0 20 20" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path fill-rule="evenodd" clip-rule="evenodd"
                                                    d="M15.4219 5.86511C15.1111 3.86979 13.3929 2.39844 11.3735 2.39844H8.78385C6.77331 2.39844 5.06797 3.87521 4.78063 5.86511H3.50886C2.94737 5.86511 2.49219 6.32029 2.49219 6.88178C2.49219 7.44327 2.94737 7.89844 3.50886 7.89844H4.78063V15.2984C4.78063 16.5871 5.90125 17.6318 7.28361 17.6318H12.9153C14.2977 17.6318 15.4183 16.5871 15.4183 15.2984V7.89844H16.4755C17.037 7.89844 17.4922 7.44327 17.4922 6.88178C17.4922 6.32029 17.037 5.86511 16.4755 5.86511H15.4219ZM11.5439 8.98511C11.9581 8.98511 12.2939 9.24998 12.2939 9.57671V13.9102C12.2939 14.2369 11.9581 14.5018 11.5439 14.5018C11.1297 14.5018 10.7939 14.2369 10.7939 13.9102V9.57671C10.7939 9.24998 11.1297 8.98511 11.5439 8.98511ZM8.71719 8.98511C9.1314 8.98511 9.46719 9.24998 9.46719 9.57671V13.9102C9.46719 14.2369 9.1314 14.5018 8.71719 14.5018C8.30297 14.5018 7.96719 14.2369 7.96719 13.9102V9.57671C7.96719 9.24998 8.30297 8.98511 8.71719 8.98511ZM11.7658 4.06511C12.3695 4.06511 12.918 4.4166 13.1701 4.96511L13.3232 5.29804C13.4154 5.49876 13.3275 5.73627 13.1268 5.82855C13.0744 5.85264 13.0174 5.86511 12.9597 5.86511H7.23653C7.01561 5.86511 6.83653 5.68603 6.83653 5.46511C6.83653 5.402 6.85146 5.33978 6.88011 5.28355L7.04232 4.96511C7.32365 4.41284 7.89104 4.06511 8.51083 4.06511H11.7658ZM13.5839 14.7984C13.5839 15.3507 13.0838 15.7984 12.4668 15.7984H7.70088C7.08396 15.7984 6.58386 15.3507 6.58386 14.7984V8.19844C6.58386 7.9223 6.80771 7.69844 7.08386 7.69844H13.0839C13.36 7.69844 13.5839 7.9223 13.5839 8.19844V14.7984Z"
                                                    fill="#5C6492" />
                                            </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">
                                            <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 }}" {% if comment.gave_star(current_user) %}
                                            class="highlight-box d-flex align-items-center check-fill"
                                            style="width: 60px;" {% else %}
                                            class="highlight-box d-flex align-items-center" style="width: 60px;" {%
                                            endif %} onclick="addStar({{project.id}},'comment',{{comment.id}});">
                                            <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>
                </div>
            </article>
            {% endfor %}
        </div>
        {% endif %}
    </div>

</article>

<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>
{% endblock content%}