<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

@if (useCases) {
    <div class="use-case flex flex-col gap-y-2">
        <div class="flex justify-between items-center">
            <div>The list below summarizes some common use cases this Processor supports.</div>
            <div>
                <button type="button" mat-icon-button class="primary-icon-button" title="Expand All" (click)="expand()">
                    <i class="fa fa-expand fa-rotate-45"></i>
                </button>
                <button
                    type="button"
                    mat-icon-button
                    class="primary-icon-button"
                    title="Collapse All"
                    (click)="collapse()">
                    <i class="fa fa-compress fa-rotate-45"></i>
                </button>
            </div>
        </div>
        <mat-accordion multi>
            @for (useCase of useCases; track useCase.description) {
                <mat-expansion-panel>
                    <mat-expansion-panel-header>
                        <mat-panel-title [title]="useCase.description">{{ useCase.description }}</mat-panel-title>
                    </mat-expansion-panel-header>
                    <div class="property-definition flex flex-col gap-y-4">
                        <div>
                            <div>Description</div>
                            <div class="tertiary-color font-medium">{{ useCase.description }}</div>
                        </div>
                        @if (useCase.notes) {
                            <div>
                                <div>Notes</div>
                                <div class="tertiary-color font-medium">{{ useCase.notes }}</div>
                            </div>
                        }
                        @if (useCase.keywords.length > 0) {
                            <div>
                                <div>Keywords</div>
                                <div class="tertiary-color font-medium">{{ formatKeywords(useCase.keywords) }}</div>
                            </div>
                        }
                        @if (useCase.inputRequirement && useCase.inputRequirement !== InputRequirement.INPUT_ALLOWED) {
                            <div>
                                <div>Input Requirement</div>
                                <input-requirement [inputRequirement]="useCase.inputRequirement"></input-requirement>
                            </div>
                        }
                        <div class="flex flex-col gap-y-1">
                            <div>Configuration</div>
                            <pre class="whitespace-pre-wrap">{{ useCase.configuration }}</pre>
                        </div>
                    </div>
                </mat-expansion-panel>
            }
        </mat-accordion>
    </div>
}
