<div ng-controller="LiveTilesImportExportController" class="livetiles-admin-importexport">
    <div class="lt-module-page__top lt-module-page-top">
        <div class="lt-module-page-top__title mr-auto">
            <h1>{{'Import/Export' | translate}}</h1>
        </div>
    </div>

    <div class="panel panel-default lt-module-page__content-panel">
        <div class="panel-heading">{{'Import' | translate}}</div>
        <div class="panel-body wizdom-controls">
            <div class="form-group row wizdom-controls-row noborder">
                <div class="col-sm-4">
                    <label class="control-label">{{'Delete everything before importing' | translate}}</label>
                </div>
                <div class="col-sm-8">
                    <label><input type="checkbox" ng-model="overwrite" /></label>
                </div>
            </div>
            <label for="livetiles-filepicker" class="btn btn-default">
                <input id="livetiles-filepicker"
                       type="file"
                       accept=".json"
                       wizdom365-livetiles-fileimport="readImportFile"
                       style="display: none;" />
                <span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>&ensp;{{'Browse...' | translate}}
            </label>
            <button type="button" class="btn btn-primary ml-3" ng-click="import()" ng-disabled="!content || importing || exporting">{{(importing ? 'Importing' : 'Import') | translate}}</button>
        </div>
    </div>

    <div class="panel panel-default lt-module-page__content-panel">
        <div class="panel-heading">{{'Export' | translate}}</div>
        <div class="panel-body wizdom-controls">
            <p>{{'Templates will not be exported' | translate}}</p>
            <button type="button" class="btn btn-primary" ng-click="export()" ng-disabled="importing || exporting">{{(exporting ? 'Exporting' : 'Export') | translate}}</button>
        </div>
    </div>
</div>