{% extends 'dashboard/base_dashboard.html' %}
{% load static %}
{% load humanize %}

{% block script_css %}
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.css">
{% endblock script_css %}

{% block main_container %}
<div class="container">
    <div class="page-inner">
        <div class="d-flex align-items-left align-items-md-center flex-column flex-md-row pt-2 pb-4">
            <div>
                <h3 class="fw-bold mb-3">Dashboard</h3>
            </div>
            <div class="ms-md-auto py-2 py-md-0">
                <a href="{% url 'list_users' %}" class="btn btn-label-info btn-round me-2">Manage Users</a>
                <a href="{% url 'create_post' %}" class="btn btn-primary btn-round">Add Posts</a>
            </div>
        </div>

        {% include 'dashboard/top_summary.html' %}

        <div class="row">
            <div class="col-md-12">
                <div class="card card-round">
                    <div class="card-header">
                        <div class="card-head-row card-tools-still-right">
                            <div class="card-title">Posts</div>
                            <div class="card-tools">
                                <div class="input-group">
                                    <input
                                        type="text"
                                        id="custom-search"
                                        placeholder="Search ..."
                                        class="form-control"
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <!-- Users table -->
                            <table id="posts-table" class="table align-items-center mb-0">
                                <thead class="thead-light">
                                    <tr>
                                        <th scope="col" class="text-left">Title</th>
                                        <th scope="col" class="text-right">Author</th>
                                        <th scope="col" class="text-right">Category</th>
                                        <th scope="col" class="text-right">Status</th>
                                        <th scope="col" class="text-right">Published Date</th>
                                        <th scope="col" class="text-right">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for post in object_list %}
                                    <tr>
                                        <td class="text-left">
                                            <a href="{% url 'post_detail' post.slug %}">{{ post.title }}</a>
                                        </td>
                                        <td class="text-left">
                                            {{ post.author.first_name }}
                                            {% if post.author.middle_name %}{{ post.author.middle_name }} {% endif %}
                                            {{ post.author.last_name }}
                                        </td>
                                        <td class="text-right">{{ post.category.name }}</td>  <!-- Assuming category has a 'name' field -->
                                        <td class="text-right">{{ post.status }}</td>
                                        <td class="text-right">{{ post.published_date|date:"d/m/Y" }}</td>  <!-- Use published_date instead of created_date -->
                                        <td class="text-right">
                                            <div class="card-tools">
                                                <div class="dropdown">
                                                    <button class="btn btn-icon btn-clean me-0" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        <i class="fas fa-ellipsis-h"></i>
                                                    </button>
                                                    <div class="dropdown-menu">
                                                        <a class="dropdown-item" href="{% url 'post_detail' post.slug %}">View</a>
                                                        <a class="dropdown-item" href="{% url 'update_post' post.slug %}">Edit</a>
                                                        <a class="dropdown-item" href="{% url 'delete_post' post.slug %}" onclick="return confirm('Are you sure you want to delete this post?');">Delete</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    {% empty %}
                                    <tr>
                                        <td colspan="6" class="text-center">No posts found.</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock main_container %}

{% block script_js %}
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.js"></script>
<script>
    $(document).ready(function() {
        $('#users-table').DataTable({
            "pageLength": 10,
            "lengthMenu": [10, 25, 50, 100],
            "ordering": true,
            "searching": true,
            "language": {
                "search": "",
                "searchPlaceholder": "Search ..."
            },
            "dom": 'rt<"bottom"lp><"clear">',
            "columnDefs": [
                { "orderable": false, "targets": 5 } // Disable ordering on the "Action" column
            ]
        });

        // Custom search input field for DataTables
        $('#custom-search').on('keyup', function() {
            $('#users-table').DataTable().search($(this).val()).draw();
        });
    });

</script>
{% endblock script_js %}