<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Short Links</title>
    <link id="theme_css" rel="stylesheet" href="/sakura.css"></head>

    <link href="https://cdn.bootcdn.net/ajax/libs/datatables/1.10.21/css/jquery.dataTables.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>

</head>
<body>
    <script>
        //切换深色模式
      if(window.matchMedia('(prefers-color-scheme: dark)').matches){
        document.getElementById('theme_css').href = '/sakura-dark.css'; 
      }
      
      </script>
    <h1>当前的短链接</h1>
    <p>用户名：<?=htmlspecialchars($user)?> ， <?=htmlspecialchars($realname)?> 。<a href="/logout">[登出]</a> <a href="/">[回到首页]</a></p>
    <hr />
    <table id="shortLinksTable" class="display" style="width: 100%; table-layout: fixed; word-break: break-all;color:black">
        <thead>
            <tr>
                <th>短链接</th>
                <th>原始域名</th>
                <th>备案号/负责人</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <style>
                .sourcelink {
            white-space: nowrap;
overflow: hidden; 
text-overflow: ellipsis;
width: 200px;
                }
            </style>
           <?php
            foreach($record as $rec){
                echo '<tr>';
                    echo '<td>SPQR.top/'.$rec->link.'</td>';
                    echo '<td class="sourcelink">'.$rec->source .'</td>';
                    if($rec->webid == null) {
                        echo '<td>未备案</td>';
                    } else {
                        echo '<td>' . $rec->webid . '<br />'.$rec->owner.'</td>';
                    }
                    echo '<td><a style="color: red;" href="/!/delete/'. $rec->link . '">[删除]</a></td>';  
                echo '</tr>';
            }
           ?>
        </tbody>
    </table>

    <script>
        $(document).ready(function() {
            $('#shortLinksTable').DataTable();
        });
    </script>
</body>
</html>