<p3xr-accordion p3xr-title="$root.p3xr.strings.label.connections" p3xr-accordion-key="settings">
    <p3xr-accordion-actions>
        <p3xr-button ng-click="$ctrl.connectionForm({ type: 'new'})" p3xr-label="$root.p3xr.strings.intention.connectionAdd" p3xr-md-icon="add_box"></p3xr-button>
    </p3xr-accordion-actions>
    <p3xr-accordion-content>
        <div ng-if="$root.p3xr.state.connections.list.length == 0" layout-padding>
            {{ $root.p3xr.strings.intention.noConnectionsInSettings }}
        </div>

        <md-list ng-if="$root.p3xr.state.connections.list.length > 0">
            <md-list-item class="md-2-line" ng-repeat="connection in $root.p3xr.state.connections.list">
                <div class="md-list-item-text">
                    <h3>{{connection.name}}</h3>
<!--                    <h4>{{item.who}}</h4> -->
                    <p>{{connection.host}}:{{connection.port}}</p>
                </div>

                <md-button class="md-primary md-raised" ng-click="$ctrl.connectionForm({ type: 'edit', model: connection})">
                    <md-icon>edit</md-icon>
                    <span hide-xs>{{ $root.p3xr.strings.intention.edit }}</span>
                    <md-tooltip ng-if="$root.$mdMedia('xs')">{{ $root.p3xr.strings.intention.edit }}</md-tooltip>
                </md-button>


                <md-button class="md-warn md-raised" ng-click="$ctrl.deleteConnection({ model: connection, ev: $event})">
                    <md-icon>delete_forever</md-icon>
                    <span hide-xs>{{ $root.p3xr.strings.intention.delete }}</span>
                    <md-tooltip ng-if="$root.$mdMedia('xs')">{{ $root.p3xr.strings.intention.delete }}</md-tooltip>
                </md-button>

                <md-divider ng-if="!$last"></md-divider>
            </md-list-item>
        </md-list>

    </p3xr-accordion-content>
</p3xr-accordion>