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

<script src="{{url_for('static', filename='embed_links.js')}}"></script>
<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='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>
<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>
<script src="{{url_for('static', filename='urlify.js')}}"></script>

<script>
    var users = [];
    $(document).ready(function () {
        $.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>

<style>
    .goal-detail-sol {
        border-radius: 16px;
    }
</style>

<!-- Delete Comment Modal -->
<div class="modal fade" id="delete_comment" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
    data-backdrop="static" data-focus-on="input:first" 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 Comment Modal -->
<div class="modal fade" id="delete_comment" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
    data-focus-on="input:first" aria-hidden="true" style="z-index: 1061;">
    <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>
    <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>
    </div>
    <div class="row">
        <div class="d-flex align-items-center">
            <b class="no-margin-bottom project-title" style="color: white; font-size: 34px;">
                {{ project.title }}
            </b>
        </div>
    </div>

    <h6 class="d-flex align-items-center" id="project_description_text" style="margin-top: 25px; margin-bottom: 25px;">
        <script>
            var abc = document.getElementById('project_description_text')
            abc.innerHTML = urlify('{{project.description}}');
        </script>
    </h6>

    <div class="d-flex align-items-center" style="margin-bottom: 1.5rem;">
        <div class="d-flex align-items-center " style="gap: 15px;">
            <div>
                {% if not current_user.is_authenticated %}
                <div class="highlight-box d-flex align-items-center justify-content-center"
                    style="width: 85px; height: 44px;">
                    <h5 class="bold no-margin-bottom">
                        {{ project.star_count }}
                    </h5>
                    <img src="{{ url_for('static', filename='icons/star.svg') }}">
                </div>
                {% elif current_user.id == project.poster.id %}
                <div class="d-flex highlight-box align-items-center justify-content-center"
                    style="width: 85px; height: 44px;">
                    <h5 class="bold no-margin-bottom">
                        {{ project.star_count }}
                    </h5>
                    <img src="{{ url_for('static', filename='icons/star.svg') }}">
                </div>
                {% elif not current_user.email_confirmed %}
                <a class="d-flex highlight-box align-items-center justify-content-center"
                    style="width: 85px; height: 44px;"
                    onclick="vt.error('You have to confirm email!', { position: 'top-right' });">
                    <h5 class="bold no-margin-bottom">
                        {{ project.star_count }}
                    </h5>
                    <img id="goal_star_{{goal.id}}" src="{{ url_for('static', filename='icons/star.svg') }}">
                </a>
                {% elif project.gave_star(current_user) %}
                <a class="d-flex highlight-box align-items-center star_button justify-content-center star_button"
                    style="background-color: white; width: 85px; height: 44px;" data-id="{{project.id}}"
                    data-category="project">
                    <h5 class="bold black-text no-margin-bottom">
                        {{ project.star_count }}
                    </h5>
                    <img src="{{ url_for('static', filename='icons/check.svg') }}">
                </a>
                {% else %}
                <a class="d-flex highlight-box align-items-center star_button justify-content-center star_button"
                    style="width: 85px; height: 44px;" data-id="{{project.id}}" data-category="project">
                    <h5 class="bold no-margin-bottom">
                        {{ project.star_count }}
                    </h5>
                    <img src="{{ url_for('static', filename='icons/star.svg') }}">
                </a>
                {% endif %}
            </div>
            <comment-button style="margin-right: unset;">
                <h4 class="bold" style="margin-bottom:0px; margin-left: 8px;" id="project_comment_count_{{project.id}}">
                    {{project.comment_count }}</h4>
                <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>
        </div>

        <p style="opacity: 70%; color: white; font-size: 14px; margin: 0; margin-left: 1rem;"> Created by</p>

        <img class="rounded-circle" style="width:24px; height: 24px; margin-left: 8px; margin-right: 8px;"
            src="{{ url_for('static', filename='profile_pics/' + project.poster.image_file) }}">

        <a href="{{ url_for('profile_bp.user_profile', username=project.poster.username) }}"
            style="opacity: 70%; color: white; font-size: 14px; margin: 0; margin-right: 8px;">
            {{project.poster.username}}
        </a>

        <div style="margin: 0; font-size: 14px; display: flex; margin-left: 8px; gap: 6px;">
            {% for tag in project.tags %}
            <div class="stakeholders">
                <h5 class="stakeholder-font">
                    {{tag.title}}
                </h5>
            </div>
            {% endfor %}
        </div>
    </div>

    <div>
        <comments id="project_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) }}">
                {% 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 style="padding: 10px;" id="project_comment_text_{{project.id}}" class="comment-field"
                        contenteditable="true" data-text="Type in a comment"></div>
                    <script>
                        $('#project_comment_text_{{project.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="{{project.id}}" data-category="project">
                    <img src="{{ url_for('static', filename='icons/comment-send.svg') }}">
                </button>
            </div>
            <div class="user-comments" id="comment_project_{{project.id}}" style="padding-bottom: 1rem;">
                {% for comment in project.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 = 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>
                {% endfor %}
            </div>
        </comments>
    </div>

    <div class="d-flex" style=" margin-top: 15px;">
        <a class="button-tab-clear no-underline d-flex justify-content-center" style="gap: 10px;"
            href="{{ url_for('project_bp.project', project_name=project.slug) }}">
            <svg width="22" height="22" viewBox="0 0 20 20" fill="#56CCF2" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M13.4375 8.6875L14.3438 8.84375C14.4375 9.21875 14.5 9.59375 14.5 10C14.5 12.5 12.4688 14.5 10 14.5C7.5 14.5 5.5 12.5 5.5 10C5.5 7.53125 7.5 5.5 10 5.5C10.4062 5.5 10.7812 5.5625 11.1562 5.65625L11.3125 6.5625L10.3438 7.53125C10.2188 7.53125 10.0938 7.5 10 7.5C8.59375 7.5 7.5 8.625 7.5 10C7.5 11.4062 8.59375 12.5 10 12.5C11.375 12.5 12.5 11.4062 12.5 10C12.5 9.90625 12.4688 9.78125 12.4688 9.65625L13.4375 8.6875ZM17.5312 7.375C17.8125 8.1875 18 9.09375 18 10C18 14.4375 14.4062 18 10 18C5.5625 18 2 14.4375 2 10C2 5.59375 5.5625 2 10 2C10.9062 2 11.8125 2.1875 12.625 2.46875L11 4.09375C10.6562 4.03125 10.3125 4 10 4C6.65625 4 4 6.6875 4 10C4 13.3125 6.65625 16 10 16C13.3125 16 16 13.3125 16 10C16 9.6875 15.9688 9.34375 15.9062 9L17.5312 7.375ZM10.5 10.5312C10.2188 10.8438 9.75 10.8438 9.46875 10.5312C9.15625 10.25 9.15625 9.78125 9.46875 9.46875L12.3438 6.59375L12.0625 5.03125C12.0312 4.71875 12.125 4.375 12.3438 4.15625L13.9375 2.5625C14.1875 2.3125 14.625 2.375 14.7812 2.71875L15.5 4.5L17.2812 5.21875C17.625 5.375 17.6875 5.78125 17.4375 6.0625L15.8438 7.65625C15.625 7.875 15.2812 7.96875 14.9688 7.9375L13.4062 7.65625L10.5 10.5312Z"
                    fill="#56CCF2" fill-opacity="0.98" />
            </svg>
            Posts
        </a>
        <a class="button-tab-clear no-underline d-flex justify-content-center" style="gap: 10px; margin-left: 15px;"
            href="{{ url_for('project_bp.project_latest', project_name=project.slug) }}">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="2.5" y="13.125" width="15" height="1.25" rx="0.625" fill="#56CCF2" />
                <rect x="2.5" y="9.375" width="15" height="1.875" rx="0.9375" fill="#56CCF2" />
                <rect x="2.5" y="5" width="15" height="2.5" rx="1.25" fill="#56CCF2" />
            </svg>
            Activity
        </a>
<!--         <a class="button-tab-clear no-underline d-flex justify-content-center button-sel-hover"
            style="gap: 15px; margin-left: 15px;"
            href="{{ url_for('project_bp.project_browse', project_name=project.slug) }}">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M15.8037 18.75C17.4737 18.75 18.75 17.3063 18.75 15.625V6.25H1.25V15.625C1.25 17.3063 2.52625 18.75 4.19625 18.75H15.8037ZM6.875 8.75H13.125C13.2908 8.75 13.4497 8.81585 13.5669 8.93306C13.6842 9.05027 13.75 9.20924 13.75 9.375C13.75 9.54076 13.6842 9.69973 13.5669 9.81694C13.4497 9.93415 13.2908 10 13.125 10H6.875C6.70924 10 6.55027 9.93415 6.43306 9.81694C6.31585 9.69973 6.25 9.54076 6.25 9.375C6.25 9.20924 6.31585 9.05027 6.43306 8.93306C6.55027 8.81585 6.70924 8.75 6.875 8.75V8.75ZM1 1.25C0.734784 1.25 0.48043 1.35536 0.292893 1.54289C0.105357 1.73043 0 1.98478 0 2.25L0 3.75C0 4.01522 0.105357 4.26957 0.292893 4.45711C0.48043 4.64464 0.734784 4.75 1 4.75H19C19.2652 4.75 19.5196 4.64464 19.7071 4.45711C19.8946 4.26957 20 4.01522 20 3.75V2.25C20 1.98478 19.8946 1.73043 19.7071 1.54289C19.5196 1.35536 19.2652 1.25 19 1.25H1Z"
                    fill="#4082F6" />
            </svg>
            Browse
        </a> -->
        <a class="button-tab-clear no-underline d-flex justify-content-center" style="gap: 10px; margin-left: 15px;"
            href="{{ url_for('project_bp.project_people', project_name=project.slug) }}">
            <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="M13.3934 6.75C13.3934 8.54493 11.8741 10 10 10C8.12591 10 6.60664 8.54493 6.60664 6.75C6.60664 4.95507 8.12591 3.5 10 3.5C11.8741 3.5 13.3934 4.95507 13.3934 6.75ZM15.9278 15.3169C15.5246 13.7824 14.2203 11.3 10 11.3C5.77976 11.3 4.4754 13.7824 4.07226 15.3169C3.90386 15.9579 4.42918 16.5 5.09193 16.5H14.9081C15.5709 16.5 16.0962 15.9579 15.9278 15.3169Z"
                    fill="#56CCF2" />
            </svg>
            Team
        </a>
        {% if project.can_delete(current_user) %}
        <a class="button-tab-clear no-underline d-flex justify-content-center" style="gap: 10px; margin-left: 15px;"
            href="{{ url_for('project_bp.project_settings', project_name=project.slug) }}">
            <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="M9.66821 3C9.34414 3 9.05673 3.20816 8.95566 3.51606L8.67274 4.37795C8.59625 4.61099 8.40965 4.78924 8.17879 4.87208C7.9979 4.937 7.82006 5.00927 7.6469 5.0897C7.42158 5.19435 7.16011 5.20265 6.93828 5.09081L6.15032 4.69354C5.86125 4.54781 5.51131 4.604 5.2824 4.83291L4.83291 5.2824C4.604 5.5113 4.54781 5.86125 4.69354 6.15032L5.09081 6.93828C5.20265 7.16011 5.19435 7.42158 5.0897 7.6469C5.00927 7.82006 4.937 7.9979 4.87208 8.17879C4.78924 8.40965 4.61099 8.59625 4.37795 8.67274L3.51606 8.95566C3.20816 9.05673 3 9.34414 3 9.66821V10.3318C3 10.6559 3.20816 10.9433 3.51606 11.0443L4.37795 11.3273C4.61099 11.4038 4.78924 11.5903 4.87208 11.8212C4.9381 12.0052 5.01173 12.186 5.0938 12.3619C5.19654 12.5822 5.20724 12.8373 5.10226 13.0565L4.71977 13.8552C4.58237 14.1421 4.64093 14.4845 4.86587 14.7094L5.32352 15.1671C5.55243 15.396 5.90238 15.4522 6.19144 15.3065L6.9794 14.9092C7.20123 14.7973 7.46273 14.8057 7.68857 14.9092C7.86468 14.9899 8.04652 15.0624 8.2304 15.1276C8.46316 15.2101 8.65033 15.3906 8.72565 15.6258L8.99882 16.4788C9.09827 16.7893 9.38697 17 9.71304 17H10.3725C10.6965 17 10.984 16.7918 11.085 16.4839L11.3679 15.6221C11.4444 15.389 11.631 15.2106 11.8622 15.1288C12.0496 15.0624 12.2349 14.9884 12.4142 14.9058C12.6358 14.8038 12.892 14.7935 13.1116 14.8996L13.8979 15.2793C14.1837 15.4173 14.5255 15.3604 14.7513 15.1373L15.2146 14.6793C15.4472 14.4493 15.5039 14.095 15.3547 13.8039L14.9541 13.0222C14.84 12.7996 14.8475 12.536 14.9516 12.3085C15.0309 12.1355 15.1021 11.9569 15.1664 11.7762C15.2504 11.5399 15.4354 11.3508 15.6754 11.2778L16.4683 11.0367C16.7841 10.9406 17 10.6493 17 10.3192V9.66821C17 9.34414 16.7918 9.05673 16.4839 8.95566L15.6221 8.67274C15.389 8.59625 15.2108 8.40965 15.1279 8.17879C15.0619 7.99483 14.9883 7.81402 14.9062 7.63809C14.8035 7.41783 14.7928 7.16268 14.8977 6.94348L15.2802 6.14478C15.4176 5.85787 15.3591 5.5155 15.1341 5.29056L14.6765 4.83291C14.4476 4.604 14.0976 4.54781 13.8086 4.69354L13.0206 5.09081C12.7988 5.20265 12.5373 5.19433 12.3115 5.09075C12.1386 5.01144 11.9602 4.94004 11.7797 4.87581C11.5415 4.79102 11.3513 4.60387 11.2793 4.3615L11.0343 3.53643C10.9398 3.21822 10.6473 3 10.3154 3H9.66821ZM10 6.93729C11.7062 6.93729 13.0623 8.29345 13.0623 9.9996C13.0623 11.7057 11.7062 13.0619 10 13.0619C8.29388 13.0619 6.93771 11.7057 6.93771 9.9996C6.93771 8.29345 8.29388 6.93729 10 6.93729Z"
                    fill="#56CCF2" />
            </svg>
            Settings
        </a>
        {% endif %}
    </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 %}
{% if solutions|count == 0 %}
<article class="empty-state" style="margin-top: 30px;">
    This project does not have any solutions yet.
</article>
{% else %}
<div style="margin: 0; display: flex; margin-top: 20px;">
    <div>
        <article class="browse-asset-types" style="min-width: 300px;">
            <a {% if asset_type==None %} class="browse-asset-type selected" {% else %} class="browse-asset-type" {%
                endif %} href="{{ url_for('project_bp.project_browse', project_name=project.slug) }}">
                <p class="browse-asset-font" style="margin-left: 20px;">
                    All
                </p>
                <b class="browse-asset-count">
                    {{project.solutions|length}}
                </b>
                <div class="browse-asset-star">
                    {{project.get_total_solution_stars()}}
                    <svg width="25" height="25" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M8.12475 1.08383C8.50519 0.395393 9.49481 0.395394 9.87525 1.08383L11.9125 4.77033C12.0559 5.02984 12.3071 5.21233 12.5982 5.26853L16.7338 6.06685C17.5061 6.21593 17.8119 7.15711 17.2747 7.73167L14.3982 10.8084C14.1957 11.025 14.0997 11.3202 14.1363 11.6145L14.655 15.7944C14.7519 16.5749 13.9512 17.1566 13.2388 16.8233L9.42379 15.0383C9.15524 14.9126 8.84476 14.9126 8.57621 15.0383L4.76119 16.8233C4.04875 17.1566 3.24814 16.5749 3.34501 15.7944L3.86374 11.6145C3.90025 11.3202 3.80431 11.025 3.60182 10.8084L0.725277 7.73167C0.188101 7.15711 0.49391 6.21593 1.26621 6.06685L5.40182 5.26853C5.69295 5.21233 5.94412 5.02984 6.08753 4.77033L8.12475 1.08383Z"
                            fill="#FFB900" />
                    </svg>

                </div>
            </a>
            {% for icon,value in project.get_all_solutions('light').items() recursive %}
            {% if value.count != 0 %}
            <a {% if value.type==asset_type %} class="browse-asset-type selected" {% else %} class="browse-asset-type"
                {% endif %}
                href="{{ url_for('project_bp.project_browse', project_name=project.slug,asset_type=value.type) }}">
                <img class="browse-asset-image" src="{{ url_for('static', filename='sol-icons/'+icon) }}">

                <p class="browse-asset-font">
                    {{value.type}}
                </p>
                <b class="browse-asset-count">
                    {{value.count}}
                </b>
                <div class="browse-asset-star">
                    {{value.star}}
                    <svg width="25" height="25" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M8.12475 1.08383C8.50519 0.395393 9.49481 0.395394 9.87525 1.08383L11.9125 4.77033C12.0559 5.02984 12.3071 5.21233 12.5982 5.26853L16.7338 6.06685C17.5061 6.21593 17.8119 7.15711 17.2747 7.73167L14.3982 10.8084C14.1957 11.025 14.0997 11.3202 14.1363 11.6145L14.655 15.7944C14.7519 16.5749 13.9512 17.1566 13.2388 16.8233L9.42379 15.0383C9.15524 14.9126 8.84476 14.9126 8.57621 15.0383L4.76119 16.8233C4.04875 17.1566 3.24814 16.5749 3.34501 15.7944L3.86374 11.6145C3.90025 11.3202 3.80431 11.025 3.60182 10.8084L0.725277 7.73167C0.188101 7.15711 0.49391 6.21593 1.26621 6.06685L5.40182 5.26853C5.69295 5.21233 5.94412 5.02984 6.08753 4.77033L8.12475 1.08383Z"
                            fill="#FFB900" />
                    </svg>

                </div>
            </a>
            {% endif %}
            {% endfor %}
        </article>
    </div>
    <div style="margin-left: 20px; width: 100%;">
        <div class="goal" id="solutions">



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

                    <h5 class="goal-detail-sol-title">
                        <!--  BURASI BAŞLIKK -->
                        {{solution.title}}
                    </h5>
                    <div class="ml-auto" style="margin-right: 20px;">
                        {% 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;">
                        <!--  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="padding-top: 12px;">
                    {% 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" style="padding-top: 12px; border: none;"></iframe>

                {% elif solution.link!=None %}
                <div style="display: flex; justify-content: center; padding-top: 12px;">
                    <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: 15;">
                    <comment-button style="margin-right: 10px;">
                        <h5 id="solution_comment_count_{{solution.id}}"
                            class="align-items-center bold no-margin-bottom">
                            {{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 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) }}">
                            {% 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 style="padding: 10px;" id="solution_comment_text_{{solution.id}}"
                                    class="comment-field" contenteditable="true" data-text="Type in a comment"></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>
                        </div>
                        <div class="user-comments" id="comment_solution_{{solution.id}}" style="padding-bottom: 1rem;">
                            {% 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 = 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>
                            {% endfor %}
                        </div>
                    </comments>
                </div>
            </article>
            {% endfor %}
        </div>
    </div>
</div>
{% endif %}
<script>
    $(document).ready(function () {
        try {
            let link = $(".browse-asset-type.selected").find('img')[0].src.replace('light', 'dark')
            $(".browse-asset-type.selected").find('img').attr('src', link);
        } catch (error) { }

        $(".browse-asset-type").not('.selected').hover(function () {
            try {
                let link = $(this).find('img')[0].src.replace('light', 'dark')
                $(this).find('img').attr('src', link);
            } catch (e) { }
        }, function () {
            try {
                let link = $(this).find('img')[0].src.replace('dark', 'light')
                $(this).find('img').attr('src', link);
            } catch (e) { }
        });
    });
</script>

{% endblock left %}


{% block right %}
<script src="{{url_for('static', filename='project.js')}}"></script>
{% endblock right %}