<div class="modal fade flip-effect" id="filesModal" ng-controller="filesCtrl">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4 class="modal-title"><i class="fa fa-archive"></i> Files</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-4">
                        <h4 class="lobster">Upload Files</h4>
                        <div class="fileDropzone text-center">
                            <i class="fa fa-cloud-upload fa-5x"></i><br>
                            <small><em>(Drag & Drop files here to upload.)</em></small>
                        </div>
                        <hr>
                        <div id="fileDropzoneProgress"></div>
                    </div>
                    <div class="col-md-8">
                        <h4 class="lobster">Manage Files</h4>
                        <div class="fileCtr" ng-repeat="file in myFiles">
                            <span>{{ file.original_file_name }}</span>
                            <button type="button" class="btn btn-xs btn-danger pull-right btnTooltip" ng-click="deleteFile(file, $index)"
                                    data-toggle="tooltip" data-placement="top" title="Delete"><i class="fa fa-remove"></i></button>
                            <button type="button" class="btn btn-xs btn-success pull-right btnTooltip" ng-click="addFileToChat(file)"
                                    data-toggle="tooltip" data-placement="top" title="Add to chat"><i class="fa fa-plus"></i></button>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>