<html>
<head>
<%- include("./partials/head") %>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-sweetalert@1.0.1/dist/sweetalert.min.js"></script>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap-sweetalert@1.0.1/dist/sweetalert.min.css"
rel="stylesheet"
/>
<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 id="<%= listItem.name.toLowerCase().split(' ').join('_') %>" class="card-body p-4">
<h5 class="card-title widget-card-title mb-4 border-bottom">
<%= listItem.name %>
</h5>
<% if(listItem.data?.length){ %>
<% if(listItem.name.includes("Servers")){ %>
<div class="d-flex align-items-center mb-2">
<span>
Delete All Servers And Its Services (Bulk Delete) ?
</span>
<button onclick="bulkDelete()" class="btn btn-danger">Delete</button>
</div>
<% } else if(listItem.name.includes("Services")) { %>
<div class="input-group mb-3">
<input id="search-service-input" type="text" class="form-control" placeholder="Service Id/ Name/ Code/ Price" aria-label="Recipient's username" aria-describedby="search-input-btn">
<button class="btn btn-primary input-group-append input-group-text" id="search-input-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
</svg>
</button>
</div>
<% } %>