<div *ngIf="stats$ | async as stats">
    <redaction-donut-chart
        [config]="dossiersChartConfig$ | async"
        [radius]="80"
        [strokeWidth]="15"
        [subtitles]="['dossier-template-stats.active-dossiers' | translate : { count: stats.numberOfActiveDossiers }]"
        filterKey="dossierStatesFilters"
    ></redaction-donut-chart>

    <div class="dossier-stats-container">
        <div class="dossier-stats-item">
            <mat-icon svgIcon="red:needs-work"></mat-icon>
            <div>
                <div class="heading">{{ stats.numberOfPages | number }}</div>
                <div [translateParams]="{ count: stats.numberOfPages }" [translate]="'dossier-listing.stats.analyzed-pages'"></div>
            </div>
        </div>

        <div class="dossier-stats-item">
            <mat-icon svgIcon="red:user"></mat-icon>
            <div>
                <div class="heading">{{ stats.numberOfPeople }}</div>
                <div translate="dossier-listing.stats.total-people"></div>
            </div>
        </div>
    </div>
</div>

<div class="right-chart">
    <redaction-donut-chart
        [config]="documentsChartConfig$ | async"
        [helpModeKey]="'filter_dossier_list'"
        [radius]="80"
        [strokeWidth]="15"
        [subtitles]="['dossier-template-stats.total-documents' | translate]"
        filterKey="statusFilters"
    ></redaction-donut-chart>
</div>
