<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        Links || <%= config.name %>
    </title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css">
    <%- include("./components/head.ejs")%>
</head>

<body class="w-100 bg-light-light h-auto">
    <%- include("./components/nav.ejs")%>
        <div class="w-100 content bg-light-light px-3 px-md-5 pt-3 mb-4" id="content">
            <h2>Links</h2>
            <p class="text-muted">Click on a link to visit.</p>
            <div class="table-responsive">
                <table data-toggle="table" data-search="true" data-show-columns="true" id="mainTable">
                    <thead>
                        <tr class="tr-class-2">
                            <th data-field="title">Title</th>
                            <th data-field="data">URL</th>
                        </tr>
                    </thead>
                    <tbody>
                        <% links.forEach(link=>{%>
                            <tr id="tr-id-<%=link.title%>" class="tr-class-<%=link.title%> pirepClickable" data-title="<%=link.url%>"
                                title="<%=link.url%>" data-object='{"key": "value"}' style="cursor: pointer;">
                                <td id="td-id-<%=link.title%>" class="td-class-<%=link.title%>" data-title="<%=link.title%>">
                                    <strong>
                                        <%=link.title%>
                                    </strong>
                                </td>
                                <td data-text="<%=link.url%>">
                                    <%=link.url%>
                                </td>
                            </tr>
                            <%})%>
                    </tbody>
                </table>
            </div>
        </div>
                <%- include('components/footer.ejs') %>
                    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
                        integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
                        crossorigin="anonymous"></script>
                    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
                    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
                        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
                    <script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>
                    <script>
                        $('#mainTable').on('click-row.bs.table', function (row, el, field) {
                                confirmLink(el._data.title);
                                console.log(el._data)
                        })
                        function confirmLink(link){
                            swal({
                                title: "Are you sure you want to visit this link?",
                                text: `'${link}' was added by an Admin and not by VACenter, check you trust this link before visiting.`,
                                icon: "warning",
                                buttons: {
                                    cancel: "Cancel!",
                                    go: {
                                        text: "Go",
                                        value: true,
                                        dangerMode: true
                                    }
                                }
                            }).then((willVisit) => {
                                if (willVisit == true) {
                                    window.open(link)
                                }
                            })
                        }
                    </script>

</body>

</html>