<div class="context-column">
    <header class="context-header">
        <div class="context-header__top">
            <h2>{{ 'WORKSPACE.SOURCES.TITLE' | translate }}</h2>
        </div>
        <p>{{ 'WORKSPACE.SOURCES.SUBTITLE' | translate }}</p>
    </header>

    <div class="context-divider"></div>

    <section class="panel-section">
        <div class="nav-list option-list">
            <h3 class="panel-section-title">
                {{ 'WORKSPACE.SOURCES.TYPE' | translate }}
            </h3>
            @for (option of typeOptions; track option.id) {
                <button
                    type="button"
                    class="nav-item category-item option-row"
                    [class.selected]="isTypeActive(option.id)"
                    (click)="selectType(option.id)"
                >
                    <mat-icon>{{ option.icon }}</mat-icon>
                    <span class="nav-item-label option-label">
                        {{
                            option.translationKey
                                ? (option.translationKey | translate)
                                : option.label
                        }}
                    </span>
                    <div class="nav-item-meta option-meta">
                        {{ getTypeCount(option.id) }}
                    </div>
                </button>
            }
        </div>
    </section>
</div>
