@if (componentDefinitions$ | async; as componentDefinitions) {
    <div class="content-container">
        <div class="content-header">
            <div class="header-title">
                <span
                    class="all-caps-label"
                    [innerHTML]="'component-definitions.title' | translate: { length: componentDefinitions.length }"
                ></span>
            </div>
            <div class="actions">
                @if (permissionsService.canEditEntities()) {
                    <iqser-icon-button
                        (action)="createEmptyComponentDefinition()"
                        [label]="'component-definitions.add-new' | translate"
                        [type]="iconButtonTypes.primary"
                        icon="iqser:plus"
                    ></iqser-icon-button>
                }
            </div>
        </div>
        <div class="content">
            <div class="components-list" (cdkDropListDropped)="drop($event)" cdkDropList>
                <div class="header">
                    <div class="item-content">
                        <div class="all-caps-label">{{ 'component-definitions.columns.position' | translate }}</div>
                        <div class="all-caps-label">{{ 'component-definitions.columns.name' | translate }}</div>
                    </div>
                </div>

                @for (component of componentDefinitions; track component) {
                    <div
                        class="list-item"
                        [class.selected]="selectedComponent?.id === component.id"
                        cdkDrag
                        (click)="selectComponent(component)"
                    >
                        <div class="item-content">
                            <div class="table-item-title heading">
                                <mat-icon cdkDragHandle class="draggable" svgIcon="red:draggable-dots"></mat-icon>
                                <span> {{ component.rank }} </span>
                            </div>
                            <div class="table-item-title heading">{{ component.displayName }}</div>
                            <div class="right-content">
                                @if (permissionsService.canEditEntities()) {
                                    <iqser-circle-button
                                        (action)="deleteComponent(component.id)"
                                        [tooltip]="'trash.action.delete' | translate"
                                        icon="iqser:trash"
                                    ></iqser-circle-button>
                                }
                                <mat-icon class="arrow-right" svgIcon="red:arrow-right"></mat-icon>
                            </div>
                        </div>
                    </div>
                }
            </div>
            @if (selectedComponent) {
                <section class="dialog">
                    <div class="dialog-header">
                        @if (selectedComponent.id) {
                            <div
                                class="heading-l"
                                [innerHTML]="'component-definitions.edit-title' | translate: { displayName: selectedComponent.displayName }"
                            ></div>
                        } @else {
                            <div class="heading-l" [innerHTML]="'component-definitions.add-title' | translate"></div>
                        }
                    </div>
                    @if (form) {
                        <form (submit)="save()" [formGroup]="form">
                            <div class="dialog-content">
                                <div class="iqser-input-group w-300 required">
                                    <label [translate]="'component-definitions.form.display-name'"></label>
                                    <input
                                        formControlName="displayName"
                                        name="displayName"
                                        placeholder="{{ 'component-definitions.form.display-name-placeholder' | translate }}"
                                        type="text"
                                    />
                                </div>

                                <div class="iqser-input-group w-450">
                                    <label [translate]="'component-definitions.form.description'"></label>
                                    <textarea
                                        [placeholder]="'component-definitions.form.description-placeholder' | translate"
                                        formControlName="description"
                                        iqserHasScrollbar
                                        name="description"
                                        rows="5"
                                        type="text"
                                    ></textarea>
                                </div>

                                <div class="iqser-input-group w-450">
                                    <label [translate]="'component-definitions.form.technical-name-label'"></label>
                                    <span class="technical-name"> {{ technicalName }} </span>
                                    <label [translate]="'component-definitions.form.autogenerated-label'"></label>
                                </div>
                            </div>

                            <div class="dialog-actions">
                                <iqser-icon-button
                                    [disabled]="disabled"
                                    [label]="'component-definitions.actions.save' | translate"
                                    [submit]="true"
                                    [type]="iconButtonTypes.primary"
                                ></iqser-icon-button>
                                @if (selectedComponent.id) {
                                    <div
                                        (click)="initForm()"
                                        [class.disabled]="disabled"
                                        [translate]="'component-definitions.actions.revert'"
                                        class="all-caps-label cancel"
                                    ></div>
                                }
                            </div>
                        </form>
                    }
                </section>
            }
        </div>
    </div>
}