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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"
    type="text/javascript"></script>
<script src="{{url_for('static', filename='bootstrap3-typeahead.js')}}"></script>
<script src="{{url_for('static', filename='urlify.js')}}"></script>
<script src="{{url_for('static', filename='images-grid.js')}}"></script>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='images-grid.css') }}">
<script src="{{url_for('static', filename='github_preview.js')}}"></script>
<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">
                <div style="cursor: pointer;">
                    <i class="fa fa-share" id="shr-btn" style="color: white;"></i>
                </div>
            </div>
            <div class="row"
                style="gap: 5px; margin-right: 1px; padding: 8px; padding-left: 18px; padding-right: 15px; border: solid; border-radius: 30px; border-color:#EDF0FA; border-width: 2px;">
                <a class="row-gap-small justify-content-end no-underline d-flex align-items-center" href="#"
                    data-toggle="tooltip" title="Total stars receieved">
                    <h4 class="bold no-margin-bottom">{{ project.star_count }}</h4>
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#FFB900"
                        class="bi bi-star-fill" viewBox="0 0 16 16">
                        <path
                            d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
                    </svg>
                </a>
                <a class="row-gap-small justify-content-end no-underline d-flex align-items-center" href="#"
                    data-toggle="tooltip" title="Total comments received">
                    <h4 class="bold" style="margin-bottom:0px; margin-left: 8px;" id="project_comment">
                        {{project.comment_count }}</h4>
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#00D1FF"
                        class="bi bi-chat-fill" viewBox="0 0 16 16">
                        <path
                            d="M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9.06 9.06 0 0 0 8 15z" />
                    </svg>
                </a>
            </div>
        </div>
    </div>
    <div class="row" style="margin-bottom: 35px;">
        <a class="d-flex align-items-center"
            href="{{ url_for('project_bp.project_people',project_name=project.slug) }}">
            <img src="{{ url_for('static', filename='icons/project_back.svg') }}">
            <b class="no-margin-bottom" style="color: white; font-size: 34px;">{{ back }}</b>
        </a>
    </div>

</article>

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

{% block content %}

