<!doctype html>
<html lang="zh-cn">

<head>
    {{template "header.html" .}}
</head>

<body>
    {{template "nav.html" .}}
    {{template "bread.html" .}}

    <div class="container">
        <div class="row">
            <div class="col-12 col-md-12 list-article p-2">
                <div class="shadow p-4">
                    <article>
                        <h1 class="vh1 p-2 text-center">{{.one.Title}}</h1>
                        <div class="text-center">
                            <span class="px-1"><i class="bi bi-folder m-1"></i> <a
                                    class="text-muted text-reset text-decoration-none"
                                    href="{{.one.CategoryUrl}}">{{.one.CategoryName}}</a></span>
                            <span class="px-1"><i class="bi bi-file-earmark-person m-1"></i><a
                                    class="text-decoration-none text-muted"
                                    href="{{.one.User.Url}}">{{.one.User.Nickname}}</a></span>
                            <span class="px-1"><i class="bi bi-clock m-1"></i><data>{{ParseTime .one.CreatedAt
                                    ""}}</data></span>
                            <span class="px-1"><i class="bi bi-eye m-1"></i>{{.one.Views}}</span>
                        </div>
                        <div class="my-2 vcontent">
                            {{.one.Content | Str2Html}}
                        </div>
                        <div class="vscroll-x vscrollbar">
                            {{range .one.Tags}}
                            <a class="btn px-1" href="{{.Url}}"><i class="bi bi-tags"></i>{{.Name}}</a>
                            {{end}}
                        </div>
                    </article>
                    {{if eq 1 .one.EnableComment}}
                    <div class="my-4">
                        {{range $k, $v := ArticleComment .one.Id}}
                        <div class="media border p-2">
                            <div class="media-body">
                                <h5 class="mt-0"><strong>评论用户：<a href="#{{$v.Id}}">#{{$k}}</a></strong>{{$v.Nickname}}
                                    {{if ne 0
                                    $v.Pid}} 回复 <a href="#{{$v.Pid}}">{{$v.PNickname}}</a> {{end}}</h5>

                                <p>评论内容：{{$v.Content}}</p>
                                <p><a class="rep" data-id="{{$v.Id}}" data-f="#{{$k}}">回复</a> {{ParseTime
                                    $v.CreatedAt ""}}</p>
                            </div>
                        </div>
                        {{end}}
                    </div>

                    <div class="panel-body">
                        <div id="re"></div>
                        <form class="form-horizontal" role="form">
                            <input class="form-control m-1" type="text" placeholder="昵称" name="nickname">
                            <input class="form-control m-1" type="text" placeholder="邮箱" name="email">
                            <input class="form-control m-1" type="text" placeholder="网站" name="website">
                            <input class="form-control m-1" type="text" placeholder="评论内容" name="content">
                            <input name="article_id" value="{{.one.Id}}" hidden>
                            <input name="pid" id="pid" hidden>
                            <input name="id" id="id" hidden>
                            <div class="form-group" style="text-align: center;">
                                <img id="refreshCaptcha"
                                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAtCAMAAABS+V+kAAAAG1BMVEVHcEx6SOl4SOvjPGTjPGR5SOrjPGR5SOrjPGQZmST3AAAAB3RSTlMAgEC/QL+AqElEkgAAAAlwSFlzAAALEgAACxIB0t1+/AAAAn9JREFUWEftVdt2hCAMBFTw/7+4cwniarXtWx/IOYuoWSYzuZjStKnAVGAqMBWYCvx7BeqqEOPyY7i5/OjyS4e90nHdjZ+Wbqe/540mxNxyvMh9MxyzLcX17tBdl/1iC4D3HdD4rWFEoxmxta0Dc1faYbjbNrxGhP3ZI3UdvVeu1RdRxgIZekwShJBknBtOjwdFyLSWuUqQ/tK+r3aR+gD2JikFBOUvYwFMR+6b40nyrigt5yCuEVTQ6bW1BrVlqRX8g3rdg21B/JZbTD9shCJZ4MH1kOYb3gCoriqgmTqSzBwzImJW0RbRtLWomsb7EFevj4KzuhZ5ey4ulZIZLxVAQu45dqHjuYGhckM2aZmMuAE9PDwBtw2h0fcjnDvjFewkpQFUWwNY6VUwknlLlw4WpoGNB0CH4+yOzN+Q2TM7Cvow6qpGEh64O8VgW7L7OPFMV/AJWDpQBS4FOWHfY3kVewFTILlvCacwCIygrL6ZAB2oQ9oTsAGQCAP3AfJeXqqetef6LDUo93lmgoQCi2jQGzAkNnC3F8YVJUw3XGNknnIM8n16RKIhN/IXw/IOrEI+AT9mmTydRcytqDICQ3kFgnAcPERGUas1IXecR2CJMMrIwBictMPxVlsip0ZlD7txsJXxFRIvqZG7LRcKXHBw6V8HjDDO5TtwpNhBPRqBNTuikACJqS2Nwdfd9jmGu4AoOQjwCRzdbbT3YQ2IULSPLkuf0OTruehYVTTNL5+LJ7pTH7ORIYxbzcDX0TrYV9TtyOSR0vg6UeYo940IRZ9lmRKgzh0m4ONs/eNR5xXTIvFLYRs7JLw/VbWb0F+M+f+L//SdCkwFpgJTgX+gwBegpA+1GZ0ezwAAAABJRU5ErkJggg=="
                                    style="width: 200px; height: 100px;" lay-on="refreshCaptcha" title="点击获取验证码"
                                    alt="点击获取验证码">
                            </div>
                            <input class="form-control" type="text" placeholder="验证码" name="code">
                            <div class="text-right pt-2">
                                <input type="button" id="submit" class="btn btn-primary" value="提交">
                            </div>
                        </form>
                    </div>
                    {{end}}
                </div>

                <section class="shadow mt-4 p-4">
                    <div class="float-left ">
                        <a class="text-decoration-none" href="{{.one.Pre.Url}}"><span
                                aria-hidden="true">&larr;</span>
                            上一篇:{{.one.Pre.Title}}</a>
                    </div>

                    <div class="float-right">
                        <a class=" text-decoration-none" href="{{.one.Next.Url}}">下一篇:{{.one.Next.Title}}<span
                                aria-hidden="true">&rarr;</span></a>
                    </div>
                    <div class="clearfix"></div>
                </section>

                <section class="shadow mt-3 p-2">
                    <h2 class="vh2 p-2"><i class="bi bi-book-half"></i>相关推荐</h2>
                    <hr>
                    <div class="row">
                        {{range Related .one.Id 6}}
                        <div class="col-6 col-md-3 ">
                            <a class="vtext-line1 text-decoration-none my-2 text-reset" href="{{.Url}}"
                                title="{{.Title}}">
                                {{if .Img}}
                                <figure class="figure">
                                    <img src="{{.Img}}" class="figure-img img-fluid rounded vlistimg" alt="{{.Title}}"
                                        title="{{.Title}}">
                                    <figcaption class="figure-caption">{{.Title}}</figcaption>
                                </figure>
                                {{else}}
                                {{.Title}}
                                {{end}}

                            </a>
                        </div>
                        {{end}}
                    </div>
                </section>

            </div>
        </div>

    </div>


    {{template "footer.html" .}}
    {{template "js.html" .}}
    <script type="">
            var csrf = '{{.Csrf}}';
        </script>
    <script>
        $(function () {

            $('#refreshCaptcha').click(function () {
                $.ajax({
                    url: "/captcha",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    headers: {
                        "X-CSRF-Token": csrf,
                    },
                    dataType: "json",
                    success: function (data) {
                        if (data.code == 200) {
                            $("#id").val(data.data.id);
                            $("#refreshCaptcha").attr("src", data.data.imgbase64);
                            return false;
                        } else {
                            alert(data.msg);
                            return false;
                        }
                    },
                    error: function (data) {
                        alert(data.msg);
                        return false;
                    }

                });
                return false
            })

            $('.rep').click(function () {
                aid = $(this).attr("data-id");
                f = $(this).attr("data-f");
                if (aid == undefined || aid == null) {
                    return
                }

                $("#pid").val(aid);
                $("#re").html("<p>回复" + f + "</p>")
            });

            $('#submit').click(function () {
                var d = {};
                var t = $('form').serializeArray();
                $.each(t, function () {
                    d[this.name] = this.value;
                });
                if (d.nickname == "" || d.code == "") {
                    alert("昵称/验证码不能为空")
                    return false;
                }
                d.article_id = parseInt(d.article_id);
                d.pid = parseInt(d.pid);
                //数据转换
                $.ajax({
                    url: "",
                    headers: { "X-CSRF-Token": csrf },
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data: JSON.stringify(d),
                    success: function (data) {
                        if (data.code == 200) {
                            alert("您的评论已经收到！")
                            window.location.reload();
                        } else {
                            alert(data.msg)
                        }
                        // 刷新验证码
                        $("#refreshCaptcha").trigger("click");

                    }
                })
                return false;

            });
        });
    </script>
</body>

</html>