{% extends "layout-right.html" %} {% macro sentence_case(text) %} {{
text[0]|upper}}{{text[1:] }} {% endmacro %}
{% block header %}
<script src="{{url_for('static', filename='dropzone.js')}}"></script>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='dropzone.css') }}">

<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>
    <p style="text-align: center; color: white;">Upload a New Blog</p>

    <div style="margin-bottom: 1rem;margin-right: -20px;">
        <form enctype="multipart/form-data" class="dropzone" id="blog_upload"></form >
    </div>
</div>

<div style="display: grid;">
    <p style="color: white; text-align: center;">Uploaded Blogs - {{ blogs | length }}</p>
    {% for blog in blogs %}
    <article class="article" style="margin-bottom: 1.5rem;" id="blog_{{blog.id}}">
        <div class="d-flex align-items-center">
            <a href="#" onclick="delete_blog({{blog.id}});"> <img
                    src="{{url_for('static', filename='icons/cross.svg')}}"> </a>
            <p class="m0">{{ blog.title }}</p>
        </div>
    </article>
    {% endfor %}
</div>

<script>
    function delete_blog(blog_id) {
        $.ajax({
            type: "POST",
            url: '/admin/delete_blog',
            dataType: "json",
            data: JSON.stringify({ 'blog_id': blog_id }),
            contentType: 'application/json;charset=UTF-8',
            success: function (data) {
                $('#blog_' + blog_id).remove();
            }
        });
    }

    $('#blog_upload').dropzone({
        url: Flask.url_for('admin_bp.handle_blog_file'),
        autoProcessQueue: true,
        uploadMultiple: true,
        parallelUploads: 100,
        dictDefaultMessage: "Drop your DOCX file",
        acceptedFiles: ".docx",
    });
</script>

{% endblock content%}