<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title><%= title %></title>
        <link rel="stylesheet" href="./dist/style.css" />
        <!--MDUI-->
        <link rel="stylesheet" href="https://cdn.hycqwq.top/mdui@1.0.2/dist/css/mdui.min.css" />
        <script src="https://cdn.hycqwq.top/mdui@1.0.2/dist/js/mdui.min.js"></script>
        <!--fa icon-->
        <link rel="stylesheet" href="https://cdn.hycqwq.top/fontawesome@6.5.1/css/all.css" />
        <!--APlayer-->
        <link rel="stylesheet" href="https://cdn.hycqwq.top/aplayer@1.10.1/dist/APlayer.min.css" />
        <script src="https://cdn.hycqwq.top/aplayer@1.10.1/dist/APlayer.min.js"></script>
        <!--MetingJS-->
        <% if (music.metingapi) { %>
            <script>
                const meting_api = "<%- music.metingapi %>";
            </script>
        <% } %>
        <script src="https://cdn.hycqwq.top/meting@2.0.1/dist/Meting.min.js"></script>
        
        <% if (favicon) { %>
            <link rel="shortcut icon" type="image/x-icon" href="<%- favicon %>">
        <% } %>
        <% if (background.showimg) { %>
            <style>
                body {
                    background-image: url("<%- background.imgurl %>");
                    background-repeat: no-repeat;
                    background-attachment: fixed;
                    background-position: center;
                }
            </style>
        <% } %>
        <%- customhtml.headend %>
    </head>
    <body>
        <div class="mdui-container-fluid main-container">
            <div class="mdui-row">
                <div class="mdui-col-sm-10 mdui-col-md-8 mdui-col-lg-6 mdui-col-xl-4 mdui-col-offset-sm-1 mdui-col-offset-md-2 mdui-col-offset-lg-3 mdui-col-offset-xl-4">
                    <div class="mdui-card card">
                        <div class="mdui-card-content">
                            <div class="user-nav">
                                <img src="<%- user.avatar %>" class="mdui-img-circle mdui-center user-avatar rotateimg">
                                <div class="mdui-center user-name"><b><%= user.name %></b></div>
                                <div class="mdui-center user-slogan"><%- user.slogan %></div>
                            </div>
                            <div class="user-desc">
                                <%- content %>
                            </div>
                            <div class="music-player-inside">
                                <% if (music.enabled && !music.outside) { %>
                                    <meting-js
                                        <% for (let i in music.metingoptions) { %>
                                            <%= i %> ="<%- music.metingoptions[i] %>"
                                        <% } %>
                                    ></meting-js>
                                <% } %>
                            </div>
                            <div class="linkblocks">
                                <% linkblocks.forEach((e) => { %>
                                    <a class="linkblock" href="<%- e.url %>" style="background-color: <%- e.bgcolor %>;"
                                        <% if (e.title) { %>
                                            title="<%- e.title %>"
                                        <% } %>
                                    >
                                        <% if (e.icon) { %>
                                            <i class="<%= e.icon %>"></i>
                                        <% } %>
                                        <%- e.desc %>
                                    </a>
                                <% }) %>
                            </div>
                            <div class="linkicons">
                                <% linkicons.forEach((e) => { %>
                                    <a class="linkicon" href="<%- e.url %>"
                                        <% if (e.title) { %>
                                            title="<%- e.title %>"
                                        <% } %>
                                    >
                                        <i class="<%= e.icon %>"></i>
                                    </a>
                                <% }) %>
                            </div>
                            <%- customhtml.cardend %>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="music-player-outside">
            <% if (music.enabled && music.outside) { %>
                <meting-js
                    <% for (let i in music.metingoptions) { %>
                        <%= i %> ="<%= music.metingoptions[i] %>"
                    <% } %>
                ></meting-js>
            <% } %>
        </div>
        <%- customhtml.bodyend %>
    </body>
</html>