<!-- ng-class="{ 'p3xr-console-electron': $root.isElectron }" -->
<div>
    <md-toolbar class="md-primary md-hue-1" md-theme="{{ $root.p3xr.state.themeLayout}}" id="p3xr-console-header">
        <div class="md-toolbar-tools">
            <h2 flex md-truncate>{{ $root.p3xr.strings.label.console }}</h2>

            <span>
                <md-tooltip ng-if="$root.$mdMedia('xs')" md-direction="bottom">{{ $root.p3xr.strings.intention.pubsubMonitor }}</md-tooltip>
                <md-checkbox ng-model="$root.p3xr.state.monitor" style="transform: scale(0.75)" id="p3xr-console-pubsub-checkbox">
                    <span hide-xs>{{ $root.p3xr.strings.intention.pubsubMonitor }}</span>
                </md-checkbox>
            </span>

            <p3xr-button p3xr-label="$root.p3xr.strings.intention.commands" p3xr-md-icon="menu"
                         ng-click="$ctrl.commands()"></p3xr-button>

            <p3xr-button p3xr-label="$root.p3xr.strings.intention.clear" p3xr-md-icon="clear"
                         ng-click="$ctrl.clearConsole()"></p3xr-button>
        </div>

    </md-toolbar>
    <md-content md-theme="{{ $root.p3xr.state.theme}}" layout-padding id="p3xr-console-content" md-whiteframe="1">
        <div id="p3xr-console-content-output">
        </div>
        <p3xr-input id="p3xr-console-input" ng-keydown="$ctrl.action($event)" ng-model="$ctrl.inputValue"></p3xr-input>
    </md-content>
</div>