{% extends 'dashboard/base_dashboard.html' %}

{% load static %}

{% load crispy_forms_tags %}
{% block script_css %}

{% endblock script_css %}

{% block main_container %}
    <div class="container">
    <div class="page-inner">
        <div class="page-header">
            <h3 class="fw-bold mb-3">DASHBOARD</h3>
            <ul class="breadcrumbs mb-3">
                <li class="nav-home">
                    <a href="{% url 'dashboard' %}">
                        <i class="icon-home"></i>
                    </a>
                </li>

                {% for breadcrumb in breadcrumbs %}
                    <li class="separator">
                        <i class="icon-arrow-right"></i>
                    </li>
                    <li class="nav-item">
                        {% if breadcrumb.url != '#' %}
                            <a href="{{ breadcrumb.url }}">{{ breadcrumb.title }}</a>
                        {% else %}
                            <span>{{ breadcrumb.title }}</span>
                        {% endif %}
                    </li>
                {% endfor %}
            </ul>

        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">{{ page_title }}</div>
                    </div>
                    <div class="card-body">
                         {% if form.errors %}
                           <div>
                               <p>Please correct the following errors:</p>
                               <ul>
                                   {% for field in form %}
                                       {% for error in field.errors %}
                                           <li>{{ field.label }}: {{ error }}</li>
                                       {% endfor %}
                                   {% endfor %}
                               </ul>
                           </div>
                         {% endif %}

                        <!-- Table -->
                        <table class="table table-striped table-bordered" id="article-table">
                            <thead>
                                <tr>
                                    <th scope="col">Title</th>
                                    <th scope="col">Author</th>
                                    <th scope="col">Category</th>
                                    <th scope="col">Tags</th>
                                    <th scope="col">Status</th>
                                    <th scope="col">Date Created</th>
                                    <th scope="col">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for article in articles %}
                                <tr>
                                    <td>{{ article.title }}</td>
                                    <td>{{ article.author.get_full_name }}</td>
                                    <td>{{ article.category.name }}</td>
                                    <td>
                                        {% for tag in article.tags.all %}
                                        <span class="badge bg-secondary">{{ tag.name }}</span>
                                        {% endfor %}
                                    </td>
                                    <td>
                                        {% if article.status == 'published' %}
                                        <span class="badge bg-success">Published</span>
                                        {% elif article.status == 'draft' %}
                                        <span class="badge bg-warning">Draft</span>
                                        {% else %}
                                        <span class="badge bg-danger">Pending Review</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ article.created_at }}</td>
                                    <td>
                                        <a href="{% url 'blog:update_article' article.slug %}" class="btn btn-sm btn-primary">Edit</a>
                                        <a href="{% url 'blog:delete_article' article.slug %}" class="btn btn-sm btn-danger">Delete</a>
                                        <a href="{% url 'blog:article_detail' article.slug %}" class="btn btn-sm btn-info">View</a>
                                    </td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="7">No articles found.</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>

                        <!-- Pagination -->
                        <nav aria-label="Page navigation">
                            <ul class="pagination">
                                {% if articles.has_previous %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ articles.previous_page_number }}">Previous</a>
                                </li>
                                {% endif %}
                                {% for page in articles.paginator.page_range %}
                                <li class="page-item {% if articles.number == page %} active {% endif %}">
                                    <a class="page-link" href="?page={{ page }}">{{ page }}</a>
                                </li>
                                {% endfor %}
                                {% if articles.has_next %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ articles.next_page_number }}">Next</a>
                                </li>
                                {% endif %}
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock main_container %}

{% block script_js %}
    <script>

    </script>
{% endblock script_js %}