{% extends "layout-split.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',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>

<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 left %}

<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>
            <h5 class="semibold" style="margin-top: 10px; font-size: 20px;"
                href="{{ url_for('project_bp.project', project_name=project.slug) }}">
                {{sentence_case(goal.description) }}
            </h5>

            <comment-button class="ml-auto mr-1" style="border-radius: 10px;">
                <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>
        </div>

        <div class="row-gap d-flex align-items-center" style="margin-top: 20px;">
            <div class="row row-gap d-flex align-items-center" style="padding-left: 20px;">
                <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>
                {% if current_user.id == goal.poster.id %}
                <a style="padding-top: 6px;" 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 YERİ -->
        <comments id="goal_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_{{comment.id}}">
                <div class="content-section" style="margin-top: 20px" id="comment_{{comment.id}}">
                    <h6 style="margin-top: 10px; color: white;" 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="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>
            </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: 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 class="goal-detail-header" style="padding-bottom: 0;">
            <div class="d-flex align-items-center" style="margin: 0; padding: 20px; gap: 8px;">
                <p class="solution-header-font m0" href="javascript:void(0)">
                    {{goal.solutions|length}}
                </p>
                <p class="solution-header2-font m0">Solutions</p>
                {% 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="border-radius: 16px;">
                <div style=" display: flex; align-items: center; padding-top: 20px; margin-left: 20px; ">
                    <div>
                        {% 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>
                    <img src="{{ url_for('static', filename='sol-icons/' + solution.get_icon('light')) }}"
                        style="width: 20px; height: 20px; margin-left: 10px;">

                    <h5 class="goal-detail-sol-title">
                        <!--  BURASI BAŞLIKK -->
                        {{solution.title}}
                    </h5>
                </div>
                <div style="margin-left:20px;">
                    <h5 class="goal-detail-sol-title" style="margin-left: auto; margin-right: 15px; margin-top: 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;">
                        <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;">View on
                            GitHub</button>
                    </a>
                </div>

                <hr>

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

                <hr style="margin-bottom: 0;">

                {% elif solution.attachment_type == SolutionType.Photo %}
                <div class="goal-detail-photo-container" id="photo-container-{{solution.id}}" style="margin-top: 15px;">
                    {% 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%"
                    style="margin-top: 15px;" height="500px"></iframe>

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

                {% endif %}

                <div class="solution-footer" style="padding-bottom: unset; padding-top: 15px;">
                    <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" style="font-size: 14px; margin: 0;">
                         
                    </h6>
                    <img class="rounded-circle" style="width:24px; height: 24px; margin: 0 6 0 6;"
                        src="{{ url_for('static', filename='profile_pics/' + solution.poster.image_file) }}">
                    <h6 class="goal-detail-footer-font" style="font-size: 14px; margin: 0;">
                        {{solution.poster.username }} • {{ solution.elapsed_time() }}
                    </h6>

                    {% if solution.can_delete(current_user) %}
                    <div class="modal fade" id="delete_solution{{ solution.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 solution?
                                </div>
                                <h4 class="black-text"
                                    style="margin-left: 30px; margin-right: 30px; margin-bottom: 30px;">
                                    {{ sentence_case(solution.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}},'solution',{{solution.id}});"
                                        data-dismiss="modal" aria-label="Close"> Delete Solution </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <a class="ml-auto" style="margin-right: 20px;" 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 id="solution_comments_{{solution.id}}" 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) }}">
                            <div style="width: 100%;">
                                <div style="padding: 10px;" data-text="Type in a comment"
                                    id="solution_comment_text_{{solution.id}}" class="comment-field"
                                    contenteditable="true"></div>
                                <script>
                                    $('#solution_comment_text_{{solution.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>
                            <button class="comment-send-button" data-id="{{solution.id}}" data-category="solution">
                                <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 style="padding: 10px;" placeholder="Type in a comment"
                                id="solution_comment_text_{{solution.id}}" class="comment-field"></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}}" data-id="{{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 m0" style="width:32px;"
                                            src="{{ url_for('static', filename='profile_pics/' + comment.poster.image_file) }}">
                                        <h4 class="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>
                </div>
            </article>
            {% endfor %}
        </div>
        {% endif %}
    </div>

</article>
{% endblock left %}

{% block right %}
<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) {
            if (location.hash.includes('comment_goal')) {
                $("#goal_comments").toggle();
            }
            else if (location.hash.includes('comment')) {
                let id = $(location.hash).parent().data('id');
                $('#solution_comments_' + id).toggle();
            }

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

            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 right %}