<div class="row">
  <div class="col-md-12 mt-2">
    <div class="row">
      <div class="col-md-3 offset-md-9">
        <div class="card w-50 float-right mb-2">
          <a href="/how-it-works/add" class="btn btn-sm btn-info m-1"><i class="fas fa-plus"></i> Add New</a>
        </div>
      </div>
    </div>
    <div class="card card-info">
      <div class="card-header">
        <h3 class="card-title">
          <%=sectionTitle%>
        </h3>
      </div>
      <div class="card-body table-responsive">
        <table class="table table-hover table-head-fixed datatable123">
          <thead>
            <tr>
              <th>
                Used For
              </th>
              <th>
                Serial No
              </th>
             
              <th>
                Title
              </th>
              <th style="width: 400px;">
                Description
              </th>
              <th data-orderable="false">
                Icon Name
              </th>
              <th>
                Status
              </th>
              <th data-orderable="false">
                Actions
              </th>
            </tr>
          </thead>
          <tbody>
            <% if (dataList.length>0){ %>
            <% let index=((page-1)*limit)+1;%>
              <% for (data of dataList){ %>
                <tr>
                  <td>
                    <%= data?.used_for%>
                  </td>
                  <td >
                    <%= data?.serial_number%>
                  </td>
                  
                  <td>
                    <%= data?.title%>
                  </td>
                  <td>
                    <%= data?.content%>
                  </td>
                  <td>
                    <%= data?.icon_name%>
                  </td>
                  <td>
                    <% if(data.active_status){%>
                      <span class="badge badge-primary">Active</span>
                      <%}else{%>
                        <span class="badge badge-danger">Inactive</span>
                        <%}%>
                  </td>
                  <td>
                    <a class="btn btn-info btn-sm mr-2" href="/how-it-works/edit/<%=data.id%>" data-toggle="tooltip"
                      title="Edit">
                      <i class="fas fa-pencil-alt">
                      </i>
                    </a>
                    <a class="btn btn-danger btn-sm" id="delete_<%=data.id%>"
                      onclick="deleteDataFunc(`<%=data.id%>`,`how-it-works/delete/<%=data.id%>`)" data-toggle="tooltip"
                      title="Delete">
                      <i class="fas fa-trash">
                      </i>
                    </a>
                  </td>
                </tr>
                <% } %>
                <% }else{ %>
                  
                  <% } %>
          </tbody>
        </table>
        <% if (dataList.length>0){ %>
        <div class="col-sm-12 col-md-7 pl-0" >
          <div class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_0_paginate">
            <ul class="pagination">
              <li class="paginate_button page-item previous <%=page==1?'disabled':''%>" id="DataTables_Table_0_previous"><a href="/how-it-works/list?page=<%=page-1%>"
                  aria-controls="DataTables_Table_0" aria-disabled="true" role="link" data-dt-idx="previous"
                  tabindex="0" class="page-link">Previous</a></li>
                <%for(let i=1;i<=totalpage;i++){%>
                  <li class="<%=i==page?'paginate_button page-item active':'paginate_button page-item'%>"><a href="/how-it-works/list?page=<%=i%>" aria-controls="DataTables_Table_0" role="link"
                    aria-current="page" data-dt-idx="0" tabindex="0" class="page-link"><%=i%></a></li>
                  <%}%>
              <li class="paginate_button page-item next <%=page==totalpage?'disabled':''%>" id="DataTables_Table_0_next"><a href="/how-it-works/list?page=<%=+page+1%>"
                  aria-controls="DataTables_Table_0" role="link" data-dt-idx="next" tabindex="0"
                  class="page-link">Next</a></li>
            </ul>
          </div>
        </div>
        <% } %>
      </div>
    </div>
    <!-- /.card -->
  </div>
  <!-- /.col -->
  <script>
    $(document).ready(function () {
       $('.datatable123').DataTable({

         paging: false,         // Enable pagination
   lengthChange: false,
   searching: false,
   ordering: true,
   info: false,
   autoWidth: false,

       })
     })

  </script>
</div>
<!-- /.row -->