<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate" />
        </ion-buttons>
        <ion-title>
            <h1>{{ 'addon.storagemanager.coursedownloads' | translate }}</h1>
        </ion-title>
    </ion-toolbar>
</ion-header>
<ion-content class="limited-width">
    <core-loading [hideUntil]="loaded">
        <ion-item class="ion-text-wrap" *ngIf="downloadCourseEnabled">
            <ion-label>
                <p>{{ 'addon.storagemanager.courseinfo' | translate }}</p>
            </ion-label>
        </ion-item>


        <ion-card class="wholecourse">
            <ion-card-header>
                <ion-card-title>
                    <core-format-text [text]="title" contextLevel="course" [contextInstanceId]="courseId" [adaptImg]="false" />
                </ion-card-title>
                <ion-item class="size ion-text-wrap ion-no-padding">
                    <ion-label>
                        <p class="item-heading ion-text-wrap">{{ 'addon.storagemanager.totaldownloads' | translate }}</p>
                    </ion-label>
                    <ion-badge color="light" slot="end">
                        <ng-container *ngIf="!calculatingSize">{{ totalSize | coreBytesToSize }}</ng-container>
                        <ng-container *ngIf="calculatingSize">{{ 'core.calculating' | translate }}</ng-container>
                    </ion-badge>
                </ion-item>
                <ion-button *ngIf="downloadCourseEnabled" (click)="prefetchCourse($event)" expand="block" fill="outline"
                    class="ion-no-margin" [disabled]="prefetchCourseData.loading">
                    <ion-icon *ngIf="!prefetchCourseData.loading" [name]="prefetchCourseData.icon" slot="start" />
                    <ion-spinner *ngIf="prefetchCourseData.loading" slot="start" />
                    {{ prefetchCourseData.statusTranslatable | translate }}
                </ion-button>
                <ion-button [disabled]="calculatingSize || totalSize <= 0" (click)="deleteForCourse($event)" expand="block" color="danger"
                    class="ion-no-margin ion-margin-top">
                    <ion-icon name="fas-trash" slot="start" [attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate:
                        { name: title }" />
                    {{ 'addon.storagemanager.deleteall' | translate }}
                </ion-button>
            </ion-card-header>
        </ion-card>
        <ng-container *ngFor="let section of sections">
            <ion-card class="section" *ngIf="section.modules.length > 0">
                <ion-card-header>
                    <ion-item [lines]="section.expanded ? 'full' : 'none'" button [detail]="false" (click)="toggleExpand($event, section)"
                        [class.core-course-storage-section-expanded]="section.expanded"
                        [attr.aria-label]="(section.expanded ? 'core.collapse' : 'core.expand') | translate"
                        [attr.aria-expanded]="section.expanded" [attr.aria-controls]="'core-course-storage-section-' + section.id">
                        <ion-icon name="fas-chevron-right" flip-rtl slot="start" class="expandable-status-icon"
                            [class.expandable-status-icon-expanded]="section.expanded" />
                        <ion-label>
                            <p class="item-heading ion-text-wrap">
                                <core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="section.course"
                                    [adaptImg]="false" />
                            </p>
                            <ion-badge [color]="section.downloadStatus === statusDownloaded ? 'success' : 'light'"
                                *ngIf="!section.calculatingSize && section.totalSize > 0">
                                <ion-icon name="fam-cloud-done" *ngIf="section.downloadStatus === statusDownloaded"
                                    [attr.aria-label]="'core.downloaded' | translate" />{{ section.totalSize | coreBytesToSize }}
                            </ion-badge>
                            <ion-badge color="light" *ngIf="section.calculatingSize">
                                {{ 'core.calculating' | translate }}
                            </ion-badge>
                            <!-- Download progress. -->
                            <p *ngIf="downloadEnabled && section.isDownloading">
                                <core-progress-bar [progress]="section.total === 0 ? -1 : section.count / section.total" />
                            </p>
                        </ion-label>
                        <div class="storage-buttons" slot="end"
                            *ngIf="(!section.calculatingSize && section.totalSize > 0) || downloadEnabled">
                            <div *ngIf="downloadEnabled" slot="end" class="core-button-spinner">
                                <core-download-refresh *ngIf="!section.isDownloading && section.downloadStatus !== statusDownloaded"
                                    [status]="section.downloadStatus" [enabled]="true" (action)="prefecthSection(section)"
                                    [loading]="section.isDownloading || section.isCalculating" [canTrustDownload]="true" />

                                <ion-badge class="core-course-download-section-progress"
                                    *ngIf="section.isDownloading && section.count < section.total" role="progressbar"
                                    [attr.aria-valuemax]="section.total" [attr.aria-valuenow]="section.count"
                                    [attr.aria-valuetext]="'core.course.downloadsectionprogressdescription' | translate:section">
                                    {{section.count}} / {{section.total}}
                                </ion-badge>
                            </div>
                            <ion-button (click)="deleteForSection($event, section)"
                                *ngIf="!section.calculatingSize && section.totalSize > 0" color="danger" fill="clear">
                                <ion-icon name="fas-trash" slot="icon-only"
                                    [attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate: { name: section.name }" />
                            </ion-button>
                        </div>
                    </ion-item>
                </ion-card-header>
                <ion-card-content id="core-course-storage-section-{{section.id}}">
                    <ng-container *ngIf="section.expanded">
                        <ng-container *ngFor="let module of section.modules">
                            <ion-item class="core-course-storage-activity"
                                *ngIf="downloadEnabled || (!module.calculatingSize && module.totalSize > 0)">
                                <core-mod-icon slot="start" *ngIf="module.handlerData.icon" [modicon]="module.handlerData.icon"
                                    [modname]="module.modname" [componentId]="module.instance" [fallbackTranslation]="module.modplural"
                                    [isBranded]="module.branded" />
                                <ion-label class="ion-text-wrap">
                                    <p class="item-heading {{module.handlerData!.class}} addon-storagemanager-module-size">
                                        <core-format-text [text]="module.handlerData.title" [courseId]="module.course" contextLevel="module"
                                            [contextInstanceId]="module.id" [adaptImg]="false" />
                                    </p>
                                    <ion-badge [color]="module.downloadStatus === statusDownloaded ? 'success' : 'light'"
                                        *ngIf="!module.calculatingSize && module.totalSize > 0">
                                        <ion-icon name="fam-cloud-done" *ngIf="module.downloadStatus === statusDownloaded"
                                            [attr.aria-label]="'core.downloaded' | translate" />{{ module.totalSize | coreBytesToSize }}
                                    </ion-badge>
                                    <ion-badge color="light" *ngIf="module.calculatingSize">
                                        {{ 'core.calculating' | translate }}
                                    </ion-badge>
                                </ion-label>

                                <div class="storage-buttons" slot="end">
                                    <core-download-refresh *ngIf="downloadEnabled && module.handlerData?.showDownloadButton &&
                                        module.downloadStatus !== statusDownloaded" [status]="module.downloadStatus" [enabled]="true"
                                        [canTrustDownload]="true" [loading]="module.spinner || module.handlerData.spinner"
                                        (action)="prefetchModule(module)" />
                                    <ion-button fill="clear" (click)="deleteForModule($event, module, section)"
                                        *ngIf="!module.calculatingSize && module.totalSize > 0" color="danger">
                                        <ion-icon name="fas-trash" slot="icon-only"
                                            [attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate: { name: module.name }" />
                                    </ion-button>
                                    <p *ngIf="!downloadEnabled || !module.handlerData?.showDownloadButton" class="sr-only">
                                        {{ 'core.notdownloadable' | translate }}
                                    </p>
                                </div>
                            </ion-item>
                        </ng-container>
                    </ng-container>
                </ion-card-content>
            </ion-card>
        </ng-container>
    </core-loading>
</ion-content>
