Adding the view templates and styles.

resources/assets/sass/_comments.scss

@@ -0,0 +1,60 @@
+.comments-list {
+    .comment-box {
+        border-bottom: 1px solid $comment-border;
+    }
+    
+    .comment-box:last-child {
+        border-bottom: none;
+    }
+}
+.page-comment {        
+    .comment-container {
+        margin-left: 42px;
+    }
+    
+    .comment-actions {
+        font-size: 0.8em;        
+        padding-bottom: 4px;
+        ul {
+            padding-left: 0px;
+            margin-bottom: 5px;
+        }
+        li {
+            float: left;
+            list-style-type: none;
+        }
+        
+        li:after {
+            content: '•';
+            color: #707070;
+            padding: 0 5px;
+            font-size: 1em;
+        }
+        
+        li:last-child:after {
+            content: none;
+        }
+    }
+    
+    .comment-header {
+        font-size: 1.25em;
+        margin-top: 0.6em;
+    }
+    
+    .comment-body {
+        
+    }
+    
+    .user-image {
+        float: left;
+        margin-right: 10px;
+        width: 32px;
+        img {
+            width: 100%;
+        }
+    }    
+}
+
+.comment-editor {
+    margin-top: 2em;
+}

resources/views/comments/add.blade.php

@@ -0,0 +1,19 @@
+@section('head')
+    <script src="{{ baseUrl("/libs/simplemde/simplemde.min.js") }}"></script>
+@stop
+
+<div class="comment-editor" ng-controller="CommentAddController as vm">
+<form novalidate>
+        <div simple-markdown-input smd-model="comment.newComment" smd-get-content="getCommentHTML" smd-clear="clearInput">
+            <textarea name="markdown" rows="3"
+                      @if($errors->has('markdown')) class="neg" @endif>@if(isset($model) ||
+                      old('markdown')){{htmlspecialchars( old('markdown') ? old('markdown') : ($model->markdown === '' ? $model->html : $model->markdown))}}@endif</textarea>
+        </div>
+        <input type="hidden" ng-model="pageId" name="comment.pageId" value="{{$pageId}}" ng-init="comment.pageId = {{$pageId }}">
+        <button type="submit" class="button pos" ng-click="vm.saveComment()">Save</button>
+</form>
+</div>
+
+@if($errors->has('markdown'))
+    <div class="text-neg text-small">{{ $errors->first('markdown') }}</div>
+@endif

resources/views/comments/list-item.blade.php

@@ -0,0 +1,19 @@
+<div class='page-comment'>
+    <div class="user-image">
+        <img ng-src="@{{defaultAvatar}}" alt="user avatar">
+    </div>
+    <div class="comment-container">
+        <div class="comment-header">
+            @{{ ::comment.created_by_name }}
+        </div>
+        <div ng-bind-html="comment.html" class="comment-body">
+
+        </div>
+        <div class="comment-actions">
+            <ul>
+                <li><a href="#">Reply</a></li>
+                <li><a href="#">@{{::comment.created_at}}</a></li>            
+            </ul>                
+        </div>
+    </div>
+</div>

resources/views/pages/comments.blade.php

@@ -0,0 +1,8 @@
+<div ng-controller="CommentListController as vm" ng-init="pageId = <?= $page->id ?>" class="comments-list" ng-cloak>   
+<h3>@{{vm.totalCommentsStr}}</h3>
+<hr> 
+    <div class="comment-box" ng-repeat="comment in vm.comments track by comment.id">
+        @include('comments/list-item')
+    </div>
+</div>
+@include('comments/add', ['pageId' => $pageId])