<div layout-padding layout-fill layout="column">
	<md-card class="log" layout-fill>
		<md-card-header>
			<md-card-header-text>
				<span class="md-title">Server log</span>
				<span class="md-subhead">{{ vm.status }}</span>
			</md-card-header-text>
			<md-icon class="fa fa-filter"></md-icon>
			<md-input-container class="md-block" style="margin: 0px" flex="60" flex-gt-md="70">
				<label>Filter</label>
				<input type="text" aria-label="message" ng-model="vm.filter.search" ng-change="vm.refresh()" ng-model-options="vm.refreshOpts"/>

				<div class="hint">Supports operators and, or, (), and "str"</div>
			</md-input-container>
			<md-menu>
				<md-button class="widget-button md-icon-button" ng-click="$mdOpenMenu()" aria-label="open menu">
					<md-icon md-font-icon="fa fa-ellipsis-v"></md-icon>
				</md-button>
				<md-menu-content>
					<md-menu-item layout-margin>
						<md-input-container>
							<label>Max Lines</label>
							<input type="number" aria-label="lines" ng-model="vm.filter.lines" ng-change="vm.refresh()" ng-model-options="vm.refreshOpts"/>
						</md-input-container>
					</md-menu-item>
					<md-menu-item>
						<md-button ng-click="vm.clear()">
							<md-icon class="fa fa-eraser" ng-class=""></md-icon>
							Clear
						</md-button>
					</md-menu-item>
					<md-menu-item>
						<md-button ng-click="vm.toggle()">
							<md-icon class="fa" ng-class="vm.stream ? 'fa fa-stop' : 'fa fa-play'"></md-icon>
							{{ vm.stream ? 'Stop' : 'Start' }}
						</md-button>
					</md-menu-item>
				</md-menu-content>
			</md-menu>
		</md-card-header>
		<md-card-content flex layout="row">
			<div flex id="log-grid" ui-grid="vm.gridOptions" ui-grid-auto-resize ui-grid-auto-scroll></div>
		</md-card-content>
	</md-card>
</div>

<script type="text/ng-template" id="row-template.html">
	<div class="{{ row.entity.log_level | lowercase }}" ng-class="{summary: row.entity.message.startsWith('Summary'), accepted: row.entity.message.startsWith('ACCEPTED')}">
		<div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" class="ui-grid-cell" ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }"  ui-grid-cell>
		</div>
	</div>
</script>