{% 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 project in projects %}
<article class="media content-section" style="padding: 20px;">
    <div class="media-body">
        <div style="display:flex; justify-content: space-between;">
            <h3>
                <a class="article-title" href="{{ url_for('project_bp.project', project_name=project.slug) }}">
                    {{sentence_case(project.title) }}
                </a>
            </h3>
            <div class="d-flex flex-column-reverse" style="float: right;">
                <div class="row-gap justify-content-end">
                    <a class="row-gap justify-content-end" style="margin-right: 5px;" href="#" data-toggle="tooltip"
                        title="Stars receieved">
                        <h5 class="bold">
                            {{ project.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>
                    </a>
                    <a class="row-gap justify-content-end" href="#" data-toggle="tooltip"
                        title="Comments receieved">
                        <h5 class="bold">{{ project.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>
                    </a>
                </div>
            </div>
        </div>
        <h3 style="font-size: 14px;">
            <a class="article-title" href="{{ url_for('project_bp.project', project_name=project.slug) }}">
                {{sentence_case(project.description) }}
            </a>
        </h3>

        <div class="row">
            <div class="col-md-9 height-gap flex-column">
                <div class="article-metadata">
                    {% for tag in project.tags %}
                    <a class="badge badge-light transparent-tag" style="color: white; margin-top: 6px;"
                        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" style="margin-top: 4px;">
                    <img class="rounded-circle" style="width:32px;"
                        src="{{ url_for('static', filename='profile_pics/' + project.poster.image_file) }}">
                    <h6 class="grey-text" style="padding-top:10px; font-size: 14px;">
                        <a href="{{ url_for('profile_bp.user_profile', username=project.poster.username) }}"
                            class="bold" style="color: white;">
                            {{ project.poster.username }}
                        </a> • {{ project.elapsed_time() }}
                    </h6>
                </div>
            </div>
            <a class="d-flex flex-column-reverse no-underline" style="margin-left: 40px;"
                href="{{ url_for('project_bp.project', project_name=project.slug) }}">
                <button class="button-view">View Project<i class="fa fa-caret-right fa-lg"
                        style="color: #157ffb; margin-left: 10px;"></i></button>
            </a>
        </div>
    </div>
</article>
{% endfor %}

{% endblock content%}