<div class="panel panel-default ">
  <div class="panel-heading">
    <h4 class="panel-title">
      Zuständigkeit
    </h4>
  </div>
  
  <div class="panel-body">
    <table class="table table-bordered responsibility-column-striped">
      <thead>
        <tr>
          <th style="border: 0"></th>
          <th style="min-width: 64px">Strom</th>
          <th style="min-width: 64px">Gas</th>
          <th style="min-width: 64px">FW</th>
          <th style="min-width: 64px">Wasser</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let responsibilityContainer of responsiblitySelection">
          <td>{{ responsibilityContainer.gridTerritoryDescription }}</td>
          <td>
            <input type="checkbox" *ngIf="responsibilityContainer && getResponsiblity(responsibilityContainer,'S')" (change)="responsibilitiesSelectionChanged()"
              class="responsibility-checkbox-er" [(ngModel)]="getResponsiblity(responsibilityContainer,'S').isActive">
            <span *ngIf="withNames && responsibilityContainer && getResponsiblity(responsibilityContainer,'S')">&nbsp;von:&nbsp;{{ mapUserName(getResponsiblity(responsibilityContainer, 'S').newResponsibleUser) }}</span>
          </td>
          <td>
            <input type="checkbox" *ngIf="responsibilityContainer  && getResponsiblity(responsibilityContainer,'G')" (change)="responsibilitiesSelectionChanged()"
              class="responsibility-checkbox-gr" [(ngModel)]="getResponsiblity(responsibilityContainer,'G').isActive">
            <span *ngIf="withNames && responsibilityContainer && getResponsiblity(responsibilityContainer,'G')">&nbsp;von:&nbsp;{{ mapUserName(getResponsiblity(responsibilityContainer, 'G').newResponsibleUser) }}</span>
          </td>
          <td>
            <input type="checkbox" *ngIf="responsibilityContainer  && getResponsiblity(responsibilityContainer,'F')" (change)="responsibilitiesSelectionChanged()"
              class="responsibility-checkbox-dhr" [(ngModel)]="getResponsiblity(responsibilityContainer,'F').isActive">
            <span *ngIf="withNames && responsibilityContainer && getResponsiblity(responsibilityContainer,'F')">&nbsp;von:&nbsp;{{ mapUserName(getResponsiblity(responsibilityContainer, 'F').newResponsibleUser) }}</span>
          </td>
          <td>
            <input type="checkbox" *ngIf="responsibilityContainer  && getResponsiblity(responsibilityContainer,'W')" (change)="responsibilitiesSelectionChanged()"
              class="responsibility-checkbox-wr" [(ngModel)]="getResponsiblity(responsibilityContainer,'W').isActive">
              <span *ngIf="withNames && responsibilityContainer && getResponsiblity(responsibilityContainer,'W')">&nbsp;von:&nbsp;{{ mapUserName(getResponsiblity(responsibilityContainer, 'W').newResponsibleUser) }}</span>
          </td>
        </tr>
      </tbody>
    </table>
    <button *ngIf="withButtons" class="btn btn-primary btn-sm" (click)="selectAllResponsibilities()">Alle setzen</button>
    <button *ngIf="withButtons" class="btn btn-primary btn-sm" (click)="deselectAllResponsibilities()">Alle löschen</button>
  </div>
</div>