<!-- ng-class="{ 'p3xr-accordion-electron': $root.isElectron }" -->
<div>
    <md-toolbar class="md-primary md-hue-1" md-theme="{{ $root.p3xr.state.themeLayout}}"
                md-whiteframe="{{ $ctrl.extended ? -1 : 1 }}">
        <div class="md-toolbar-tools">
            <h2 flex md-truncate  ng-click="$ctrl.extended = !$ctrl.extended">{{ $ctrl.p3xrTitle }}</h2>


            <span ng-if="$ctrl.transcludePresent('actions')" ng-transclude="actions"></span>

            <md-button class="md-icon-button" ng-click="$ctrl.extended = !$ctrl.extended">
                <md-icon>{{ !$ctrl.extended ? 'keyboard_arrow_down' : 'keyboard_arrow_up' }}</md-icon>
                <md-tooltip>{{ !$ctrl.extended ? $root.p3xr.strings.intention.extend :
                    $root.p3xr.strings.intention.collapse}}
                </md-tooltip>
            </md-button>

        </div>
    </md-toolbar>
    <md-content ng-if="$ctrl.extended" md-theme="{{ $root.p3xr.state.theme}}" ng-transclude="content" md-whiteframe="2" class="p3xr-content-border">
    </md-content>
</div>