{% extends "mobile-layout.html" %} {% macro sentence_case(text) %}
{{text[0]|upper}}{{text[1:] }} {% endmacro %} {% block header %}
<style>
    article.page-header {
        display: flex
    }
</style>
<script src="{{url_for('static', filename='urlify.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>
    $(document).ready(function () {
        $('[data-toggle="tooltip"]').tooltip();

        if ("{{toastMessage|safe}}" != "") {
            vt.success('{{toastMessage|safe}}', { position: 'top-right' });
        }
    });
</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') }}">


<!-- 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 class="d-flex align-items-center" style="margin-top: -30px;">
        <b class="no-margin-bottom project-title" style="color: white; font-size: 34px;">{{project.title}}</b>
    </div>

    <div class="d-flex align-items-center">
        <p class="no-margin-bottom" style="color: white; font-size: 20px;">{{ project.tagline }}</p>
    </div>


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

    <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 style="cursor: pointer;">
                    <i class="fa fa-share" style="color: white;"></i>
                </div>
            </div>

        </div>
    </div>

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

    <div>
        <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>

                <p style="opacity: 70%; color: white; font-size: 14px; margin: 0;"> created by
                    <img class="rounded-circle" style="width:24px; height: 24px; margin-left: 5px; margin-right: 5px;"
                        src="{{ url_for('static', filename='profile_pics/' + project.poster.image_file) }}">
                    <a href="{{ url_for('profile_bp.user_profile', username=project.poster.username) }}"
                        style="color:inherit !important; text-decoration: none !important;">
                        {{project.poster.username}}
                    </a>
                </p>
            </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-bottom: 30px; overflow: scroll;">
        <a class="button-tab-clear no-underline d-flex justify-content-center" style="gap: 15px;"
            href="{{ url_for('project_bp.project', project_name=project.slug) }}">
            <svg width="22" height="22" viewBox="0 0 20 20" fill="#4082F6" 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="#4082F6" fill-opacity="0.98" />
            </svg>
            Posts
        </a>
        <a class="button-tab-clear no-underline d-flex justify-content-center" style="gap: 15px; 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" 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="#56CCF2" />
            </svg>
            Browse
        </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_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="#4082F6" />
            </svg>
            Team
        </a>
        {% if project.can_delete(current_user) %}
        <a class="button-tab-clear no-underline d-flex justify-content-center" style="gap: 15px; 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>
{% endblock header %}
{% block content %}
<div class="row">
    <div class="col-md-6">
        <article class="page-header">
            <h4 class="black-text no-margin-bottom">Contributors</h4>
        </article>
        {% if project.get_contributors()|length ==0 %}
        <article class="empty-state">
            This project does not yet have any Goal posted an Goal is anything your project needs to be solved
            to
            reach its goal
        </article>
        {% endif %}

        {% for user in project.get_contributors() %}
        <div class="contributor" style="margin-bottom: 15px;">
            <div style="align-items: center; padding: 10px; display: flex;">

                <img style="height: 44px; border-radius: 22px; margin: 10px"
                    src="{{ url_for('static', filename='profile_pics/'+user.image_file) }}">

                <div class="contributors-header-text" style="margin-left: 15px;">
                    <p class="m0">
                        {{user.username}}
                    </p>
                    <div class="d-flex align-items-center" style="margin-top: 4px; margin-bottom:7px">
                        {% if project.poster == user %}
                        <p class="m0" style="color: orange; font-size: 12px;">
                            Project Owner
                        </p>
                        <p class="grey-text m0" style="margin-left: 6px; margin-right:6px;">-</p>
                        {% endif %}
                        <h5 class="contributor-post-font m0">

                            {{user.get_post_count(project.id)}} posts
                        </h5>
                    </div>
                    <div class="team-icons">
                        {% for icon,count in user.get_solution_types('light',project.id).items() recursive %}
                        {% if count != 0 %}

                        <img class="icon-14" src="{{ url_for('static', filename='sol-icons/'+icon) }}">
                        <h5 class="contributor-post-font" style="color: white;">{{count}}</h5>

                        {% endif %}
                        {% endfor %}
                    </div>
                </div>
                <div style="margin-left: auto;">
                    <a class="contributor-arrow-background" style="padding: 8 15 8 15;"
                        href="{{ url_for('project_bp.latest_user', project_name=project.slug, user=[user.username]) }}">
                        <img src="{{ url_for('static', filename='icons/contributor_arrow.svg') }}">
                    </a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    <!-- <div class="col-md-6">
        <article class="page-header">
            <h4 class="black-text no-margin-bottom">Groups</h4>
        </article>
        {% for tag in category_count recursive %}
        <div class="stakeholder-people">
            <a class="stakeholder-people-font" href="{{ url_for('project_bp.challenges', project_name=project.slug, stakeholder=[tag[1]]) }}">
                {{tag[1]}}
            </a>
            <div class="stakeholder-people-font ml-auto">
                {{tag[0]}} Goals
            </div>

            <a class="d-flex align-items-center" style="margin-right: 20px"
                href="{{ url_for('project_bp.challenges', project_name=project.slug, stakeholder=[tag[1]]) }}">
                <div class="contributor-arrow-background" style=" margin-left: 15px;">
                    <img style="padding-left: 15px; padding-top: 8.5px;"
                        src="{{ url_for('static', filename='icons/contributor_arrow.svg') }}">
                </div>
            </a>
        </div>
        {% endfor %}
    </div> -->
</div>

<script>
    let btn = document.getElementById("shr-btn");
    btn.addEventListener("click", async () => {
        try {
            await navigator.share({ title: "Crowd.inc", text: "Check this project", url: "" });
        } catch (err) {
            console.error("Share failed:", err.message);
        }
    });
</script>

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