#include("./layout.html")
#@layout(false)


#define script()
<script src="/static/components/jquery/jquery.form.min.js"></script>
<script src="/static/commons/article.js"></script>
<script src="highlight/highlight.pack.js"></script>
<script>

    hljs.initHighlightingOnLoad();

</script>
#end



#define css()
<link href="highlight/styles/railscasts.css" rel="stylesheet">
<link href="/static/commons/article.css" rel="stylesheet">
#end


#define content()
<div class="container">

    #include("header.html")
    <div class="bh-artical-content">

        <h2 class="bh-artical-title">
            #(article.title ??)
        </h2>
        <div class="bh-card-tag">
            <div><i class="fa fa-clock-o"></i> #date(article.created)</div>
            <div><i class="fa fa-eye"></i> #(article.view_count)</div>
            <div><i class="fa fa-commenting-o"></i> #(article.comment_count)</div>
        </div>
        <div class="bh-artical">
            #(article.content ??)
        </div>

        #relevantArticles(article)
        <div class="recommend-panel">
            <h4 class="ll-title">相关文章</h4>
            <div class="card-deck">
                #for(article :relevantArticles )
                <div class="card bh-panel">
                    <a class="recommend-panel-link" href="#(article.url ??)">
                        <div class="recommend-panel-top">
                            <img src="#(article.showImage ?? 'img/blog-image.jpg')" class="img-fluid"
                                 alt="#(article.title ??)">
                        </div>
                        <div class="recommend-panel-bottom">
                            #(article.title ??)
                        </div>
                    </a>
                </div>
                #end
            </div>
        </div>
        #end


        #@defaultArticleCommentPage()


    </div>
</div>
#end