<div class="files-wrapper" *ngIf="!notAvailableOffline">
    <div class="new-uploads" style="margin: 20px;" *ngIf="!readonly">
        <form #uploadForm [action]="getApiSubmit()" enctype="multipart/form-data" method="post">
            <input style="margin-top: 10px;" type="file" id="file" name="uploaded_file" #fileUploader (change)="onFileChange($event)" multiple>
            <input type="hidden" name="redirectTo" [value]="getReturnUrl()">
            <ion-button (click)="onSubmitClick()" type="submit" fill="outline" class="ion-margin-start">Upload</ion-button>
        </form>
    </div>
    <div class="existing-uploads">
        <ion-grid>
            <ion-row>
                <ion-col *ngFor="let upload of fileRecords; let i = index" size-xl="4" size-lg="6" size-md="12">
                    <ion-card>
                        <ion-item>
                            <ion-label>{{ fileRecords[i].original_name }}</ion-label>
                            <ion-button (click)="downloadFile(fileRecords[i])" fill="outline" color="lighter" slot="end"><ion-icon color="primary" name="arrow-down"></ion-icon></ion-button>
                        </ion-item>
                    </ion-card>
                </ion-col>
            </ion-row>
        </ion-grid>
    </div>
</div>
<div class="files-wrapper not-available" *ngIf="notAvailableOffline">
    Sorry, this file group is not available offline yet.
</div>
