<%- include('includes/header',  {username: admin[0].name,email: admin[0].email } ) %>

<div class="body-wrapper">
    <div class="container-fluid">
        <!-- Header Card -->
        <div class="card bg-info-subtle shadow-none position-relative overflow-hidden mb-4">
            <div class="card-body px-4 py-3">
                <div class="row align-items-center">
                    <div class="col-md-8 col-sm-7">
                        <h4 class="fw-semibold mb-1">Manage Tags</h4>
                    </div>
                    <div class="col-md-4 col-sm-5 text-md-end text-sm-start mt-3 mt-md-0">
                        <button id="addTagBtn" class="btn btn-primary px-4">
                            <i class="fa-solid fa-plus me-2"></i> Add Tag
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- DataTable -->
        <div class="datatables">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="zero_config" class="table table-striped table-bordered text-nowrap align-middle">
                            <thead>
                                <tr>
                                    <th>Tag Name</th>
                                    <th class="action-col">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Data will be loaded via AJAX -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Modal for Add/Edit Tag -->
            <div class="modal fade" id="tagModal" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-md modal-dialog-centered">
                    <div class="modal-content border-0 shadow-lg rounded-3">

                        <div class="modal-header bg-light-subtle">
                            <h5 class="modal-title fw-semibold" id="tagModalLabel">Add Tag</h5>
                            <button type="button" class="btn-close btn-close-dark" data-bs-dismiss="modal"></button>
                        </div>

                        <div class="modal-body p-4">
                            <form id="tagForm">
                                <input type="hidden" id="tagId" name="id">

                                <div class="mb-3">
                                    <label class="form-label fw-medium">Tag Name <span class="text-danger">*</span></label>
                                    <input type="text" id="tagName" name="tag" class="form-control" placeholder="Enter tag name" required>
                                </div>
                            </form>
                        </div>

                        <div class="modal-footer border-0 pt-0">
                            <button class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" form="tagForm" class="btn btn-primary px-4">Save</button>
                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

    </div>

    <%- include('includes/allscripts') %>
        <script src="/js/view/tag.js"></script>