<!-- BEGIN CONTENT -->
<div class="page-content-wrapper">
    <div class="page-content">
        <!-- BEGIN PAGE HEADER-->
        <h3 class="page-title">
            {$shcontrollname}
        </h3>
        <div class="page-bar">
            <ul class="page-breadcrumb">
                {$breadcrumbs}
            </ul>
        </div>
        <style>
            /* Hide Angular JS elements before initializing */
            .ng-cloak {
                display: none;
            }
        </style>
        <!-- END PAGE HEADER-->
        <!-- BEGIN PAGE CONTENT-->
        <div class="row">
            <div class="col-md-12">
                <div class="portlet light bg-inverse">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="icon-equalizer font-red-sunglo"></i>
                            <span class="caption-subject font-red-sunglo bold uppercase">Add new in {$shcontrollname}</span>
                        </div>
                        <div class="actions">
                            <a class="btn default btn-xs blue tooltips" href="{$hosturl}/controllers/{$controllname}.php?ac=show" data-container="body" data-placement="top" data-original-title="Show">
                                <i class="icon-list"></i>
                                Show items
                            </a>
                        </div>
                    </div>
                    <div class="portlet-body form">
                        <!-- BEGIN FORM-->
                        <form action="{$hosturl}/controllers/{$controllname}.php?ac=addit" method="post" class="form-horizontal" id="" enctype="multipart/form-data" data-ng-app="demo" data-ng-controller="DemoFileUploadController" data-file-upload="options" data-ng-class="{literal}{'fileupload-processing': processing() || loadingFiles}{/literal}">
                            <div class="form-body">
                                <div class="alert alert-danger display-hide">
                                    <button class="close" data-close="alert"></button>
                                    You have errors, see it again.
                                </div>
                                <div class="alert alert-success display-hide">
                                    <button class="close" data-close="alert"></button>
                                    You are good, GO ON.
                                </div>

                                <div class="form-group form-md-line-input has-info">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="fa fa-users"></i>
                                        </span>
                                        <input type="text" class="form-control" placeholder="Title" name="label">
                                        <label for="form_control_1">Title</label>
                                    </div>
                                </div>

                                <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
                                <div class="row fileupload-buttonbar">
                                    <div class="col-lg-7">
                                        <!-- The fileinput-button span is used to style the file input field as button -->
                                        <span class="btn btn-success fileinput-button" ng-class="{literal}{disabled: disabled}{/literal}">
                                            <i class="glyphicon glyphicon-plus"></i>
                                            <span>Add files...</span>
                                            <input type="file" name="files[]" multiple ng-disabled="disabled">
                                        </span>
                                        <button type="button" class="btn btn-primary start" data-ng-click="submit()">
                                            <i class="glyphicon glyphicon-upload"></i>
                                            <span>Start upload</span>
                                        </button>
                                        <button type="button" class="btn btn-warning cancel" data-ng-click="cancel()">
                                            <i class="glyphicon glyphicon-ban-circle"></i>
                                            <span>Cancel upload</span>
                                        </button>
                                        <!-- The global file processing state -->
                                        <span class="fileupload-process"></span>
                                    </div>
                                    <!-- The global progress state -->
                                    <div class="col-lg-5 fade" data-ng-class="{literal}{in: active()}{/literal}">
                                        <!-- The global progress bar -->
                                        <div class="progress progress-striped active" data-file-upload-progress="progress()"><div class="progress-bar progress-bar-success" data-ng-style="{literal}{width: num + '%'}{/literal}"></div></div>
                                        <!-- The extended global progress state -->
                                        <div class="progress-extended">&nbsp;</div>
                                    </div>
                                </div>
                                <!-- The table listing the files available for upload/download -->
                                <table class="table table-striped files ng-cloak">
                                    <tr data-ng-repeat="file in queue" data-ng-class="{literal}{'processing': file.$processing()}{/literal}">
                                        <td data-ng-switch data-on="!!file.thumbnailUrl">
                                            <div class="preview" data-ng-switch-when="true">
                                                <a data-ng-href="{literal}{{file.url}}{/literal}" title="{literal}{{file.name}}{/literal}" download="{literal}{{file.name}}{/literal}" data-gallery><img data-ng-src="{literal}{{file.thumbnailUrl}}{/literal}" alt=""></a>
                                            </div>
                                            <div class="preview" data-ng-switch-default data-file-upload-preview="file"></div>
                                        </td>
                                        <td>
                                            <p class="name" data-ng-switch data-on="!!file.url">
                                                <span data-ng-switch-when="true" data-ng-switch data-on="!!file.thumbnailUrl">
                                                    <a data-ng-switch-when="true" data-ng-href="{literal}{{file.url}}{/literal}" title="{literal}{{file.name}}{/literal}" download="{literal}{{file.name}}{/literal}" data-gallery>{literal}{{file.name}}{/literal}</a>
                                                    <a data-ng-switch-default data-ng-href="{literal}{{file.url}}{/literal}" title="{literal}{{file.name}}{/literal}" download="{literal}{{file.name}}{/literal}">{literal}{{file.name}}{/literal}</a>
                                                </span>
                                                <span data-ng-switch-default>{literal}{{file.name}}{/literal}</span>
                                            </p>
                                            <strong data-ng-show="file.error" class="error text-danger">{literal}{{file.error}}{/literal}</strong>
                                        </td>
                                        <td>
                                            <p class="size">{literal}{{file.size| formatFileSize}}{/literal}</p>
                                            <div class="progress progress-striped active fade" data-ng-class="{literal}{pending: 'in'}{/literal}[file.$state()]" data-file-upload-progress="file.$progress()"><div class="progress-bar progress-bar-success" data-ng-style="{literal}{width: num + '%'}{/literal}"></div></div>
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-primary start" data-ng-click="file.$submit()" data-ng-hide="!file.$submit || options.autoUpload" data-ng-disabled="file.$state() == 'pending' || file.$state() == 'rejected'">
                                                <i class="glyphicon glyphicon-upload"></i>
                                                <span>Start</span>
                                            </button>
                                            <button type="button" class="btn btn-warning cancel" data-ng-click="file.$cancel()" data-ng-hide="!file.$cancel">
                                                <i class="glyphicon glyphicon-ban-circle"></i>
                                                <span>Cancel</span>
                                            </button>
                                            <button data-ng-controller="FileDestroyController" type="button" class="btn btn-danger destroy" data-ng-click="file.$destroy()" data-ng-hide="!file.$destroy">
                                                <i class="glyphicon glyphicon-trash"></i>
                                                <span>Delete</span>
                                            </button>
                                        </td>
                                    </tr>
                                </table>

                            </div>
                            <div class="form-actions">
                                <div class="row">
                                    <div class="col-md-offset-3 col-md-4">
                                        <button type="submit" class="btn green">Save</button>
                                        <button type="button" class="btn default rtnshow" data-controll="{$controllname}">Cancel</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <!-- END FORM-->
                    </div>
                </div>
            </div>
        </div>
        <!-- END PAGE CONTENT-->
    </div>
</div>
<!-- END CONTENT -->