<html>
<head>
<%- include("./partials/head") %>
<title>My Services</title>
</head>
<body class="bg-light">
<div id="alert" class="alert alert-dismissible fade show position-sticky top-0" role="alert" style="display:none;z-index:99999;">
<span id="alert-text"></span>
<button id="alert-close" type="button" class="btn-close"></button>
</div>
<section class="py-3 py-md-5">
<div class="container">
<div class="row justify-content-center">
<% data.forEach(function(listItem){ %>
<div class="col-12 col-lg-9 col-xl-8 mb-4">
<div class="card widget-card border-light shadow-sm">
<div class="card-body p-4">
<h5 class="card-title widget-card-title mb-4 border-bottom">
<%= listItem.name %>
</h5>
<% if(listItem.data?.length){ %>
<div class="table-responsive">
<table
class="table table-striped bsb-table-xl text-wrap align-middle m-0"
>
<thead>
<tr>
<th>#</th>
<% Object.keys(JSON.parse(JSON.stringify(listItem.data[0]))).forEach(function(title){ %>
<% if(title != "id"){ %>
<th><%= title %></th>
<% } %>
<% }) %>
<th>Action</th>
</tr>
</thead>
<tbody>
<% listItem.data.forEach(function(myObject, index){ %>
<tr id="<%= listItem.type %>-<%= myObject.id %>">
<td><%= index + 1 %></td>
<% Object.entries(JSON.parse(JSON.stringify(myObject))).forEach(function(arr){ %>
<% if(arr[0] != "id"){ %>
<td class="text-secondary fs-7" style="max-width: 250px;
word-wrap: break-word;">