<section
    class="settings-group"
    [class.settings-group--active]="activeSection() === 'reset'"
    id="reset"
>
    <header class="settings-group__header">
        <div class="settings-group__header-icon">
            <mat-icon>delete_sweep</mat-icon>
        </div>
        <div class="settings-group__header-text">
            <h3>{{ 'SETTINGS.RESET' | translate }}</h3>
            <p>{{ 'SETTINGS.RESET_DESCRIPTION' | translate }}</p>
        </div>
    </header>

    <div class="setting-item danger-zone">
        <div class="danger-zone__header">
            <div class="setting-item__meta">
                <h4>{{ 'SETTINGS.REMOVE_ALL' | translate }}</h4>
                <p>{{ 'SETTINGS.REMOVE_ALL_DESCRIPTION' | translate }}</p>
            </div>
            <button
                mat-button
                class="danger-zone__button"
                [class.danger-zone__button--busy]="isRemovingAllPlaylists()"
                [disabled]="!canRemoveAllPlaylists()"
                [attr.aria-busy]="isRemovingAllPlaylists()"
                (click)="
                    $event.preventDefault();
                    $event.stopPropagation();
                    removeAll.emit()
                "
                color="warn"
            >
                @if (isRemovingAllPlaylists()) {
                    <mat-progress-spinner
                        class="button-spinner"
                        diameter="16"
                        mode="indeterminate"
                    />
                    <span class="inline-actions__label">{{
                        'SETTINGS.REMOVE_ALL_IN_PROGRESS' | translate
                    }}</span>
                } @else {
                    <span class="inline-actions__label">{{
                        'SETTINGS.REMOVE_ALL_BUTTON' | translate
                    }}</span>
                }
            </button>
        </div>
        <div class="danger-zone__summary" aria-live="polite">
            <span class="danger-zone__summary-pill">
                <mat-icon class="danger-zone__summary-icon"
                    >folder_open</mat-icon
                >
                <span class="danger-zone__summary-label">{{
                    'HOME.PLAYLIST_TYPES.M3U' | translate
                }}</span>
                <span class="danger-zone__summary-count">{{
                    playlistDeleteSummary().m3u
                }}</span>
            </span>
            <span class="danger-zone__summary-pill">
                <mat-icon class="danger-zone__summary-icon">cloud</mat-icon>
                <span class="danger-zone__summary-label">{{
                    'HOME.PLAYLIST_TYPES.XTREAM' | translate
                }}</span>
                <span class="danger-zone__summary-count">{{
                    playlistDeleteSummary().xtream
                }}</span>
            </span>
            <span class="danger-zone__summary-pill">
                <mat-icon class="danger-zone__summary-icon">cast</mat-icon>
                <span class="danger-zone__summary-label">{{
                    'HOME.PLAYLIST_TYPES.STALKER' | translate
                }}</span>
                <span class="danger-zone__summary-count">{{
                    playlistDeleteSummary().stalker
                }}</span>
            </span>
        </div>
        @if (removeAllProgressLabel(); as progressLabel) {
            <p class="danger-zone__progress">
                {{ progressLabel }}
            </p>
        }
    </div>
</section>
