{{template "header" .}}
<meta name="keywords" content="码农随笔,个人随笔,博客,个人博客,个人笔记,技术博客,免费云笔记,云笔记,随笔,IT博客,谷歌地图,码农笔录,aiprose">
<title>博客列表 - 码农随笔</title>
</head>
<body>
<div class="root-container">
    {{template "nav" .}}
    <div class="home-container">
        <div class="home-hearder">
            <div style="flex: 1">
                <el-select v-model="cateId" placeholder="请选择文章分类" @change="catChange" clearable class="auto-screen">
                    <el-option v-for="item in cats" :key="item.Id" :label="item.Title" :value="item.Id"/>
                </el-select>
            </div>
            <button type="button" onclick="window.open('/blog/new')"
                    class="layui-btn layui-btn-radius layui-btn-danger layui-btn-sm auto-item" style="border-radius: 12px">
                写文章
            </button>
        </div>
        <div>
            <div class="home-content" style="min-height: 40px;line-height: 40px;color: #888">
                <div class="home-content-title cursor" style="font-size: 14px">
                    文章标题
                </div>
                <div style="display: inline-block;width: 300px" class="auto-item">
                    <div class="home-content-desc">
                        <span style="width: 100px;font-size: 14px">类型</span>
                        <span style="width: 50px"> 用户</span>
                        <span style="flex: 1;font-size: 14px">浏览量</span>
                        <span style="min-width: 80px;font-size: 14px">日期</span>
                    </div>
                </div>
            </div>
            <hr style="border:none"/>
        </div>
        {{range .Page.List}}
        <div>
            <div class="home-content">
                <div class="home-content-title cursor">
                    <a href="/blog/{{.Id}}" target="_blank">{{.Title}}</a>
                </div>
                <div style="display: inline-block;width: 300px" class="auto-item">
                    <div class="home-content-desc">
                        <span style="width: 100px;font-size: 12px">{{.CateName}}</span>
                        <span style="width: 50px;text-align: center">
                            <a href="/u/{{.UserId}}"><img src="{{.HeadImg}}" alt="头像" class="img-circle"></a>
                        </span>
                        <span style="flex: 1;font-size: 14px">{{.Browses}}</span>
                        <span style="min-width: 80px;font-size: 14px">{{.Ctime.Format "2006/01/02"}}</span>
                    </div>
                </div>
            </div>
        </div>
        {{end}}

        <div style="text-align: center">
            <nav>
                <div class="pagination pagination-lg">
                    <ul>
                        {{if .Page.FirstPage}}
                        {{else}}
                        <li class="prev">
                            <a href="/blogs?num={{ .Page.PageNo | NAdd -1}}&flag={{.Flag}}&cat={{.Cat}}">&laquo;</a>
                        </li>
                        {{end}}
                        <li class="active"><a href="javascript:void(0)">{{.Page.PageNo}}</a></li>
                        {{if .Page.LastPage}}
                        {{else}}
                        <li class="next">
                            <a href="/blogs?num={{ .Page.PageNo | NAdd +1}}&flag={{.Flag}}&cat={{.Cat}}">&raquo;</a>
                        </li>
                        {{end}}
                    </ul>
                </div>
            </nav>
        </div>

    </div>
    <div class="footer-container">
        {{template "footer"}}
    </div>
</div>
<script>
    (function(){
        var src = "https://s.ssl.qhres2.com/ssl/ab77b6ea7f3fbf79.js";
        document.write('<script src="' + src + '" id="sozz"><\/script>');
    })();
</script>
</body>
<script>
    var app = new Vue({
        el: ".root-container",
        delimiters: ['${', '}'],
        data: {
            cateId: '',
            cats: []
        },
        created () {
          this.cateId = {{.Cat}}
            if(this.cateId == -1){
                this.cateId = ''
            }
          this.cats = {{.Cats}}
        },
        methods: {
            catChange (){
                window.location.href = "/blogs?num=1&flag={{.Flag}}&cat=" + this.cateId
            }
        }
    })
</script>
</html>