<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body"> 
                <style type="text/css">     
                    #datatable-fixedheader thead tr th:nth-child(1), #datatable-fixedheader tbody tr td:nth-child(1) {width: 5% !important; text-align: center;}
                    #datatable-fixedheader thead tr th:nth-child(2), #datatable-fixedheader tbody tr td:nth-child(2) {width: 15% !important; text-align: left;}
                    #datatable-fixedheader thead tr th:nth-child(3), #datatable-fixedheader tbody tr td:nth-child(3) {width: 18% !important; text-align: left;}
                    #datatable-fixedheader tbody tr td:nth-child(4),
                    #datatable-fixedheader tbody tr td:nth-child(4) div,
                    #datatable-fixedheader tbody tr td:nth-child(4) span {
                        max-width: 350px;
                        width: 350px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    #datatable-fixedheader thead tr th:nth-child(5), #datatable-fixedheader tbody tr td:nth-child(5) {width: 15% !important; text-align: left;}
                    #datatable-fixedheader thead tr th:last-child, #datatable-fixedheader tbody tr td:last-child {width: 10% !important; text-align: center;}
                </style>
                <table id="datatable-fixedheader" class="table table-hover table-bordered dt-responsive nowrap">
                    <thead>
                        <tr>
                            <th>No.</th>
                            <th>Title</th> 
                            <th>Subject</th>
                            <th>Header Description</th>  
                            <th>Date Time</th> 
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody> 
                    </tbody>
                </table>
                <div class="modal fade modal1" id="modal1" tabindex="-1">
                    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Edit Email Format</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <form class="custom-validation" action="#" id="form" method="POST" accept-charset='utf-8' autocomplete="off">
                                    <input type="hidden" name="id" id="id">
                                    
                                    <div class="mb-3">
                                        <label class="form-label" for="title">
                                            Title <span class="text-danger">*</span>
                                        </label>
                                        <input type="text" name="title" id="title" class="form-control" placeholder="Enter title" required>
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label" for="subject">
                                            Subject <span class="text-danger">*</span>
                                        </label>
                                        <input type="text" name="subject" id="subject" class="form-control" placeholder="Enter subject" required>
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label" for="top_description">
                                            Header Description <span class="text-danger">*</span>
                                        </label>
                                        <textarea name="top_description" id="top_description" class="form-control" rows="4" placeholder="Enter header description" required></textarea>
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label" for="bottom_description">
                                            Footer Description
                                        </label>
                                        <textarea name="bottom_description" id="bottom_description" class="form-control" rows="4" placeholder="Enter footer description"></textarea>
                                    </div>
                                    
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-danger waves-effect" data-bs-dismiss="modal">Cancel</button>
                                        <button type="submit" id="submit" class="btn btn-primary waves-effect waves-light">
                                            <i class="mdi mdi-check me-1"></i>Update
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>  
</div>  

<script src="https://cdn.ckeditor.com/4.22.1/standard/ckeditor.js"></script>
<?php $this->load->view('includes/footer'); ?>
</body>
</html>