{% 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>
    <a class="list-group-item row-gap" href="{{ url_for('admin_bp.articles_control')}}">
        <div class="d-flex align-items-center" style="color: white;">
            All Articles
        </div>
    </a>
</ul>
{% endblock sidebar %}



{% block content %}

<div style="display: grid; grid-template-columns: repeat( auto-fit, minmax(100px, 1fr) );">
    <div class="admin-dashboard">
        <p>{{user_count}}</p>
        <p>Users</p>
    </div>
    <div class="admin-dashboard">
        <p>{{projects_count}}</p>
        <p>Projects</p>
    </div>
    <div class="admin-dashboard">
        <p>{{challenges_count}}</p>
        <p>Challenges</p>
    </div>
    <div class="admin-dashboard">
        <p>{{solutions_count}}</p>
        <p>Solutions</p>
    </div>
    <div class="admin-dashboard">
        <p>{{comments_count}}</p>
        <p>Comments</p>
    </div>
    <div class="admin-dashboard">
        <p>{{feedback_count}}</p>
        <p>Feedbacks</p>
    </div>
    <div class="admin-dashboard">
        <p>{{reports_count}}</p>
        <p>Reports</p>
    </div>
</div>

{% endblock content%}