<!DOCTYPE html>
<html id="ng-app" ng-app="app"> <!-- id="ng-app" IE<8 -->

<head>
    <title>LoopBack Storage Service Demo</title>
    <link rel="stylesheet"
          href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>

    <!-- Fix for old browsers -->
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

    <!--<script src="../bower_components/angular/angular.js"></script>-->
    <script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
    <script src="angular-file-upload.js"></script>
    <script src="controllers.js"></script>

    <style>
        .my-drop-zone {
            border: dotted 3px lightgray;
        }

        .ng-file-over {
            border: dotted 3px red;
        }

        /* Default class applied to drop zones on over */
        .another-file-over-class {
            border: dotted 3px green;
        }

        html, body {
            height: 100%;
        }
    </style>

</head>

<!-- 1. ng-file-drop | ng-file-drop="options" -->
<body ng-controller="TestController" ng-file-drop>

<div class="container">

    <div class="navbar navbar-default">
        <div class="navbar-header">
            <a class="navbar-brand"
               href="https://github.com/strongloop/loopback-component-storage">LoopBack
                Storage Service</a>
        </div>
    </div>

    <div class="row">

        <div class="col-md-3">

            <h3>Select files</h3>

            <div ng-show="uploader.isHTML5">
                <!-- 3. ng-file-over | ng-file-over="className" -->
                <div class="well my-drop-zone" ng-file-over>
                    Base drop zone
                </div>

                <!-- Example: ng-file-drop | ng-file-drop="options" -->
                <div class="well my-drop-zone" ng-file-drop="{ url: '/foo' }"
                     ng-file-over="another-file-over-class">
                    Another drop zone with its own settings
                </div>
            </div>

            <!-- 2. ng-file-select | ng-file-select="options" -->
            Multiple
            <input ng-file-select type="file" multiple/><br/>

            Single
            <input ng-file-select type="file"/>
        </div>

        <div class="col-md-9" style="margin-bottom: 40px">

            <h3>Upload queue</h3>

            <p>Queue length: {{ uploader.queue.length }}</p>

            <table class="table">
                <thead>
                <tr>
                    <th width="50%">Name</th>
                    <th ng-show="uploader.isHTML5">Size</th>
                    <th ng-show="uploader.isHTML5">Progress</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="item in uploader.queue">
                    <td><strong>{{ item.file.name }}</strong></td>
                    <td ng-show="uploader.isHTML5" nowrap>{{
                        item.file.size/1024/1024|number:2 }} MB
                    </td>
                    <td ng-show="uploader.isHTML5">
                        <div class="progress" style="margin-bottom: 0;">
                            <div class="progress-bar" role="progressbar"
                                 ng-style="{ 'width': item.progress + '%' }"></div>
                        </div>
                    </td>
                    <td class="text-center">
                        <span ng-show="item.isSuccess"><i
                                class="glyphicon glyphicon-ok"></i></span>
                        <span ng-show="item.isCancel"><i
                                class="glyphicon glyphicon-ban-circle"></i></span>
                        <span ng-show="item.isError"><i
                                class="glyphicon glyphicon-remove"></i></span>
                    </td>
                    <td nowrap>
                        <button type="button" class="btn btn-success btn-xs"
                                ng-click="item.upload()"
                                ng-disabled="item.isReady || item.isUploading || item.isSuccess">
                            <span class="glyphicon glyphicon-upload"></span>
                            Upload
                        </button>
                        <button type="button" class="btn btn-warning btn-xs"
                                ng-click="item.cancel()"
                                ng-disabled="!item.isUploading">
                            <span class="glyphicon glyphicon-ban-circle"></span>
                            Cancel
                        </button>
                        <button type="button" class="btn btn-danger btn-xs"
                                ng-click="item.remove()">
                            <span class="glyphicon glyphicon-trash"></span>
                            Remove
                        </button>
                    </td>
                </tr>
                </tbody>
            </table>

            <div>
                <p>
                    Queue progress:

                <div class="progress" style="">
                    <div class="progress-bar" role="progressbar"
                         ng-style="{ 'width': uploader.progress + '%' }"></div>
                </div>
                </p>
                <button type="button" class="btn btn-success btn-s"
                        ng-click="uploader.uploadAll()"
                        ng-disabled="!uploader.getNotUploadedItems().length">
                    <span class="glyphicon glyphicon-upload"></span> Upload all
                </button>
                <button type="button" class="btn btn-warning btn-s"
                        ng-click="uploader.cancelAll()"
                        ng-disabled="!uploader.isUploading">
                    <span class="glyphicon glyphicon-ban-circle"></span> Cancel
                    all
                </button>
                <button type="button" class="btn btn-danger btn-s"
                        ng-click="uploader.clearQueue()"
                        ng-disabled="!uploader.queue.length">
                    <span class="glyphicon glyphicon-trash"></span> Remove all
                </button>
            </div>

        </div>

        <div class="col-md-9" style="margin-bottom: 40px"
             ng-controller="FilesController" data-ng-init="load()">

            <h3>Files in the container</h3>

            <table class="table">

                <tbody>
                <tr ng-repeat="file in files">
                    <td>
                        <a href="/api/containers/container1/download/{{file.name}}"><strong>{{
                            file.name }}</strong></a></td>
                    <td>
                    <td>
                        <button type="button" class="btn btn-danger btn-xs"
                                ng-click="delete($index, file.name)"
                                title="Delete the file">
                            <span class="glyphicon glyphicon-trash"></span>
                            Remove
                        </button>

                    </td>
                    </button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

    </div>

</div>

</body>
</html>
