<html>
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<title>Upload Form</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</head>
<body>
    <section class="container">
        <div class="hero is-info welcome is-small">
            <div class="hero-body">
                <div class="container">
                    <h1 class="title">
                        Cloudbank Otter Grading - Beta
                    </h1>
                    <h2 class="subtitle">
                        Upload your notebooks, grade them, and download results.
                    </h2>
                </div>
            </div>
        </div>
        <br/>
        <div class="columns is-multiline">
            <div class="column is-10 is-offset-1 register">
                <div class="columns">
                    <div class="column left">
                        <p class="title is-3">Grade</p>
                        <p class="subtitle colored is-4">Upload autograder.zip and notebooks</p>
                        <form enctype="multipart/form-data" action="/upload" method="post">
                            {% module xsrf_form_html() %}
                            <div class="file is-small is-dark has-name">
                                <label class="file-label">
                                  <input class="file-input" type="file" name="autograder">
                                  <span class="file-cta">
                                    <span class="file-icon">
                                      <i class="fas fa-upload"></i>
                                    </span>
                                    <span class="file-label">
                                      Autograder Zip File
                                    </span>
                                  </span>
                                  <span class="file-name">
                                    Choose File ...
                                  </span>
                                </label>
                              </div>
                              <br/>
                              <div class="file is-small is-dark has-name">
                                <label class="file-label">
                                  <input class="file-input" type="file" name="notebooks" value="">
                                  <span class="file-cta">
                                    <span class="file-icon">
                                      <i class="fas fa-upload"></i>
                                    </span>
                                    <span class="file-label">
                                        Notebook(s) (ipynb or zip)
                                    </span>
                                  </span>
                                  <span class="file-name">
                                    Choose File ...
                                  </span>
                                </label>
                              </div>
                              <br/>
                            <button class="button is-block is-info is-fullwidth is-medium">Grade Notebooks</button>
                            {% if 'message' in globals().keys() and message is not None %}
                            <small><em>{{ message }}</em></small>
                            {% end %}
                        </form>
                    </div>
                    <div class="column right">
                        <p class="title is-3">Results</p>
                        <p class="subtitle colored is-4">Check Status and Download</p>
                        <form enctype="multipart/form-data" action="/download" method="post">
                            {% module xsrf_form_html() %}
                            <div class="field">
                                <div class="control">
                                  <input class="input is-medium" type="text" name="download" value="{{ dcode if 'dcode' in globals().keys() else '' }}" placeholder="Download Code">
                                </div>
                              </div>
                            <button class="button is-block is-info is-fullwidth is-medium">Download/Check Status</button>
                            {% if 'download_message' in globals().keys() and download_message is not None %}
                            <small><em>{{ download_message }}</em></small>
                            {% end %}
                        </form>
                    </div>
                    </div>
            </div>
        </div>
        <div class="hero is-info welcome is-small">
          <div class="hero-body">
              <div class="container">
                  <h2 class="subtitle">
                      Questions? Problems? email: sean.smorris at berkeley.edu
                  </h2>
              </div>
          </div>
      </div>
    </section>
</body>
<script>
    // Got from this gist:https://gist.github.com/micti/bca582bc4054ca7b034faea56930221c
    document.addEventListener('DOMContentLoaded', () => {
  // 1. Display file name when select file
  let fileInputs = document.querySelectorAll('.file.has-name')
  for (let fileInput of fileInputs) {
    let input = fileInput.querySelector('.file-input')
    let name = fileInput.querySelector('.file-name')
    input.addEventListener('change', () => {
      let files = input.files
      if (files.length === 0) {
        name.innerText = 'No file selected'
      } else {
        name.innerText = files[0].name
      }
    })
  }

  // 2. Remove file name when form reset
  let forms = document.getElementsByTagName('form')
  for (let form of forms) {
    form.addEventListener('reset', () => {
      console.log('a')
      let names = form.querySelectorAll('.file-name')
      for (let name of names) {
        name.innerText = 'No file selected'
      }
    })
  }
})
</script>
</html>
