<ion-header>
    <ion-toolbar>
        <ion-title>
            <h1>{{ 'addon.mod_workshop.userplan' | translate }}</h1>
        </ion-title>
        <ion-buttons slot="end">
            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                <ion-icon name="fas-xmark" slot="icon-only" aria-hidden=true></ion-icon>
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content>
    <ion-list>
        <ng-container *ngFor="let phase of phases">
            <ion-item-divider [attr.aria-current]="workshopPhase == phase.code ? 'page' : 'false'">
                <ion-label>
                    <h2>{{ phase.title }}</h2>
                    <p class="ion-text-wrap" *ngIf="workshopPhase == phase.code">
                        {{ 'addon.mod_workshop.userplancurrentphase' | translate }}
                    </p>
                </ion-label>
            </ion-item-divider>
            <ion-item class="ion-text-wrap" *ngIf="phase.switchUrl" [href]="phase.switchUrl" detail="false">
                <ion-icon slot="start" name="fas-right-left" aria-hidden="true"></ion-icon>
                <ion-label>
                    <p>{{ 'addon.mod_workshop.switchphase' + phase.code | translate }}</p>
                </ion-label>
                <ion-icon slot="end" name="fas-up-right-from-square" aria-hidden="true"></ion-icon>
            </ion-item>
            <ion-item class="ion-text-wrap" *ngFor="let task of phase.tasks"
                [class.item-dimmed]="phase.code != workshopPhase || (task.code == 'submit' && !showSubmit)" (click)="runTask(task)"
                detail="false" button>
                <ion-icon slot="start" name="far-circle" *ngIf="task.completed == null"
                    [attr.aria-label]="'addon.mod_workshop.tasktodo' | translate"></ion-icon>
                <ion-icon slot="start" name="fas-circle-xmark" color="danger" *ngIf="task.completed == ''"
                    [attr.aria-label]="'addon.mod_workshop.taskfail' | translate"></ion-icon>
                <ion-icon slot="start" name="fas-circle-info" color="info" *ngIf="task.completed == 'info'"
                    [attr.aria-label]="'addon.mod_workshop.taskinfo' | translate"></ion-icon>
                <ion-icon slot="start" name="fas-circle-check" color="success" *ngIf="task.completed == '1'"
                    [attr.aria-label]="'addon.mod_workshop.taskdone' | translate"></ion-icon>
                <ion-label>
                    <p class="item-heading ion-text-wrap">{{task.title}}</p>
                    <p *ngIf="task.details" [innerHTML]="task.details"></p>
                </ion-label>
                <ion-icon slot="end" *ngIf="task.link && task.code != 'submit'" name="fas-up-right-from-square" aria-hidden="true">
                </ion-icon>
            </ion-item>
        </ng-container>
    </ion-list>
</ion-content>
