div.columns(v-cloak="")
  div.column.is-12
    messages(v-bind:messages="messages")

    div.card
      header.card-header
        p.card-header-title File Uploader

      div.card-content
        h2.subtitle Upload a file to annotate text.

        div.control(style="margin-bottom: 1em;")
          block select-format-area

        block example-format-area

        div.field.is-grouped(style="margin-top: 1em;")

          div.control
            div.file.has-name.is-primary
              label.file-label
                input.file-input(
                  v-on:change="upload()"
                  type="file"
                  ref="file"
                  name="file"
                  required
                )
                span.file-cta.button(v-bind:class="{'is-loading': isLoading}")
                  span.file-icon
                    i.fas.fa-upload
                  span.file-label Select a file…
                span.file-name {{ file.name }}

          div.control(v-if="canUploadFromCloud")
            button.button(
              v-on:click="isCloudUploadActive = !isCloudUploadActive"
              v-bind:class="{'is-loading': isLoading}"
            )
              span.file-icon
                i.fa.fa-cloud-upload-alt
              span Browse cloud…

        div(v-if="isCloudUploadActive")
          iframe(
            ref="cloudUploadPane"
            v-bind:src="cloudUploadUrl"
            v-on:load="cloudUpload"
            style="width: 100%; height: 20em;"
          )