{% extends "layout-right.html" %} {% macro sentence_case(text) %} {{
text[0]|upper}}{{text[1:] }} {% endmacro %}
{% block header %}
<style>
    .list-group-item:first-child {
        border-radius: 10px;
    }

    .list-group-item:last-child {
        border-radius: 10px;
    }
</style>
{% endblock header%}

{% block sidebar %}
<ul class="list-group">
    <a class="list-group-item row-gap" href="{{ url_for('admin_bp.users')}}">
        <div class="d-flex align-items-center" style="color: white;">
            All Users
        </div>
    </a>
    <a class="list-group-item row-gap" href="{{ url_for('admin_bp.projects')}}">
        <div class="d-flex align-items-center" style="color: white;">
            All Projects
        </div>
    </a>
    <a class="list-group-item row-gap" href="{{ url_for('admin_bp.challenges')}}">
        <div class="d-flex align-items-center" style="color: white;">
            All Challenges
        </div>
    </a>
    <a class="list-group-item row-gap" href="{{ url_for('admin_bp.solutions')}}">
        <div class="d-flex align-items-center" style="color: white;">
            All Solutions
        </div>
    </a>
    <a class="list-group-item row-gap" href="{{ url_for('admin_bp.get_comments()')}}">
        <div class="d-flex align-items-center" style="color: white;">
            All Comments
        </div>
    </a>
    <a class="list-group-item row-gap" href="{{ url_for('admin_bp.feedbacks')}}">
        <div class="d-flex align-items-center" style="color: white;">
            All Feedbacks
        </div>
    </a>
    <a class="list-group-item row-gap" href="{{ url_for('admin_bp.reports')}}">
        <div class="d-flex align-items-center" style="color: white;">
            All Reports
        </div>
    </a>
</ul>
{% endblock sidebar %}

{% block content %}

