<md-dialog aria-label="{{ $root.p3xr.strings.intention.jsonViewShow }}">
    <md-toolbar md-theme="{{$root.p3xr.state.themeLayout}}">
        <div class="md-toolbar-tools">
            <md-icon>table_chart</md-icon>
            &nbsp;
            {{ $root.p3xr.strings.intention.jsonViewShow }}
            <span flex></span>

            <md-button class="md-icon-button" aria-label="" ng-if="isJson" ng-click="treeExpandAll()">
                <md-tooltip>{{ $root.p3xr.strings.page.treeControls.expandAll}}</md-tooltip>
                <md-icon>keyboard_arrow_down</md-icon>
            </md-button>

            <md-button class="md-icon-button" aria-label="" ng-if="isJson" ng-click="treeCollapseAll()">
                <md-tooltip>{{ $root.p3xr.strings.page.treeControls.collapseAll}}</md-tooltip>
                <md-icon>keyboard_arrow_up</md-icon>
            </md-button>

            <md-button class="md-icon-button" ng-click="ok()" aria-label="{{ $root.p3xr.strings.intention.close }}">
                <md-icon>close</md-icon>
            </md-button>
        </div>
    </md-toolbar>

    <md-dialog-content flex>
        <md-content layout-padding style="font-family: monospace;">
            <json-tree object="obj" root-name="$root.p3xr.strings.label.tree" ng-if="isJson && howExpanded === true" start-expanded="howExpanded"></json-tree>
            <json-tree object="obj" root-name="$root.p3xr.strings.label.tree" ng-if="isJson && howExpanded === 'recursive'" start-expanded="howExpanded"></json-tree>
            <div ng-if="!isJson">
                {{ $root.p3xr.strings.label.jsonViewNotParsable}}
            </div>
        </md-content>
    </md-dialog-content>

    <md-dialog-actions layout="row">
        <span flex></span>
        <md-button ng-click="ok()" class="md-raised md-accent" aria-label="{{ $root.p3xr.strings.intention.close }}">
            <md-icon>close</md-icon>
            {{ $root.p3xr.strings.intention.close }}
        </md-button>
    </md-dialog-actions>
    </form>
</md-dialog>