{{define "index.html"}}
 {{template "base.html" .}}
{{end}}

{{define "body"}}
<div class="w-full container-2xl mx-auto bg-white shadow-md shadow-gray-100" id="header">
    <div class="mx-auto md:w-4/5 p-2 md:px-10 md:py-5">
        <Span class="text-5xl font-light">Winxg</Span>
    </div>
</div>

<div class="h-6 bg-white">
</div>

<div class="container-2xl mx-auto bg-white">
    <div class="mx-auto md:w-4/5 p-2 md:px-10 space-y-10 md:space-y-10">
        <div class="grid grid-cols-1 gap-3">
            <div class="col-span-1 h-auto">
                <div class="md:px-8">
                    <a href="https://chatgpt.winxg.com/" target="_blank">
                        <div class="md:py-1 md:w-full text-2xl md:text-3xl font-light text-red-400 hover:text-black">
                            -🤖- ChatGPT百科
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="grid grid-cols-1 gap-3">
            <div class="col-span-1 h-auto">
                <div class="md:px-8">
                    <a href="https://bwg.winxg.com/" target="_blank">
                        <div class="md:py-1 md:w-full text-2xl md:text-3xl font-light text-red-400 hover:text-black">
                            -✨- 专业虚拟服务器供应商-搬瓦工
                        </div>
                    </a>
                </div>
            </div>
        </div>
        {{range .list}}
        <div class="grid grid-cols-1 gap-3">
            <div class="col-span-1 h-auto">
                <div class="md:px-8">
                    <a href="/article/{{.Id}}">
                        <div class="md:py-1 md:w-full text-2xl md:text-3xl font-light text-red-400 hover:text-black">
                            {{.Conf.Title}}
                        </div>
                    </a>
                </div>
                <div class="md:px-8">
                    <div class="text-md text-gray-300">
                        <i class="fa fa-calendar"></i><span class="px-3">{{.Date}}</span>
                    </div>
                </div>
            </div>
        </div>
        {{end}}

        <div class="w-full  flex justify-center">
            <div class="flex center">
                <div class="text-xl md:text-2xl font-light text-red-400 hover:text-black">
                    {{if gt .prevPage 0}}
                        <a href="/?p={{.prevPage}}"><-上一页</a>
                    {{else}}
                        没有了
                    {{end}}
                </div>
                <div class="text-xl md:text-2xl font-light">
                    -{{.page}}-
                </div>
                <div class="text-xl md:text-2xl font-light text-red-400 hover:text-black">
                    {{if gt .nextPage 0}}
                        <a href="/?p={{.nextPage}}">下一页-></a>
                    {{else}}
                        没有了
                    {{end}}
                </div>
            </div>
        </div>

    </div>
</div>
<div class="h-6 bg-white">
</div>
{{end}}

{{define "ext_js"}}
<script src="/statics/js/stuck.js"></script>
<script>
    const Stuck = StuckJs.Stuck;
    const instances = new Stuck([
        { selector: '#header', marginTop: 0 },
    ], { marginTop: 10 });
</script>
{{end}}