{% 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>
        {% if current_user.id == solution.poster.id or not current_user.is_authenticated %}
        <a class="sol-star ml-auto" style="background-color: #2D355F0A;" id="solution_a_{{solution.id}}">
            <h5 style="margin: 0; font-weight: bold;" id="solution_h5_{{solution.id}}">
                {{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 ml-auto" onclick="vt.error('You have to confirm email!', { position: 'top-right' });"
            style="background-color: #2D355F0A;" id="solution_a_{{solution.id}}">
            <h5 style="margin: 0; font-weight: bold;" id="solution_h5_{{solution.id}}">
                {{solution.star_count }}
            </h5>

            <img id="solution_star_{{solution.id}}" src="{{ url_for('static', filename='icons/star.svg') }}">
        </a>
        {% else %}
        <a class="sol-star ml-auto" style="background-color: #2D355F0A;" id="solution_a_{{solution.id}}">
            <h5 style="margin: 0; font-weight: bold;" id="solution_h5_{{solution.id}}">
                {{solution.star_count }}
            </h5>

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

    </div>
    <div 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 class="row" style="margin-right: 15px; margin-left: 5px;">
            <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 style="padding-top: 6px; margin-left: auto; margin-right: 20px;" href="" data-toggle="modal"
            data-target="#delete_solution{{ solution.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>
    <!-- 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 %}
                <textarea oninput="linecount(this)" style="padding: 10px;" placeholder="Type in a comment"
                    id="solution_comment_text_{{solution.id}}" class="comment-field-1"></textarea>
                <button class="comment-send-button">
                    <img src="{{ url_for('static', filename='icons/comment-send.svg') }}">
                </button>
            </div>
            <div class="user-comments" id="comment_solution_{{solution.id}}">
                {% for comment in solution.get_comments() %}
                <div class="content-section" style="border-radius: 10px;" id="comment_{{comment.id}}">
                    <h6 style="margin-top: 10px;" id="comments_{{comment.id}}">
                        <script>
                            var abc = document.getElementById('comments_{{comment.id}}')
                            abc.innerHTML = urlify('{{comment.body}}');
                        </script>
                    </h6>
                    <div class="row d-flex align-items-center">
                        <div class="col-md-9 row-gap d-flex align-items-center">
                            <img class="rounded-circle" style="width:32px;"
                                src="{{ url_for('static', filename='profile_pics/' + comment.poster.image_file) }}">
                            <h4 style="padding-top:10px; font-size: 14px;">
                                {{ comment.poster.username }} • {{ comment.date_posted.strftime('%d %b
                                %H:%M')
                                }}
                            </h4>
                            {% if current_user.id == comment.poster.id %}
                            <a style="padding-top: 2px" href="" data-toggle="modal" data-target="#delete_comment"
                                onclick="showDeleteCommentModal('solution',{{solution.id}},{{comment.id}},'{{comment.body}}')">
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M15.4219 5.86511C15.1111 3.86979 13.3929 2.39844 11.3735 2.39844H8.78385C6.77331 2.39844 5.06797 3.87521 4.78063 5.86511H3.50886C2.94737 5.86511 2.49219 6.32029 2.49219 6.88178C2.49219 7.44327 2.94737 7.89844 3.50886 7.89844H4.78063V15.2984C4.78063 16.5871 5.90125 17.6318 7.28361 17.6318H12.9153C14.2977 17.6318 15.4183 16.5871 15.4183 15.2984V7.89844H16.4755C17.037 7.89844 17.4922 7.44327 17.4922 6.88178C17.4922 6.32029 17.037 5.86511 16.4755 5.86511H15.4219ZM11.5439 8.98511C11.9581 8.98511 12.2939 9.24998 12.2939 9.57671V13.9102C12.2939 14.2369 11.9581 14.5018 11.5439 14.5018C11.1297 14.5018 10.7939 14.2369 10.7939 13.9102V9.57671C10.7939 9.24998 11.1297 8.98511 11.5439 8.98511ZM8.71719 8.98511C9.1314 8.98511 9.46719 9.24998 9.46719 9.57671V13.9102C9.46719 14.2369 9.1314 14.5018 8.71719 14.5018C8.30297 14.5018 7.96719 14.2369 7.96719 13.9102V9.57671C7.96719 9.24998 8.30297 8.98511 8.71719 8.98511ZM11.7658 4.06511C12.3695 4.06511 12.918 4.4166 13.1701 4.96511L13.3232 5.29804C13.4154 5.49876 13.3275 5.73627 13.1268 5.82855C13.0744 5.85264 13.0174 5.86511 12.9597 5.86511H7.23653C7.01561 5.86511 6.83653 5.68603 6.83653 5.46511C6.83653 5.402 6.85146 5.33978 6.88011 5.28355L7.04232 4.96511C7.32365 4.41284 7.89104 4.06511 8.51083 4.06511H11.7658ZM13.5839 14.7984C13.5839 15.3507 13.0838 15.7984 12.4668 15.7984H7.70088C7.08396 15.7984 6.58386 15.3507 6.58386 14.7984V8.19844C6.58386 7.9223 6.80771 7.69844 7.08386 7.69844H13.0839C13.36 7.69844 13.5839 7.9223 13.5839 8.19844V14.7984Z"
                                        fill="#5C6492" />
                                </svg>
                            </a>
                            {% endif %}
                        </div>
                        <div class="col-md-3 d-flex justify-content-end">
                            {% if current_user.id == comment.poster.id or not current_user.is_authenticated %}
                            <div class="row-gap highlight-box d-flex align-items-center">
                                <h5 class="d-flex align-items-center bold no-margin-bottom">{{ comment.star_count }}
                                </h5>
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="#FFB900"
                                    class="bi bi-star-fill" viewBox="0 0 16 16">
                                    <path
                                        d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
                                </svg>
                            </div>
                            {% else %}
                            <a id="comment_a_{{ comment.id }}" {% if comment.gave_star(current_user) %}
                                class="highlight-box d-flex align-items-center check-fill"
                                style="background-color: white; width: 60px;" {% else %}
                                class="highlight-box d-flex align-items-center" style="width: 60px;" {% endif %}>
                                <h5 id="comment_h5_{{ comment.id }}" {% if comment.gave_star(current_user) %}
                                    class="bold black-text no-margin-bottom" {% else %}
                                    class="d-flex align-items-center bold no-margin-bottom" {% endif %}>{{
                                    comment.star_count }}
                                </h5>
                                <img id="comment_star_{{comment.id}}" {% if comment.gave_star(current_user) %}
                                    src="{{ url_for('static', filename='icons/check.svg') }}" {% else %}
                                    src="{{ url_for('static', filename='icons/star.svg') }}" {% endif %}>
                            </a>
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </comments>
    </div>
</article>
{% endfor %}

{% endblock content%}