<div class="cbi-section">
    <div class="cbi-section-node">
        <h3 class="cbi-section-title"><%:危险区域%></h3>
        <div class="cbi-value-field">
            <p><%:点击此按钮将永久删除账户配置文件，此操作不可逆，请谨慎操作。%></p>
            <br/>
            <input type="button" class="cbi-button cbi-button-remove" value="<%=translate("清除账户配置")%>" onclick="confirmClearConfig()" style="font-weight: bold;"/>
        </div>
    </div>
</div>

<div class="cbi-section">
    <div class="cbi-section-node">
        <h3 class="cbi-section-title"><%:luci-app-natpierce项目开发者贡献%></h3>
        <div class="cbi-value-field">
            <p><%:感谢以下开发者为本项目做出的贡献！%></p>
            <%
                local ok, contributors = pcall(require, "luci.model.cbi.natpierce.contributors")
                if ok and contributors and #contributors > 0 then
            %>
            <ul style="list-style-type: none; padding: 0; display: flex; flex-wrap: wrap; gap: 20px;">
            <%
                    for _, c in ipairs(contributors) do
            %>
                <li>
                    <a href="<%=c.url%>" target="_blank" style="display: flex; align-items: center; text-decoration: none; color: inherit;">
                        <img src="/luci-static/natpierce/avatars/<%=c.name%>.png" style="width: 40px; height: 40px; border-radius: 50%; margin-right: 10px;" alt="<%=c.name%>头像" />
                        <span style="font-weight: bold;"><%=c.name%></span>
                    </a>
                </li>
            <%
                end
            else
            %>
                <p><%:目前暂无贡献者，期待您的加入！%></p>
            <%
                end
            %>
            </ul>
            <br/>
            <p style="font-weight: bold;"><%:项目仓库及构建链接: %><a href="https://github.com/natpierce/luci-app-natpierce" target="_blank">点击此处查看构建状态或者提交贡献,或者能给我们个Star吗(`・ω・´)</a></p>
        </div>
    </div>
</div>

<script type="text/javascript">
    function confirmClearConfig() {
        if (!confirm('<%:您确定要清除账户配置文件吗？此操作不可逆！%>')) {
            return;
        }

        XHR.post('<%=luci.dispatcher.build_url("admin", "services", "natpierce_clear_config")%>', null,
            function(x, result) {
                if (result && result.status === 'success') {
                    alert('<%:成功: %> ' + result.message);
                    window.location.reload();
                } else {
                    alert('<%:错误: %> ' + (result ? result.message : x.statusText));
                }
            }
        );
    }
</script>
