@let isExpandedProperties = isPanelExpanded(DefaultPanels.PROPERTIES);
@let isExpandedTags = isPanelExpanded(DefaultPanels.TAGS);
@let isExpandedCategories = isPanelExpanded(DefaultPanels.CATEGORIES);
@let isEditingTags = isPanelEditing(DefaultPanels.TAGS);
@let isEditingCategories = isPanelEditing(DefaultPanels.CATEGORIES);
@let isEditingProperties = isPanelEditing(DefaultPanels.PROPERTIES);

<mat-accordion displayMode="flat" [multi]="multi" class="adf-metadata-properties">
    @if (displayDefaultProperties) {
        <mat-expansion-panel
            class="adf-content-metadata-panel"
            [expanded]="isExpandedProperties"
            (opened)="expandPanel(DefaultPanels.PROPERTIES)"
            (closed)="closePanel(DefaultPanels.PROPERTIES)"
            [attr.data-automation-id]="'adf-metadata-group-properties'"
            hideToggle>
            <mat-expansion-panel-header
                class="adf-metadata-properties-header"
                [attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.SECTION' | translate: { sectionName: ('CORE.METADATA.BASIC.HEADER' | translate) }"
                [class.adf-metadata-properties-header-expanded]="isExpandedProperties">
                <adf-content-metadata-header
                    [title]="'CORE.METADATA.BASIC.HEADER'"
                    [expanded]="isExpandedProperties">
                    @if (!readOnly && !isEditingProperties) {
                        <button
                            mat-icon-button
                            (click)="toggleGroupEditing(DefaultPanels.PROPERTIES, $event)"
                            [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
                            [attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.EDIT' | translate: { sectionName: ('CORE.METADATA.BASIC.HEADER' | translate) }"
                            data-automation-id="meta-data-general-info-edit"
                            class="adf-edit-icon-buttons">
                            <mat-icon adf-icon="mode_edit" />
                        </button>
                    }
                    @if (isEditingProperties) {
                        <div class="adf-metadata-action-buttons">
                            <button
                                mat-icon-button
                                [attr.title]="'CORE.METADATA.ACTIONS.CANCEL' | translate"
                                (click)="cancelGroupEditing(DefaultPanels.PROPERTIES, $event)"
                                data-automation-id="reset-metadata"
                                class="adf-metadata-action-buttons-clear">
                                <mat-icon adf-icon="clear" />
                            </button>
                            <button
                                mat-icon-button
                                [attr.title]="'CORE.METADATA.ACTIONS.SAVE' | translate"
                                (click)="saveChanges($event)"
                                color="primary"
                                data-automation-id="save-general-info-metadata"
                                [disabled]="!hasMetadataChanged || invalidProperties.size > 0">
                                <mat-icon adf-icon="check" />
                            </button>
                        </div>
                    }
                </adf-content-metadata-header>
            </mat-expansion-panel-header>
            <adf-card-view
                class="adf-metadata-properties-expansion-panel"
                (keydown)="keyDown($event)"
                [properties]="(basicProperties$ | async) ?? []"
                [editable]="!readOnly && isEditingProperties"
                [displayEmpty]="displayEmpty"
                [copyToClipboardAction]="copyToClipboardAction"
                [useChipsForMultiValueProperty]="useChipsForMultiValueProperty"
                [multiValueSeparator]="multiValueSeparator" />
        </mat-expansion-panel>
    }
    @if (displayTags) {
        <mat-expansion-panel
            hideToggle
            [expanded]="isExpandedTags"
            (opened)="expandPanel(DefaultPanels.TAGS)"
            (closed)="closePanel(DefaultPanels.TAGS)"
            class="adf-content-metadata-panel"
            data-automation-id="adf-content-metadata-tags-panel">
            <mat-expansion-panel-header
                class="adf-metadata-properties-header"
                [attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.SECTION' | translate: { sectionName: ('METADATA.BASIC.TAGS' | translate) }"
                [class.adf-metadata-properties-header-expanded]="isExpandedTags">
                <adf-content-metadata-header [title]="'METADATA.BASIC.TAGS'" [expanded]="isExpandedTags">
                    @if (!readOnly && !isEditingTags) {
                        <button
                            mat-icon-button
                            (click)="toggleGroupEditing(DefaultPanels.TAGS, $event)"
                            [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
                            [attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.EDIT' | translate: { sectionName: ('METADATA.BASIC.TAGS' | translate) }"
                            data-automation-id="showing-tag-input-button"
                            class="adf-edit-icon-buttons">
                            <mat-icon adf-icon="mode_edit" />
                        </button>
                    }
                    @if (isEditingTags) {
                        <div class="adf-metadata-action-buttons">
                            <button
                                mat-icon-button
                                [attr.title]="'CORE.METADATA.ACTIONS.CANCEL' | translate"
                                (click)="cancelGroupEditing(DefaultPanels.TAGS, $event)"
                                data-automation-id="reset-tags-metadata"
                                class="adf-metadata-action-buttons-clear">
                                <mat-icon adf-icon="clear" />
                            </button>
                            <button
                                mat-icon-button
                                [attr.title]="'CORE.METADATA.ACTIONS.SAVE' | translate"
                                (click)="saveChanges($event)"
                                color="primary"
                                data-automation-id="save-tags-metadata"
                                [disabled]="!hasMetadataChanged">
                                <mat-icon adf-icon="check" />
                            </button>
                        </div>
                    }
                </adf-content-metadata-header>
            </mat-expansion-panel-header>
            @if (!isEditingTags) {
                <div class="adf-metadata-properties-tags">
                    <adf-dynamic-chip-list [chips]="tagsToDisplay" [showDelete]="false" />
                </div>
            }
            @if (showEmptyTagMessage) {
                <div class="adf-metadata-no-item-added">
                    {{ 'METADATA.BASIC.NO_TAGS_ADDED' | translate }}
                </div>
            }
            @if (!readOnly && isEditingTags) {
                <adf-tags-creator
                    class="adf-metadata-properties-tags"
                    [tagNameControlVisible]="editing"
                    (tagsChange)="storeTagsToAssign($event)"
                    [mode]="tagsCreatorMode"
                    [tags]="assignedTags"
                    [disabledTagsRemoving]="saving" />
            }
        </mat-expansion-panel>
    }

    @if (displayCategories) {
        <mat-expansion-panel
            hideToggle
            [expanded]="isExpandedCategories"
            (opened)="expandPanel(DefaultPanels.CATEGORIES)"
            (closed)="closePanel(DefaultPanels.CATEGORIES)"
            class="adf-content-metadata-panel"
            data-automation-id="adf-content-metadata-categories-panel">
            <mat-expansion-panel-header
                class="adf-metadata-properties-header"
                [attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.SECTION' | translate: { sectionName: ('CATEGORIES_MANAGEMENT.CATEGORIES_TITLE' | translate) }"
                [class.adf-metadata-properties-header-expanded]="isExpandedCategories">
                <adf-content-metadata-header
                    [title]="'CATEGORIES_MANAGEMENT.CATEGORIES_TITLE'"
                    [expanded]="isExpandedCategories">
                    @if (!readOnly && !isEditingCategories) {
                        <button
                            mat-icon-button
                            (click)="toggleGroupEditing(DefaultPanels.CATEGORIES, $event)"
                            [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
                            [attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.EDIT' | translate: { sectionName: ('CATEGORIES_MANAGEMENT.CATEGORIES_TITLE' | translate) }"
                            data-automation-id="meta-data-categories-edit"
                            class="adf-categories-button adf-edit-icon-buttons">
                            <mat-icon adf-icon="mode_edit" />
                        </button>
                    }
                    @if (isEditingCategories) {
                        <div class="adf-metadata-action-buttons">
                            <button
                                mat-icon-button
                                [attr.title]="'CORE.METADATA.ACTIONS.CANCEL' | translate"
                                (click)="cancelGroupEditing(DefaultPanels.CATEGORIES, $event)"
                                data-automation-id="reset-metadata"
                                class="adf-metadata-action-buttons-clear">
                                <mat-icon adf-icon="clear" />
                            </button>
                            <button
                                mat-icon-button
                                [attr.title]="'CORE.METADATA.ACTIONS.SAVE' | translate"
                                (click)="saveChanges($event)"
                                color="primary"
                                data-automation-id="save-categories-metadata"
                                [disabled]="!hasMetadataChanged">
                                <mat-icon adf-icon="check" />
                            </button>
                        </div>
                    }
                </adf-content-metadata-header>
            </mat-expansion-panel-header>
            @if (!isEditingCategories) {
                <div>
                    @for (category of categories; track category.id) {
                        <p class="adf-metadata-categories">{{ category.name }}</p>
                    }
                </div>
            }
            @if (showEmptyCategoryMessage) {
                <div class="adf-metadata-no-item-added">
                    {{ 'CATEGORIES_MANAGEMENT.NO_CATEGORIES_ADDED' | translate }}
                </div>
            }
            @if (!readOnly && isEditingCategories) {
                <adf-categories-management
                    class="adf-metadata-categories-header"
                    [categoryNameControlVisible]="editing"
                    [disableRemoval]="saving"
                    [categories]="categories"
                    [managementMode]="categoriesManagementMode"
                    [classifiableChanged]="classifiableChanged"
                    (categoriesChange)="storeCategoriesToAssign($event)" />
            }
        </mat-expansion-panel>
    }

    @for (customPanel of customPanels; track customPanel.panelTitle) {
        @let isExpandedCustomPanel = currentPanel.panelTitle === customPanel.panelTitle && currentPanel.expanded;
        <mat-expansion-panel
            [expanded]="isExpandedCustomPanel"
            (opened)="expandPanel(customPanel.panelTitle)"
            (closed)="closePanel(customPanel.panelTitle)"
            class="adf-content-metadata-panel"
            hideToggle>

            <mat-expansion-panel-header
                class="adf-metadata-properties-header"
                [attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.SECTION' | translate: { sectionName: (customPanel.panelTitle | translate) }"
                [class.adf-metadata-properties-header-expanded]="isExpandedCustomPanel">
                <adf-content-metadata-header
                    class="adf-metadata-custom-panel-title"
                    [title]="customPanel.panelTitle"
                    [expanded]="isExpandedCustomPanel" />
            </mat-expansion-panel-header>
            <adf-dynamic-component [id]="customPanel.component" [data]="{ node }" />
        </mat-expansion-panel>
    }

    @let groupedProperties = groupedProperties$ | async;

    @if (groupedProperties) {
        @for (group of groupedProperties; track group.title; let first = $first) {
            @let isExpandedGroup = (currentPanel.panelTitle === group.title && currentPanel.expanded) ?? false;
            <div class="adf-metadata-grouped-properties-container">
                <mat-expansion-panel
                    [attr.data-automation-id]="'adf-metadata-group-' + group.title"
                    [expanded]="multi ? !displayDefaultProperties && first || group.expanded : !displayDefaultProperties && first || isExpandedGroup"
                    (opened)="expandPanel(group.title); group.expanded = true"
                    (closed)="closePanel(group.title); group.expanded = false"
                    class="adf-content-metadata-panel"
                    hideToggle>
                    <mat-expansion-panel-header
                        class="adf-metadata-properties-header"
                        [attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.SECTION' | translate: { sectionName: (group.title | translate) }"
                        [class.adf-metadata-properties-header-expanded]="isExpandedGroup">
                        <adf-content-metadata-header [title]="group.title" [expanded]="isExpandedGroup">
                            @if (group.editable && !this.readOnly && !isPanelEditing(group.title)) {
                                <button
                                    mat-icon-button
                                    [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
                                    [attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.EDIT' | translate: { sectionName: (group.title | translate) }"
                                    data-automation-id="meta-data-card-toggle-edit"
                                    class="adf-edit-icon-buttons"
                                    (click)="toggleGroupEditing(group.title, $event)">
                                    <mat-icon adf-icon="mode_edit" />
                                </button>
                            }
                            @if (group.editable && isPanelEditing(group.title)) {
                                <div class="adf-metadata-action-buttons">
                                    <button
                                        mat-icon-button
                                        [attr.title]="'CORE.METADATA.ACTIONS.CANCEL' | translate"
                                        (click)="cancelGroupEditing(group.title, $event)"
                                        data-automation-id="reset-metadata"
                                        class="adf-metadata-action-buttons-clear">
                                        <mat-icon adf-icon="clear" />
                                    </button>
                                    <button
                                        mat-icon-button
                                        [attr.title]="'CORE.METADATA.ACTIONS.SAVE' | translate"
                                        (click)="saveChanges($event)"
                                        color="primary"
                                        data-automation-id="save-metadata"
                                        [disabled]="!hasMetadataChanged || invalidProperties.size > 0">
                                        <mat-icon adf-icon="check" />
                                    </button>
                                </div>
                            }
                        </adf-content-metadata-header>
                    </mat-expansion-panel-header>
                    @if (!showGroup(group) && !displayEmpty && group.editable && editedPanelTitle !== group.title) {
                        <div class="adf-metadata-no-item-added">
                            {{ 'METADATA.BASIC.NO_ITEMS_MESSAGE' | translate : { groupTitle: group.title | translate } }}
                        </div>
                    }
                    <adf-card-view
                        class="adf-metadata-properties-expansion-panel"
                        (keydown)="keyDown($event)"
                        [properties]="group.properties"
                        [editable]="!readOnly && group.editable && isPanelEditing(group.title)"
                        [displayEmpty]="displayEmpty"
                        [copyToClipboardAction]="copyToClipboardAction"
                        [useChipsForMultiValueProperty]="useChipsForMultiValueProperty"
                        [multiValueSeparator]="multiValueSeparator" />
                </mat-expansion-panel>
            </div>
        }
    } @else {
        <mat-progress-bar mode="indeterminate" [attr.aria-label]="'DATA_LOADING' | translate" />
    }
</mat-accordion>