<main class="main">
  <div class="content" style="text-align:left; margin-top:50px;">
    <h1>Angular</h1>

    <button (click)="apriori()">Produktwissen abfragen</button>
    <button (click)="calculate(verkaufsprodukte[0])">calculate</button>

    <h2>Produktbaum</h2>

    <ng-template #bausteinTemplate let-bausteine let-risikoobjekt="risikoobjekt">
      <ul class="baustein-list">
        <li *ngFor="let baustein of bausteine" class="baustein-item">
          <div class="baustein-row">
            <span
              class="baustein-name"
              [ngClass]="{ 'notIncluded': baustein.occByParent < 1 }"
              (click)="toggleAttributes(baustein)"
              style="cursor:pointer;"
            >
              <div *ngIf="baustein.meldungen.length > 0" style="color: red" > {{baustein.bez}} </div>
              <div *ngIf="baustein.meldungen.length <= 0"> {{baustein.bez}} </div>
            </span>
            <div *ngIf="baustein.showAttribute" class="extraInfo-container" style="margin-left: 20px; margin-top: 5px;">
              <table>
                <div *ngFor="let attr of baustein.attribute" class="attribute-item">
                  <tr>
                    <td>
                      <strong>{{ attr.bez }}:</strong>
                    </td>

                    <td>
                      <input
                        *ngIf="getInputType(attr) === 'checkbox'"
                        type="checkbox"
                        [checked]="attr.value !== undefined ? attr.value : (attr.default !== undefined ? attr.default : false)"
                        (change)="setBooleanAttributValue($event, attr)"
                        [disabled]="attr.aenderbar !== undefined ? !attr.aenderbar : false"
                      />

                      <input
                        *ngIf="getInputType(attr) !== 'checkbox'"
                        [(ngModel)]="attr.value"
                        [type]="getInputType(attr)"
                        [placeholder]="attr.value ?? attr.default ?? ''"
                        (ngModelChange)="attributValueListener(attr)"
                        [disabled]="attr.aenderbar !== undefined ? !attr.aenderbar : false"
                      />
                    </td>
                  </tr>
                </div>
              </table>

              <div *ngFor="let meldung of baustein.meldungen" class="meldungen-container">
                <strong> {{meldung.errorMsg}} </strong>
              </div>

              <div *ngIf="risikoobjektService.risikoobjekte().length > 0" class="risikoobjekt-container">
                <strong>Mit dem Baustein assoziiertes Risikoobjekt</strong>
                <div *ngFor="let ro of risikoobjektService.risikoobjekte()" class="risikoobjekt-item-container">
                  <label [for]="'check-' + '{{ro.id}}'">
                    {{ro.handelsbezeichnung}} ({{ro.baujahr}})
                  </label>

                  <input
                    type="checkbox"
                    [id]="'check-' + '{{ro.id}}'"
                    (change)="risikoobjektListener(baustein, ro, $event)"
                    [checked]="baustein.risikoobjekte.includes(ro)"
                  />
                </div>
              </div>
            </div>
            <div class="baustein-buttons">
              <button
                (click)="removeProdukt(baustein)"
                [disabled]="baustein.occByParent <= baustein.minOcc"
                class="btn-control">-</button>
              <button
                (click)="addProdukt(baustein)"
                [disabled]="baustein.actualOcc.value >= baustein.maxOcc && baustein.occByParent >= baustein.maxOcc"
                class="btn-control">+</button>
            </div>
          </div>

          <ng-container
            *ngIf="baustein.unterbausteine.length > 0"
            [ngTemplateOutlet]="bausteinTemplate"
            [ngTemplateOutletContext]="{ $implicit: baustein.unterbausteine }">
          </ng-container>
        </li>
      </ul>
    </ng-template>

    <ng-container
      [ngTemplateOutlet]="bausteinTemplate"
      [ngTemplateOutletContext]="{ $implicit: verkaufsprodukte, risikoobjekt: risikoobjekte}">
    </ng-container>
  </div>
</main>
