<div class="log">
    <div class="log-filters" ng-form="log.form">
        <span class="ui-form-label">{{::InitializationText.Label_MinimumLogLevel}}</span>
        <select ng-model="log.minimumLevel" ng-options="level as Zap.LogEventLevel[level] for level in log.logEventLevels" ng-change="log.refresh()" class="ui-input-reactive log-filter-input"></select>
        <span class="ui-form-label">{{::InitializationText.Label_LogMessageFilter}}</span>
        <input type="search" class="ui-input-box log-filter-input log-filter-search" ng-model="log.filter" ng-model-options="{ debounce: 500 }" ng-change="log.refresh()" />
        <span class="ui-form-label">{{::InitializationText.Label_LogsBefore}}</span>
        <input type="datetime-local" name="latestTime" class="ui-input-reactive log-filter-input" ng-model="log.latestTime" ng-model-options="{ debounce: 500 }" ng-change="log.refresh()" />
        <icon name="refresh" ng-click="log.refresh()" class="icon-hover"></icon>
    </div>
    <div class="log-itemsContainer">
        <div class="log-items" infinite-scroll="log.fetchMoreLogs()" infinite-scroll-disabled="log.isFetching || log.noMoreItems" infinite-scroll-distance="1">
            <div class="logItem" ng-class="item.showDetails ? 'is-logItem-detailShown' : ''" ng-repeat="item in log.items">
                <div class="logItem-header" ng-click="item.showDetails = !item.showDetails">
                    <span class="logItem-severity" ng-class="::'logItem-severity-' + item.Severity.toLowerCase()"></span>
                    <span class="logItem-tag">{{::item.DateTime.value | date:'dd MMM yyyy HH:mm:ss.sss'}}</span>
                    <span class="logItem-tag" ng-repeat="tag in log.tags" ng-if="::log.details(item)[tag]" title="{{::tag}}">{{::log.details(item)[tag]}}</span>
                    <span class="logItem-message ui-text" ng-bind-html="::log.messageHtml(item)" title="{{::item.Message}}"></span>
                </div>
                <div class="logItem-details" ng-if="item.showDetails">
                    <table class="logItem-properties">
                        <tbody>
                            <tr>
                                <td no-copy></td>
                                <td class="logItem-propertyName" title="{{::DiagnosticText.Label_ApplicationLog_Severity}}"><b>{{::DiagnosticText.Label_ApplicationLog_Severity}}</b></td>
                                <td class="logItem-propertyValue ui-text">{{::item.Severity}}</td>
                            </tr>
                            <tr>
                                <td no-copy></td>
                                <td class="logItem-propertyName" title="{{::DiagnosticText.Label_ApplicationLog_Code}}"><b>{{::DiagnosticText.Label_ApplicationLog_Code}}</b></td>
                                <td class="logItem-propertyValue ui-text">{{::item.Code}}</td>
                            </tr>
                            <tr ng-repeat="(key, value) in ::log.details(item)">
                                <td class="logItem-propertyOptions" no-copy><icon small name="tag" ng-click="log.toggleTag(key)" class="logItem-propertyTagOption" ng-class="log.tags.contains(key) ? 'is-logItem-propertyTagged' : ''"></icon></td>
                                <td class="logItem-propertyName" title="{{::log.formatKey(key)}}"><b>{{::log.formatKey(key)}}</b></td>
                                <td class="logItem-propertyValue ui-text">{{::log.formatValue(value)}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div>
                <spinner-small ng-hide="log.noMoreItems"></spinner-small>
            </div>
        </div>
    </div>
</div>