<div class="hero is-fullheight">
  <div class="hero-body">
    <div class="container">
      <div class="columns is-multiline">
        <div class="column is-6 is-offset-3">
          <div class="upload-box">
            <div class="upload-box-header">
              <div class="control-circles">
                <span class="circle is-green"></span>
                <span class="circle is-yellow"></span>
                <span class="circle is-red"></span>
              </div>
              <div class="header-title">
                <h2>ngx-uploader</h2>
              </div>
              <div class="gh-icon">
                <a target="_blank" href="https://github.com/bleenco/ngx-uploader">
                  <i class="ionicon ion-social-github"></i>
                </a>
              </div>
            </div>
            <div class="upload-box-content">
              <div
                class="drop-container"
                ngFileDrop
                [options]="options"
                (uploadOutput)="onUploadOutput($event)"
                [uploadInput]="uploadInput"
              >
                <p>
                  Drag files here or
                  <label class="upload-button">
                    <input
                      type="file"
                      ngFileSelect
                      [options]="options"
                      (uploadOutput)="onUploadOutput($event)"
                      [uploadInput]="uploadInput"
                      multiple
                    />
                    browse
                  </label>
                  to upload.
                </p>
              </div>
              <div class="upload-item" *ngFor="let f of files; let i = index">
                <div class="upload-item-content">
                  <div class="filename">
                    <div class="filename-left">
                      <i class="ionicon ion-ios-copy"></i>
                      <span>{{ f.name }}</span>
                    </div>
                    <div class="filename-right">
                      <i class="ionicon ion-close-round" (click)="cancelUpload(f.id)"></i>
                    </div>
                  </div>
                  <div class="progress-content">
                    <div class="progress">
                      <span
                        class="bar"
                        [style.width]="f?.progress?.data?.percentage + '%'"
                        [class.is-done]="f?.progress?.data?.percentage === 100"
                      ></span>
                    </div>
                  </div>
                  <div class="progress-text-content">
                    <span class="progress-text" [class.is-done]="f?.progress?.data?.percentage === 100">
                      <span>{{ f.progress.data?.percentage }}%</span>
                      <span *ngIf="f.progress?.data?.percentage !== 100">Uploading...</span>
                      <span *ngIf="f.progress?.data?.percentage === 100">Done</span>
                    </span>
                    <span
                      class="speed-and-eta-text"
                      *ngIf="f.progress?.data?.percentage !== 0 && f.progress?.data?.percentage !== 100"
                    >
                      <span>{{ f.progress.data?.speedHuman }}</span>
                      <span>ETA {{ f.progress.data?.etaHuman }}</span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="help-text">
              <span>
                Upload concurrency is intentionally set to single file. All files are immediately deleted after
                uploaded.
              </span>
              <span>
                <a href="https://github.com/bleenco">
                  <img src="/assets/images/bleenco-logo.svg" />
                </a>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>