<th:block th:fragment="links-canvas(groups)" th:if="${theme.config.link.linksCanvas && not #lists.isEmpty(groups)}" >

    <style>
        #iframe {
            border: var(--style-border);
            border-radius: 12px;
        }

        .addBtn {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            width: 100%;
        }

        .addBtn button {
            transition: .2s;
            display: flex;
            margin: 31px auto 0px;
            color: var(--heo-white);
            padding: 15px;
            border-radius: 12px;
            background: var(--search-result-title);
            align-items: center;
        }

        button {
            padding: 0;
            outline: 0;
            border: none;
            background: 0 0;
            cursor: pointer;
            touch-action: manipulation;
        }

        .fa-solid,
        .fas {
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
        }

        .addBtn i {
            font-size: 1.3rem;
            margin-right: 10px;
        }

        .addBtn button:hover {
            background: #4b7aff;
            color: #fff;
        }
    </style>
    <div class="flink">
        <iframe id="iframe" scrolling="auto" src="/themes/theme-hao/assets/html/link-canvas.html" frameborder="0"
                height="450px" width="100%"></iframe>

        <div class="addBtn">
            <button onclick="javascript:refreshFrame();">
                <i class="fas fa-shuffle"></i>
                换个头像试试
            </button>
        </div>
    </div>
    <script th:inline="javascript">
        function refreshFrame() {
            document.getElementById('iframe').contentWindow.location.reload(true);
        }
        const group = [[${ groups }]]
        const logos = group.flatMap((item) => {
            return item.links
        }).flatMap((item) => {
            return item.spec.logo
        })
        localStorage.setItem('logos', JSON.stringify(logos))
    </script>

</th:block>