<span ng-controller="Wizdom365LogController">
    <div class="lt-module-page__top lt-module-page-top">
        <div class="lt-module-page-top__title">
            <h1>{{'Log' | translate}}</h1>
        </div>
        <div class="lt-module-page-top__actions">
            <span class="input-group">
                <select class="form-control" ng-model="selectedLogFile">
                    <option ng-repeat="logfile in logFiles" value="{{logfile}}">{{logfile}}</option>
                </select>
                <span class="input-group-btn">
                    <button class="btn btn-primary" ng-click="downloadLogFile(selectedLogFile)" type="button">Download logfile</button>
                </span>
            </span>
        </div>
    </div>

    <wizdom365-spinner class="spinner" loading="loading"></wizdom365-spinner>

    <div class="panel lt-module-page__content-panel">
        <table class="table lt-flextable__table">
            <tr class="remove-border">
                <th></th>
                <th>
                    <select class="form-control" ng-model="status">
                        <option value="">{{'Status' | translate}}</option>
                        <option value="1">{{'Info' | translate}}</option>
                        <option value="2">{{'Warning' | translate}}</option>
                        <option value="3">{{'Error' | translate}}</option>
                    </select>
                </th>
                <th>
                    <select class="form-control" ng-model="millisec">
                        <option value="">{{'Millisecs' | translate}}</option>
                        <option value="-500">{{('Less than' | translate) + ' 500 ms'}}</option>
                        <option value="500">{{('More then' | translate) + ' 500 ms'}}</option>
                        <option value="2000">{{('More then' | translate) + ' 2000 ms'}}</option>
                        <option value="5000">{{('More then' | translate) + ' 5000 ms'}}</option>
                        <option value="10000">{{('More then' | translate) + ' 10000 ms'}}</option>
                    </select>
                </th>
                <th>
                    <input type="text" class="form-control" placeholder="{{'Module' | translate}}" ng-model="module">
                </th>
                <th class="w-50">
                    <input type="text" class="form-control" placeholder="{{'Message' | translate}}" ng-model="message">
                </th>
                <th></th>
            </tr>
            <tr>
                <th class="cursor-pointer"
                    ng-click="sortReverse = sortColumn == 'timestamp' ? !sortReverse : false; sortColumn = 'timestamp';">
                    {{'Timestamp' | translate}}
                </th>
                <th class="cursor-pointer"
                    ng-click="sortReverse = sortColumn == 'level' ? !sortReverse : false; sortColumn = 'level';">
                    {{'Status' | translate}}
                </th>
                <th class="cursor-pointer"
                    ng-click="sortReverse = sortColumn == 'timeTaken' ? !sortReverse : false; sortColumn = 'timeTaken';">
                    {{'Millisecs' | translate}}
                </th>
                <th class="cursor-pointer"
                    ng-click="sortReverse = sortColumn == 'module' ? !sortReverse : false; sortColumn = 'module';">
                    {{'Module' | translate}}
                </th>
                <th class="cursor-pointer w-50"
                    ng-click="sortReverse = sortColumn == 'text' ? !sortReverse : false; sortColumn = 'text';">
                    {{'Message' | translate}}
                </th>
                <th>{{'Toggle info' | translate}}</th>
            </tr>
            <tr ng-repeat="logEntry in logEntries | filter:filterLog | orderBy:sortColumn:sortReverse"
                ng-style="{'background-color':calcBackground(logEntry.timeTaken)}">
                <td class="text-nowrap">{{logEntry.timestamp | date : 'dd-MM-yyyy HH:mm:ss'}}</td>
                <td class="text-nowrap">{{logEntry.level == 1 ? 'Info' : logEntry.level == 2 ? 'Warning' : 'Error'}}</td>
                <td class="text-nowrap">{{logEntry.timeTaken > 0 ? logEntry.timeTaken : "EXECUTING"}}</td>
                <td class="text-break">{{logEntry.module}}</td>
                <td class="w-50 text-break" ng-hide="logEntry.showData">
                    {{logEntry.text}}
                </td>
                <td class="w-50 text-break" ng-show="logEntry.showData">
                    <div ng-repeat="entry in logEntry.childEntries">{{entry.timeTaken}} - {{entry.text}}</div>
                </td>
                <td class="toggle-btn-group">
                    <button class="btn btn-sm" ng-if="logEntry.childEntries.length" ng-hide="logEntry.showData" ng-click="logEntry.showData = true">{{'Show data' | translate}}</button>
                    <button class="btn btn-sm" ng-if="logEntry.childEntries.length" ng-show="logEntry.showData" ng-click="logEntry.showData = false">{{'Show message' | translate}}</button>
                    <i ng-if="!logEntry.childEntries.length">No data to display</i>
                </td>
            </tr>
        </table>
    </div>
</div>
