<md-content class="fullheight" ng-controller="ReportShowCtrl">
    <div>
        <md-button ng-click="save()">Save</md-button>
        <md-button ng-click="getPreview()">Preview</md-button>
        <md-button ng-click="getXlsx()"><a ng-href="">Download xlsx</a></md-button>
        <span ng-if="report.lastSaved == null">
            Changes have not been saved
        </span>
        <span ng-if="report.lastSaved">
            Saved {{ report.lastSaved | date:"MM/dd/yyyy 'at' h:mma" }}
        </span>
    </div>
    <div style="height: calc(100% - 31px);">
        <div ng-if="workerStatus">
            {{ workerStatus }}
            <div ng-if="workerState == 'PENDING'">
                <md-progress-linear class="md-accent" md-mode="indeterminate"></md-progress-linear>
            </div>
        </div>
        <div ng-if="reportData.refresh == true">
            <md-progress-linear md-mode="indeterminate"></md-progress-linear>
        </div>
        <div ng-if="reportData.statusMessage">
            {{ reportData.statusMessage }}
        </div>
        <div ng-if="reportData.reportErrors">
            <div ng-if="reportData.reportErrors.displayfield_set">
                <h4>Display Field Errors</h4>
                <ul>
                    <li ng-repeat="(index, error) in reportData.reportErrors.displayfield_set">
                        <span ng-repeat="(key, values) in error">
                            {{ report.displayfield_set[index].field_verbose }}
                            {{ key }}:
                            <span ng-repeat="value in values">
                                {{ value }}
                            </span>
                        </span>
                    </li>
                </ul>
            </div>
            <div ng-if="reportData.reportErrors.filterfield_set">
                <h4>Filter Field Errors</h4>
                <ul>
                    <li ng-repeat="(index, error) in reportData.reportErrors.filterfield_set">
                        <span ng-repeat="(key, values) in error">
                            {{ report.filterfield_set[index].field_verbose }}
                            {{ key }}:
                            <span ng-repeat="value in values">
                                {{ value }}
                            </span>
                        </span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="fullheight" style="width:100%; overflow: auto" ng-if="reportData.refresh == false">
            <hot-table id="previewTable"
                columnHeaders="true"
                settings="htSettings"
                columns="reportData.columns"
                datarows="reportData.items"
                >
            </hot-table>
        </div>
    </div>
</md-content>
