<!DOCTYPE html>
<html lang="en" class="light-theme">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Synrok - Mobile HTML Template</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">

    <!-- Your Custom CSS -->
    <link rel="stylesheet" href="custom.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/dark-theme.css">
</head>

<body>
    <!-- Your HTML content here -->
    <table id="myTable" class="table table-bordered text-center">
        <thead>
            <tr class="bg-info ">
                <th>Date</th>
                <th>Order ID</th>
                <th>Product</th>

            </tr>
        </thead>
        <tbody>

            <tr>
                <th scope="row">Nope</th>
                <td class="color-red-dark">$300</td>


                <td>
                    <a type="button" class="fw-bold text-danger" data-toggle="modal" data-target="#myModal">
                        Open Modal
                    </a>
                </td>
            </tr>
            <tr>
                <th scope="row">Nope</th>
                <td class="color-red-dark">$300</td>


                <td>
                    <a type="button" class="fw-bold text-danger" data-toggle="modal" data-target="#myModal">
                        Open Modal
                    </a>
                </td>
            </tr>
        </tbody>
    </table>
    <!-- Table content -->
    </table>



    <!-- JavaScript -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#myTable').DataTable();
        });
    </script>
</body>

</html>