<!DOCTYPE html>
<html lang="en" ng-app='crud'>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="./app/css/style.css">
    

</head>
<body>
    <div class="container" ng-controller="Form">
        <form ng-submit="addComment()" enctype="multipart/form-data">
            <div class="form-group">
                <textarea placeholder="Comment text" class="form-control form-control-lg" ng-model="newComment.commentText" required></textarea>
                <input type="text" class="form-control form-control-sm" placeholder="Author name" ng-model="newComment.authorName" required>
                 <div class="btn-foto btn btn-secondary" ngf-select ng-model="newComment.foto" name="file" ngf-pattern="'.jpg, .png'" ngf-accept="'.jpg, .png'" ngf-max-size="20MB" ngf-min-height="100" ngf-resize="{width: 100, height: 100}">Select foto</div>
                <button type="submit" class="btn-form-comment btn btn-light">Comment</button>
            </div>
        </form>
        <div  ng-repeat="comment in mainComments track by $index">
            <div ng-show="!comment.isEditMod" class="main-comments">
                <img ngf-thumbnail="comment.foto || './app/img/nofoto.jpg'">
                <div class="comment-form">
                    <div class="float-right">
                        <button class="btn btn-info btn-sm" ng-click="editMainComment(comment.id)">Edit</button>
                        <button class="btn btn-danger btn-sm" ng-click="deleteMainComment(comment.id)">Delete</button>
                    </div>
                    <h2>{{comment.authorName}}</h2>
                    <span class="block">{{comment.commentText}}</span>
                    <button class="btn btn-warning btn-sm" ng-click="reply(comment.id)">Reply</button>
                    <ng-include src="'./app/template/reply.template.html'" ng-show="comment.isReplyMod"></ng-include>  
                </div>    
        </div>
        <ng-include src="'./app/template/editComment.template.html'" ng-show="comment.isEditMod"></ng-include> 
            <div class="second-comments" style="padding-left: 50px" ng-repeat="secondComment in comment.secondComments">
                <div ng-show="!secondComment.isEditMod">
                    <img ngf-thumbnail="comment.foto || './app/img/nofoto.jpg'">
                    <div class="comment-form">
                        <div class="float-right">
                            <button class="btn btn-info btn-sm" ng-click="editSecondComment(comment.id, secondComment.id)">Edit</button>
                            <button class="btn btn-danger btn-sm" ng-click="deleteSecondComment(comment.id, secondComment.id)">Delete</button>
                        </div>
                        <h2>{{secondComment.authorName}}</h2>
                        <span class="block">{{secondComment.commentText}}</span>
                    </div>
                </div>
                <ng-include src="'./app/template/editSecondComment.template.html'" ng-show="secondComment.isEditMod"></ng-include> 
            </div>
        </div>
        
    </div>
    <script type="text/javascript" src="./node_modules/angular/angular.js"></script>
    <script src="./node_modules/ng-file-upload/dist/ng-file-upload-shim.min.js"></script> 
    <script src="./node_modules/ng-file-upload/dist/ng-file-upload.min.js"></script>

    <script type="text/javascript" src="./app/app.module.js"></script>

    <script type="text/javascript" src="./app/constans/webApi.com.js"></script>
    <script type="text/javascript" src="./app/services/comment.factory.js"></script>


    <script type="text/javascript" src="./app/controller/form.controller.js"></script>
    <script type="text/javascript" src="./app/controller/edit.controller.js"></script>
    <script type="text/javascript" src="./app/controller/editSecond.controller.js"></script>
    <script type="text/javascript" src="./app/controller/reply.controller.js"></script>
</body>
</html>