{% extends 'admin_dash/base.html' %}


{% load static %}
{% load humanize %}
{% block content %}
<script src="https://cdn.ckeditor.com/ckeditor5/30.0.0/classic/ckeditor.js"></script>
<div class="content-wrapper">
    <div class="content">
        <div class="row">
            {% for field in form %}
            {% for error in field.errors %}
            <label class="text-{{msg.tags}} text-center col-12" style="text-align: center;">{{error}}</label>
            {% endfor %}
            {% endfor%}
            {% for msg in messages %}

            <label class="text-{{msg.tags}} text-center col-12" style="text-align: center;">{{msg}}</label>

            {% endfor%}
            <div class="col-xl-6 col-lg-6 col-12">
                <!-- Top Sell Table -->
                <div class="card card-table-border-none" data-scroll-height="550">
                    <div class="card-header justify-content-between">
                        <h2>Drafted Blogs</h2>

                    </div>
                    <div class="card-body slim-scroll py-0">
                        <table class="table ">
                            <tbody>
                                {% for blog in the_blogs %}
                                {% if blog.status == 'Drafted'%}
                                <tr>
                                    <td class="text-dark col-6">{{blog.title}}<br><small>{{blog.date_created}}</small></td>
                                    
                                    <td class="text-suceess"><a href="{% url 'edit_blog' blog.id %}">edit blog</a></td>
                                    <td class="text-suceess"><a href="#" data-toggle="modal" data-target="#blog_del{{blog.id}}">delete blog</a></td>
                                </tr>
                                {% endif %}
                                 <div class="modal fade" id="blog_del{{blog.id}}" tabindex="-1" aria-labelledby="exampleModalLabel"
                            aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel">Blog Deletion</h5>
                                        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        {{user.email}}<br><br>
                                        Are you sure you want to delete this user subscription?
                                    </div>
                                    <div class="modal-footer">
                                        <a class="btn btn-danger" href="#">Cancel</a>
                                        <a class="btn btn-success" href="{% url 'delete_blog' blog.id %}">Delete
                                            Now</a>
                                    </div>
                                </div>

                            </div>
                        </div>
                                {% endfor %}
                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
            <div class="col-xl-6 col-12">
                <!-- Notification Table -->
                <div class="card card-default" data-scroll-height="550">
                    <div class="card-header justify-content-between ">
                        <h2>Published Blogs</h2>


                    </div>
                    <div class="card-body slim-scroll">
                        {% for blog in the_blogs %}
                        {% if blog.status == 'Published'%}
                        <div class="media pb-3 align-items-center justify-content-between">
                            <div
                                class="d-flex align-items-center justify-content-center mr-3 media-icon iconbox-45  text-white">
                                <img src="{{blog.image.url}}" class="img-circle img-fluid rounded" alt="User Image" />
                            </div>
                            <div class="media-body pr-3 ">
                                <a class="mt-0 mb-1 font-size-15 text-dark" href="#">{{blog.title}}</a>
                                <p><i class="mdi mdi-calendar"></i> {{blog.date_published|naturalday}}</p>
                                <a href="{% url 'edit_blog' blog.id %}">edit blog</a>
                            </div>
                            <span class=" font-size-12 d-inline-block">{{blog.views}} Views
                                <br>
                                <span class="text-success">{{blog.author.all.count}}
                                    author{{blog.author.all.count|pluralize:'s'}}</span>

                        </div>
                        {% endif %}
                       
                        {% endfor %}
                    </div>
                    <div class="mt-3"></div>
                </div>
            </div>

            <div class=" col-12">
                <!-- Top Sell Table -->
                <div class="card card-table-border-none" data-scroll-height="850">
                    <div class="card-header">
                        <h4>Add New Blog</h4>

                    </div>
                    <div class="card-body slim-scroll mt-2">
                        <form action="{% url 'admin_blogs' %}" method="post">
                            {% csrf_token %}
                            <div class="row">
                                <div class="form-group col-6">
                                    <label for="title" class="">Title</label>
                                    <input type="text" class="form-control" name="title">
                                </div>
                                <div class="form-group col-6">
                                    <label for="title" class="">Author</label>
                                    <select class="form-control" name="author" multiple>
                                        {% for author in authors %}
                                        <option value="{{author.pk}}">{{author.name}}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="form-group col-6">
                                    <label for="title" class="">Image</label>
                                    <input type="file" class="form-control" name="image">
                                </div>
                                <div class="form-group col-6">
                                    <label for="title" class="">Status</label>
                                    <select class="form-control" name="status">

                                        <option>Published</option>
                                        <option>Drafted</option>

                                    </select>
                                </div>
                                <div class="form-group col-12">
                                    <label for="title" class="">Short Content</label>
                                    <textarea id="editor" placeholder="write short blog content here" name="content">
                                    </textarea>
                                </div>

                                <div class="form-group col-12">
                                    <label for="title" class="">Full Content</label>
                                    <textarea id="editor1" placeholder="write full blog content here"
                                        name="full_content">
                                    </textarea>
                                </div>

                                <div class="form-group col-12">
                                    <label for="title">Meta</label>
                                    <textarea placeholder="write full blog content here" class="form-control"
                                        name="meta">
                                    </textarea>
                                    <div class="row justify-content-end col-12  ms-3">

                                        <button type="submit" class="btn border rounded text-white mt-4 col-2 py-3"
                                            style="background-color: #754C28;">Submit</button>
                                    </div>
                                </div>

                            </div>
                        </form>

                    </div>
                    <!-- <div class="card-footer bg-white py-4">
          <a href="#" class="btn-link py-3 text-uppercase">View Report</a>
        </div> -->
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    ClassicEditor
        .create(document.querySelector('#editor'))
        .catch(error => {
            console.error(error);
        });

    ClassicEditor
        .create(document.querySelector('#editor1'))
        .catch(error => {
            console.error(error);
        });
</script>

{% endblock content %}