{% for post in latest %}
<div class="latest-section">
    {% if post.type== 'project' %}

    <div class="latest-header">
        <img width="34px" style="border-radius: 17px; margin-left: 5px; margin-right: 5px;"
            src="{{ url_for('static', filename='profile_pics/' + post.poster.image_file) }}">
        <a class="white-a latest-grey"
            href="{{ url_for('profile_bp.user_profile', username=post.poster.username) }}">{{post.poster.username}}</a>
        <p class="latest-grey"> posted a new project </p>
        <!-- <p class="latest-grey">• {{post.elapsed_time()}}</p> -->
    </div>

    <div class="d-flex justfiy-content-center">
        <article class="media content-section"
            style="padding: 20px; width: 100%; margin-bottom: unset; border-top-left-radius: unset; border-top-right-radius: unset;">
            <div class="media-body">
                <div class="row">
                    <div class="col-md-9 height-gap flex-column">
                        <h4>
                            <a class="article-title" style="word-break: break-all;"
                                href="{{ url_for('project_bp.project', project_name=post.slug) }}">
                                {{ sentence_case(post.title) }}
                            </a>
                        </h4>
                        <div class="article-metadata">
                            {% for tag in post.tags %}
                            <a class="badge badge-light transparent-tag" style="color: white;"
                                href="{{ url_for('main_bp.home', tag_id=tag.id) }}">
                                {{ sentence_case(tag.title) }}
                            </a>
                            {% endfor %}
                        </div>
                        <div class="row-gap d-flex align-items-center">
                            <img class="rounded-circle" style="width:32px;"
                                src="{{ url_for('static', filename='profile_pics/' + post.poster.image_file) }}">
                            <h6 class="grey-text" style="padding-top:10px; font-size: 14px;">
                                <a href="{{ url_for('profile_bp.user_profile', username=post.poster.username) }}"
                                    class="bold" style="color: white;">
                                    {{ post.poster.username }}
                                </a> on {{ post.date_posted.strftime('%A - %d %b %Y') }}
                            </h6>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <a class="d-flex flex-column-reverse no-underline"
                            href="{{ url_for('project_bp.project', project_name=post.slug) }}">
                            <button class="button-view">View Project<i class="fa fa-caret-right fa-lg"
                                    style="color: #00CA2C; margin-left: 10px;"></i></button>
                        </a>
                        <div class="d-flex flex-column-reverse">
                            <div class="row-gap justify-content-end margin-top">
                                <h5 class="bold">
                                    {{ post.star_count }}
                                </h5>
                                <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>
                                <h5 class="bold">{{ post.comment_count }}</h5>
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#00D1FF"
                                    class="bi bi-chat-fill" viewBox="0 0 16 16">
                                    <path
                                        d="M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9.06 9.06 0 0 0 8 15z" />
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
        </article>
    </div>

    {% elif post.type== 'comment' %}

    <div class="latest-header">
        <img width="34px" style="border-radius: 17px;margin-right: 5px; margin-left: 5px;"
            src="{{ url_for('static', filename='profile_pics/' + post.get_post().poster.image_file) }}">
        <a class="white-a" href="{{ url_for('profile_bp.user_profile', username=post.get_post().poster.username) }}">
            {{post.get_post().poster.username}}
        </a>

        <p class="latest-grey"> received a comment in </p>
        <a class="white-a" href="{{ url_for('project_bp.project', project_name=post.get_post().project.slug) }}">
            {{post.get_post().project.title}}
        </a>
        <!-- <p class="latest-grey"> • {{post.elapsed_time()}} </p> -->
    </div>

    {% if post.get_post().type== 'goal' %}
    <a class="latest-content-section" style="height: max-content; padding-bottom: 20px; display: block;"
        href="{{ url_for('project_bp.detail_goal', project_name=post.project.slug, goal_id=post.id ,_anchor='comment_goal_'+ (post.id|string)) }}">
        <div style="display: flex; padding-bottom: 0; align-items: center;">
            <div class="latest-star-a">
                <h5 class="d-flex align-items-center bold no-margin-bottom" style="color: white;">
                    {{post.star_count}}
                </h5>
                <img width="18" src="{{ url_for('static', filename='icons/star.svg') }}">
            </div>

            <h5 class="latest-font-style2" style="margin:0;">
                "{{post.body}}"
            </h5>
        </div>

        <object>
            <a class="post-inner"
                href="{{ url_for('project_bp.project', project_name=post.project.slug, _anchor='goal_'+ (post.get_post().id|string)) }}">
                <div class="latest-star-a" style="background-color:transparent;">
                    <h5 class="d-flex align-items-center bold no-margin-bottom" style="color: white;">
                        {{post.get_post().star_count}}
                    </h5>
                    <img width="18" src="{{ url_for('static', filename='icons/star.svg') }}">
                </div>
                <img width="24" src="{{ url_for('static', filename='icons/goal_icon.svg') }}">
                <p class="latest-comment-detail-font">
                    {{post.get_post().description}}
                </p>
            </a>
        </object>
    </a>
    {% elif post.get_post().type== 'solution' %}
    <a class="latest-content-section" style="height: max-content; padding-bottom: 20px; display: block;"
        href="{{ url_for('project_bp.detail_goal', project_name=post.project.slug, goal_id = post.get_post().goal.id, _anchor='comment_'+ (post.id|string)) }}">
        <div style="display: flex; padding-bottom: 0; align-items: center;">
            <div class="latest-star-a">
                <h5 class="d-flex align-items-center bold no-margin-bottom" style="color: white;">
                    {{post.star_count}}
                </h5>
                <img width="18" src="{{ url_for('static', filename='icons/star.svg') }}">
            </div>

            <h5 class="latest-font-style2" style="margin:0;">
                "{{post.body}}"
            </h5>
        </div>

        <object>
            <a class="post-inner"
                href="{{ url_for('project_bp.detail_goal', project_name=post.project.slug, goal_id = post.get_post().goal.id,_anchor='solution_'+ (post.get_post().id|string)) }}">
                <div class="latest-star-a" style="background-color:transparent;">
                    <h5 class="d-flex align-items-center bold no-margin-bottom" style="color: white;">
                        {{post.get_post().star_count}}
                    </h5>
                    <img width="18" src="{{ url_for('static', filename='icons/star.svg') }}">
                </div>
                <img width="24" src="{{ url_for('static', filename='sol-icons/'+post.get_post().get_icon('light')) }}">
                <p class="latest-comment-detail-font">
                    {{post.get_post().title}}
                </p>
            </a>
        </object>
    </a>
    {% elif post.get_post().type== 'project' %}
    <a class="latest-content-section" style="height: max-content; padding-bottom: 20px; display: block;"
        href="{{ url_for('project_bp.project', project_name=post.project.slug) }}">
        <div style="display: flex; padding-bottom: 0; align-items: center;">
            <div class="latest-star-a">
                <h5 class="d-flex align-items-center bold no-margin-bottom" style="color: white;">
                    {{post.star_count}}
                </h5>
                <img width="18" src="{{ url_for('static', filename='icons/star.svg') }}">
            </div>

            <h5 class="latest-font-style2" style="margin:0;">
                "{{post.body}}"
            </h5>
        </div>

        <object>
            <a class="post-inner" href="{{ url_for('project_bp.project', project_name=post.project.slug) }}">
                <div class="latest-star-a" style="background-color:transparent;">
                    <h5 class="d-flex align-items-center bold no-margin-bottom" style="color: white;">
                        {{post.get_post().star_count}}
                    </h5>
                    <img width="18" src="{{ url_for('static', filename='icons/star.svg') }}">
                </div>
                <img width="24" src="{{ url_for('static', filename='icons/project.svg') }}">
                <p class="latest-comment-detail-font">
                    {{post.get_post().title}}
                </p>
            </a>
        </object>
    </a>
    {% endif %}

    {% elif post.post_type == 'goal' %}
    <div class="latest-header">
        <img width="34px" style="border-radius: 17px; margin-left: 5px; margin-right: 5px;"
            src="{{ url_for('static', filename='profile_pics/' + post.poster.image_file) }}">
        <a class="white-a"
            href="{{ url_for('profile_bp.user_profile', username=post.poster.username) }}">{{post.poster.username}}</a>

        <p class="latest-grey">
            posted a new goal
        </p>
        <a class="white-a" href="{{ url_for('project_bp.project', project_name=post.project.slug) }}">
            in {{post.project.title}}
        </a>
        <!-- <p class="latest-grey">
            • {{post.elapsed_time()}}
        </p> -->
    </div>

    <a class="latest-content-section" style="height: max-content; display: flex; padding-bottom: 0;"
        href="{{ url_for('project_bp.project', project_name=post.project.slug, _anchor='goal_'+ (post.id|string)) }}">
        <div class="row-gap highlight-box align-items-center"
            style="background-color: #2D355F0A; border-radius: 50px; width: 60px; margin: 20px;">
            <h5 class="d-flex align-items-center bold no-margin-bottom" style="color: white;">
                {{post.star_count}}
            </h5>
            <img src="{{ url_for('static', filename='icons/star.svg') }}">

        </div>

        <h5 class="latest-font-style2" style="margin-top: auto; margin-bottom: auto;">
            "{{post.description}}"
        </h5>
    </a>

    {% elif post.type== 'solution' %}

    <div class="latest-header">
        <img width="34px" style="border-radius: 17px; margin-right: 5px;"
            src="{{ url_for('static', filename='profile_pics/' + post.poster.image_file) }}">
        <a class="white-a"
            href="{{ url_for('profile_bp.user_profile', username=post.poster.username) }}">{{post.poster.username}}</a>
        <p class="latest-grey">
            posted a new solution
        </p>
        <p class="latest-grey">
            in
        </p>
        <a class="white-a" href="{{ url_for('project_bp.project', project_name=post.project.slug) }}">
            {{post.project.title}}
        </a>
        <!-- <p class="latest-grey">
            • {{post.elapsed_time()}}
        </p> -->
    </div>

    <a class="latest-content-section" style="height: max-content;"
        href="{{ url_for('project_bp.detail_goal', project_name=post.project.slug, goal_id = post.goal.id,_anchor='solution_'+ (post.id|string)) }}">
        <article class="goal-detail-sol detail-text" id="solution_{{post.id}}" style="margin-top: 0;">

            <div class="solution-body">
                <div style=" display: flex; align-items: center; padding-top: 20px;">
                    <div class="row-gap highlight-box d-flex align-items-center"
                        style="background-color: #2D355F0A; border-radius: 50px; width: 60px; margin-left: 20px;;"
                        id="solution_a_{{post.id}}">
                        <h5 class="d-flex align-items-center bold no-margin-bottom" style="color: white;"
                            id="solution_h5_{{post.id}}">{{post.star_count }}</h5>

                        <img id="solution_star_{{post.id}}" {% if post.gave_star(current_user) %}
                            src="{{ url_for('static', filename='icons/check.svg') }}" {% else %}
                            src="{{ url_for('static', filename='icons/star.svg') }}" {% endif %}>
                    </div>

                    <img src="{{ url_for('static', filename='sol-icons/' + post.get_icon('light')) }}"
                        style="margin-left: 15px; width: 20px; height: 20px; fill: white;">

                    <h5 class="goal-detail-sol-title">
                        <!--  BURASI BAŞLIKK -->
                        {{post.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 -->
                        {{post.description}}
                    </h5>
                </div>

                {% if post.type == SolutionType.Code %}
                <hr>
                <div style="display: flex;justify-content: space-between; align-items: center;">
                    <p id="solution-code-info-{{post.id}}" style="margin: 0; margin-left: 20px;">
                        <script>
                            GitHubInfo('#solution-code-info-{{post.id}}', '{{post.link}}');
                        </script>
                    </p>
                    <object>
                        <a href="{{post.link}}" target="_blank" style="margin-right: 20px;">
                            <button class="btn btn-light"
                                style="height: unset; background-color: #4082F6; color:white;">View on
                                GitHub</button>
                        </a>
                    </object>
                </div>

                <hr>

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

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

                {% elif post.type == SolutionType.Photo %}
                <div class="goal-detail-photo-container" id="photo-container-{{post.id}}" style="margin-top: 15px;">
                    {% for image in post.images %}
                    <img src="{{ url_for('static', filename='solution_images/'+image.image_file) }}">
                    {% endfor %}
                </div>

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

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

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

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

                {% elif post.type == SolutionType.PDF %}

                <iframe loading="lazy" src="{{ url_for('static', filename='PDFs/'+post.folder) }}" width="100%"
                    height="500px" style="margin-top: 15px;"></iframe>

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

            <div class="solution-footer" style="padding-bottom: unset; padding-top: 15px; gap: 5px;">

                <h6 class="goal-detail-footer-font" style="font-size: 14px; margin: 0;">

                </h6>
                <img class="rounded-circle" style="width:24px; height: 24px; margin: 0;"
                    src="{{ url_for('static', filename='profile_pics/' + post.poster.image_file) }}">
                <h6 class="goal-detail-footer-font" style="font-size: 14px; margin: 0;">
                    {{post.poster.username }}
                </h6>

                {% if post.can_delete(current_user) %}
                <div class="modal fade" id="delete_solution{{ post.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(post.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',{{post.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{{ post.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>
                {% endif %}
            </div>
        </article>
    </a>

    {% elif post.type== 'star' %}

    <div class="latest-header">

        <img width="34px" style="border-radius: 17px; margin-left: 5px; margin-right: 5px;"
            src="{{ url_for('static', filename='profile_pics/' + post.post.poster.image_file) }}">

        <a class="white-a" href="{{ url_for('profile_bp.user_profile', username=post.post.poster.username) }}">
            {{post.post.poster.username}}
        </a>
        <p class="latest-grey"> received a star in</p>

        <a class="white-a" href="{{ url_for('project_bp.project', project_name=post.get_post().project.slug) }}">
            {{post.get_post().project.title}}
        </a>
    </div>

    {% if post.get_post().type== 'comment' %}
    <a class="latest-content-section" style="height: max-content; padding-bottom: 0;" href="#">
        <div style="display: flex; padding-bottom: 0; align-items: center;">
            <a class="latest-star-a">
                <h5 class="d-flex align-items-center bold no-margin-bottom" style="color: white;">
                    {{post.get_post().star_count}}
                </h5>
                <img width="18" src="{{ url_for('static', filename='icons/star.svg') }}">
            </a>
            <img height="24" src="{{ url_for('static', filename='icons/comment.svg') }}">
            <h5 class="latest-font-style2" style="margin:0; margin: 20px;">
                "{{post.get_post().body}}"
            </h5>
        </div>
    </a>
    {% endif %}

    {% if post.get_post().type== 'goal' %}
    <a class="latest-content-section" style="height: max-content; padding-bottom: 0;" href="#">
        <div style="display: flex; padding-bottom: 0; align-items: center;">
            <a class="latest-star-a">
                <h5 class="d-flex align-items-center bold no-margin-bottom" style="color: white;">
                    {{post.get_post().star_count}}
                </h5>
                <img width="18" src="{{ url_for('static', filename='icons/star.svg') }}">
            </a>
            <img height="24" src="{{ url_for('static', filename='icons/goal_icon.svg') }}">
            <h5 class="latest-font-style2" style="margin:0; margin: 20px;">
                {{post.get_post().description}}
            </h5>
        </div>
    </a>
    {% endif %}

    {% if post.get_post().type== 'solution' %}
    <a class="latest-content-section" style="height: max-content; padding-bottom: 0;" href="#">
        <div style="display: flex; padding-bottom: 0; align-items: center;">
            <a class="latest-star-a">
                <h5 class="d-flex align-items-center bold no-margin-bottom" style="color: white;">
                    {{post.get_post().star_count}}
                </h5>
                <img width="18" src="{{ url_for('static', filename='icons/star.svg') }}">
            </a>
            <img height="24" src="{{ url_for('static', filename='sol-icons/'+post.get_post().get_icon('light')) }}">
            <h5 class="latest-font-style2" style="margin:0; margin: 20px;">
                {{post.get_post().title}}
            </h5>
        </div>
    </a>
    {% endif %}
    {% endif %}
</div>
{% endfor %}
<script src="{{url_for('static', filename='project.js')}}"></script>
<script>
    $(".tab-slider--nav li").click(function () {
        $(".tab-slider--body").hide();
        var activeTab = $(this).attr("rel");
        $("#" + activeTab).fadeIn();
        if ($(this).attr("rel") == "tab2") {
            $('.tab-slider--tabs').addClass('slide');
            document.getElementById('goal_type').value = 'internal';
        } else {
            $('.tab-slider--tabs').removeClass('slide');
            document.getElementById('goal_type').value = 'external';
        }
        $(".tab-slider--nav li").removeClass("active");
        $(this).addClass("active");
    });


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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