block9.

@model Real_Time_Commenting.Models.BlogPost

    @{
        ViewBag.Title = "Details";
    }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
    <script src="//js.pusher.com/4.0/pusher.min.js"></script>
    <style>
        .user_name{
        font-size:14px;
        font-weight: bold;
    }
    .comments-list .media{
        border-bottom: 1px dotted #ccc;
    }
    </style>
    <h2>Details</h2>
    <div id="app">
        <div>
            <h4>BlogPost</h4>
            <hr />
            <dl class="dl-horizontal">
                <dt>
                    @Html.DisplayNameFor(model => model.Title)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.Title)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.Body)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.Body)
                </dd>

            </dl>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <div class="page-header">
                        <h1><small class="pull-right">{{comments.length}} comments</small> Comments </h1>
                    </div>
                    <div class="comments-list">
                        <div class="media" v-for="com in comments">
                            <div class="media-body">
                                <h4 class="media-heading user_name">{{com.Name}}</h4>
                                {{com.Body}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <br />
            <p>Your Comment</p>
            <form onsubmit="return false;">
                <input type="text" id="Name" placeholder="Your Name" v-model="comment.Name" class="form-control" />
                <textarea rows="3" placeholder="Your Comment" id="Body" v-model="comment.Body" class="form-control"></textarea>
                <button class="btn btn-success" v-on:click="submit_comment()">save</button>
            </form>
        </div>
    </div>
    <p>

        @Html.ActionLink("Back to List", "Index")
    </p>