<app-panel [collapsible]="true"
           [expandable]="true"
           [expanded]="editing"
           (onExpand)="edit($event)"
           (onContraction)="cancel($event)"
           panelClass="panel-defualt"
           heading="{{ 'car.carCardComponent.carOptions.header' | translate }}">

  <div *ngIf="!editing">

    <div class="text-center" *ngIf="car.options.length === 0">
      <strong>{{ 'car.carCardComponent.carOptions.lostOptions' | translate }}</strong>
    </div>

    <div class="mb15 ml20" *ngFor="let pOption of parentOptions">
      <b>{{pOption.name}}</b>
      <ul>
        <li *ngFor="let option of car.options | filter: 'parentId' : pOption.id">
          <span>{{option.name}}</span>
        </li>
      </ul>
    </div>
  </div>

  <div *ngIf="editing">
    <div class="text-center" *ngIf="availableOptions.length === 0">
      <strong>{{ 'car.carCardComponent.carOptions.editLostOptions' | translate }}</strong>
    </div>

    <div class="mb15 ml20" *ngFor="let pOption of availableParentOptions">
      <div><b>{{pOption.name}}</b></div>
      <div class="checkbox block ml20"
           *ngFor="let option of availableOptions | filter: 'parentId' : pOption.id">
        <label>
          <input type="checkbox" [(ngModel)]="option.checked" /> {{option.name}}
        </label>
      </div>
    </div>
  </div>

  <div panel-footer class="text-right" *ngIf="editing">
    <a class="btn btn-success"
       (click)="update()"
       *ngIf="availableOptions.length !== 0">

      {{ 'appPanel.save' | translate }}
    </a>
    <a class="btn btn-default" (click)="cancel()">{{ 'appPanel.cancel' | translate }}</a>
  </div>
</app-panel>