<div layout-gt-xs="row" layout="column" layout-align="start center" md-colors="{ background: 'primary-300' }">
    <div flex="15">
        &nbsp;
        {{ $root.p3xr.strings.page.key.zset.table.score }}
    </div>
    <div flex>
        {{ $root.p3xr.strings.page.key.zset.table.value }}
    </div>
    <div flex="5" style="text-align: right">
        <md-button class="md-icon-button " ng-click="$ctrl.addZSet({ $event: $event})">
            <md-tooltip>{{ $root.p3xr.strings.intention.add }}</md-tooltip>
            <md-icon>add</md-icon>
        </md-button>
    </div>
</div>

<div layout-gt-xs="row" layout="column" layout-align="start start" ng-repeat="value in $ctrl.generatedValue" style="{{ $ctrl.setTableStyles({ $odd: $odd }) }}">
    <div flex="15">
        &nbsp;
        {{ value[0] }}
    </div>
    <div flex class="p3xr-pre" style="overflow: auto;align-items: flex-start; max-height: 200px;">{{ value[1] }}</div>
    <div flex="5" style="text-align: right; ">
        <md-button class="md-icon-button md-primary" ng-click="$ctrl.showJson({ value:  value[1]})">
            <md-tooltip>{{ $root.p3xr.strings.intention.jsonViewShow }}</md-tooltip>
            <md-icon>table_chart</md-icon>
        </md-button>

        <md-button class="md-icon-button md-warn" ng-click="$ctrl.deleteZSet({ member: value[1], $event: $event})">
            <md-tooltip>{{ $root.p3xr.strings.intention.delete }}</md-tooltip>
            <md-icon>delete</md-icon>
        </md-button>

        <md-button class="md-icon-button md-accent" ng-click="$ctrl.editValue({ score: value[0], member: value[1], $event: $event})">
            <md-tooltip>{{ $root.p3xr.strings.intention.edit }}</md-tooltip>
            <md-icon>edit</md-icon>
        </md-button>
    </div>
</div>