<div class="container-fluid" ng-controller="Wizdom365ImportController">
    <div class="lt-module-page__top lt-module-page-top">
        <div class="lt-module-page-top__title mr-auto">
            <h1>{{'Import' | translate}}</h1>
        </div>
        <div class="lt-module-page-top__actions">
            <button id="btnUpload" form="importForm" ng-disabled="!uploadFile" class="btn btn-primary">{{'Upload' | translate}}</button>
        </div>
    </div>

    <form id="importForm" enctype="multipart/form-data" method="post" action="{{actionUrl}}" novalidate="novalidate" target="hiddenImportFrame">
        <div class="panel panel-default lt-module-page__content-panel">
            <p>
                {{'Browse for a .zip file on your computer using the form to the right' | translate}}
                {{'The contents of this file will then be extracted into the blob on the server' | translate}}
            </p>
            <p>
                {{'The .zip file should contain a file and folder structure according to where you want the files to be placed inside the blob' | translate}}
                {{'(See export to get an overview)' | translate}}
            </p>
            <span class="btn btn-default btn-file">
                {{'Browse' | translate }} <input type="file" ng-model="uploadFile" name="file" bind-file>
            </span>
            <div>
                <span ng-show="uploadFile">
                    <span style="padding-top:15px;" class="glyphicon glyphicon-file" aria-hidden="true"></span> {{uploadFile.name}} <span class="glyphicon glyphicon-remove" ng-click="uploadFile = null"></span>
                </span>
            </div>
        </div>
    </form>
    <iframe id="hiddenImportFrame" name="hiddenImportFrame" width="0" height="0" border="0" style="display: none;" ng-onload="uploadSuccess"></iframe>
</div>