<div style="text-align: right">
    <span ng-if="!$ctrl.editable">


        <md-button class="md-button md-raised md-accent" ng-click="$ctrl.jsonViewer({ $event: $event})">
            <md-icon>table_chart</md-icon>
            <span hide-sm hide-xs>{{ $root.p3xr.strings.intention.jsonViewShow }}</span>
            <md-tooltip ng-if="$root.$mdMedia('sm') || $root.$mdMedia('xs')" md-direction="bottom">{{
                $root.p3xr.strings.intention.jsonViewShow }}
            </md-tooltip>
        </md-button>

        <md-button class="md-button md-raised md-accent" ng-click="$ctrl.copy({ $event: $event})">
            <md-icon>content_copy</md-icon>
            <span hide-sm hide-xs>{{ $root.p3xr.strings.intention.copy }}</span>
            <md-tooltip ng-if="$root.$mdMedia('sm') || $root.$mdMedia('xs')" md-direction="bottom">{{
                $root.p3xr.strings.intention.copy }}
            </md-tooltip>
        </md-button>



        <md-button class="md-button md-raised md-primary" ng-click="$ctrl.formatJson({ $event: $event})" ng-if="$root.p3xr.state.connection.readonly !== true">
            <md-icon>format_line_spacing</md-icon>
            <span hide-sm hide-xs>{{ $root.p3xr.strings.intention.formatJson }}</span>
            <md-tooltip ng-if="$root.$mdMedia('sm') || $root.$mdMedia('xs')" md-direction="bottom">{{
                $root.p3xr.strings.intention.formatJson }}
            </md-tooltip>
        </md-button>


        <md-button class="md-button md-raised md-primary" ng-click="$ctrl.jsonEditor({ $event: $event})" ng-if="$root.p3xr.state.donated">
            <i class="fas fa-file-alt"></i>
            <span hide-sm hide-xs>{{ $root.p3xr.strings.intention.jsonViewEditor }}</span>
            <md-tooltip ng-if="$root.$mdMedia('sm') || $root.$mdMedia('xs')" md-direction="bottom">{{
                $root.p3xr.strings.intention.jsonViewEditor }}
            </md-tooltip>
        </md-button>


        <md-button class="md-button md-raised md-primary" ng-click="$ctrl.edit()">
            <md-icon>edit</md-icon>
             <span hide-sm hide-xs>{{ $root.p3xr.strings.intention.edit }}</span>
            <md-tooltip ng-if="$root.$mdMedia('sm') || $root.$mdMedia('xs')" md-direction="bottom">{{ $root.p3xr.strings.intention.edit }}</md-tooltip>
        </md-button>
    </span>

    <span ng-if="$ctrl.editable">
        <div layout="row" layout-align="end center">
            <div>
                <md-switch ng-model="$ctrl.validateJson" class="md-accent" style="float: right;" ng-if="$root.p3xr.state.connection.readonly !== true">
                    {{ $root.p3xr.strings.label.validateJson }}
                </md-switch>
            </div>
            <div>
                <md-button class="md-button md-raised md-warn" ng-click="$ctrl.cancelEdit()" md-autofocus>
                    <md-icon>cancel</md-icon>
                     <span hide-sm hide-xs>{{ $root.p3xr.strings.intention.cancel }}</span>
                    <md-tooltip ng-if="$root.$mdMedia('sm') || $root.$mdMedia('xs')" md-direction="bottom">{{ $root.p3xr.strings.intention.cancel }}</md-tooltip>
                </md-button>
            </div>
            <div>
                <md-button class="md-button md-raised md-primary" ng-click="$ctrl.save()" ng-if="$root.p3xr.state.connection.readonly !== true">
                    <md-icon>save</md-icon>
                     <span hide-sm hide-xs>{{ $root.p3xr.strings.intention.save }}</span>
                    <md-tooltip ng-if="$root.$mdMedia('sm') || $root.$mdMedia('xs')" md-direction="bottom">{{ $root.p3xr.strings.intention.save }}</md-tooltip>
                </md-button>
            </div>
        </div>


    </span>

</div>

<div layout-padding>
    <div class="p3xr-pre" style="max-width: 100%; overflow: auto;" ng-click="$ctrl.edit()" ng-if="!$ctrl.editable"><span ng-if="$root.p3xr.settings.maxValueDisplay > -1"><span ng-if="$root.p3xr.settings.maxValueDisplay > 0 && $ctrl.p3xrValue.length > $root.p3xr.settings.maxValueDisplay">{{ $ctrl.p3xrValue.substring(0, $root.p3xr.settings.maxValueDisplay) }}...</span><span ng-if="$root.p3xr.settings.maxValueDisplay === 0 || $ctrl.p3xrValue.length <= $root.p3xr.settings.maxValueDisplay">{{ $ctrl.p3xrValue }}</span></span></div>

    <div ng-if="$ctrl.editable">
        <md-input-container class="md-block">
            <label>{{ $root.p3xr.strings.label.edit }}</label>
            <textarea ng-model="$ctrl.p3xrValue"></textarea>
        </md-input-container>
    </div>
</div>