<md-card>
    <md-toolbar class="md-table-toolbar md-default" layout-padding>

        <div layout="row" layout-align="space-between start">
            <md-input-container class="md-icon-float md-block">
                <label>{{ 'NGO suchen' | translate }}</label>
                <md-icon class="material-icons">search</md-icon>
                <input ng-model="vm.listFilter.search" type="text">
            </md-input-container>

            <div layout="row" layout-align="end center" ng-cloak style="font-size:16px">
                <md-input-container>
                    <label>{{ 'Veröffentlicht' | translate }}</label>
                    <md-select ng-model="vm.listFilter.published">
                        <md-option ng-value="">{{ 'Alle' | translate }}</md-option>
                        <md-option ng-value="true">{{ 'Ja' | translate }}</md-option>
                        <md-option ng-value="false">{{ 'Nein' | translate }}</md-option>
                    </md-select>
                </md-input-container>
            </div>


            <span flex></span>
            <div layout="row" layout-align="end center" ng-cloak style="font-size:16px">
                <md-button class="md-raised md-icon-button md-primary" ng-click="vm.add()" layout="row" layout-align="center center">
                    <i class="material-icons">add</i>
                </md-button>
            </div>
        </div>
    </md-toolbar>

    <md-table-container>
        <table md-table md-row-select multiple ng-model="vm.selectedNgos">
            <thead md-head md-order="vm.listOrderByColumn"  md-on-reorder="vm.onOrderChange">
            <tr md-row>

                <th md-column class="icon"></th>
                <th md-column md-order-by="organisation">{{ 'NGO-Name' | translate }}</th>
                <th md-column>{{ 'Veröffentlicht' | translate }}</th>
                <th md-column>{{ 'Angebote' | translate }}</th>
                <th md-column>{{ 'Benutzer' | translate }}</th>
            </tr>
            </thead>
            <tbody md-body>
            <tr  md-row md-select="ngo" ng-repeat="ngo in vm.filteredNgos =
            (vm.ngos | filter: vm.listFilter.search
                     | ngoPublished: vm.listFilter.published)
                     | limitTo: vm.listPagination.limit : (vm.listPagination.page-1)*vm.listPagination.limit">
                <td md-cell><md-button ng-click="vm.edit(ngo)" class="md-icon-button"><md-icon>edit</md-icon></md-button></td>
                <td md-cell>{{ngo.organisation}}</td>
                <td md-cell>
                    <md-switch ng-model="ngo.published" ng-change="vm.togglePublished(ngo)"
                               aria-label="{{ 'NGO veröffentlichen/deaktivieren' | translate }}"></md-switch>
                </td>
                <td md-cell>
                  {{ngo.offers.length}}
                </td>
                <td md-cell>
                  <a ui-sref="{{'cms.ngos.users({id:'+ngo.id+'})'}}">{{ngo.users.length}}</a>
                </td>
            </tr>
            </tbody>
        </table>
    </md-table-container>

    <md-table-pagination md-limit="vm.listPagination.limit" md-page="vm.listPagination.page" md-total="{{vm.filteredNgos.length}}"></md-table-pagination>

</md-card>
<md-fab-speed-dial  ng-if="vm.cms" class="md-fling fixed bottom" ng-show="vm.selectedNgos.length" md-open="vm.menu.isOpen" md-direction="up">
     <md-fab-trigger>
       <md-button aria-label="menu" class="md-fab md-warn">
         <md-tooltip md-direction="left" md-delay="250">{{ 'Ngo(s) bearbeiten' | translate }}</md-tooltip>
         <md-icon>edit</md-icon>
       </md-button>
     </md-fab-trigger>
     <md-fab-actions>
       <md-button class="md-raised md-fab md-warn md-hue-2 md-mini" ng-click="vm.remove()" layout="row" layout-align="center center">
         <md-tooltip md-direction="left" md-delay="250">{{ 'Ngo(s) löschen' | translate }}</md-tooltip>
           <i class="material-icons">delete</i>
       </md-button>
       <md-button class="md-raised md-fab  md-warn md-mini" ng-click="vm.bulkToggleEnabled(false)" layout="row" layout-align="center center">
          <md-tooltip md-direction="left" md-delay="250">{{ 'Ngo(s) deaktivieren' | translate }}</md-tooltip>
           <i class="material-icons">lock</i>
       </md-button>
       <md-button  class="md-raised md-fab  md-accent md-mini" ng-click="vm.bulkToggleEnabled(true)" layout="row" layout-align="center center">
          <md-tooltip md-direction="left" md-delay="250">{{ 'Ngo(s) aktivieren' | translate }}</md-tooltip>
           <i class="material-icons">lock_open</i>
       </md-button>


     </md-fab-actions>
   </md-fab-speed-dial>
