{{define "content"}}
  <div style="text-align: center;">
    <label class="upload-container" onclick="labelClicked(event)">
      <div class="upload-wrapper">
        <form id="upload-form" class="upload-form" enctype="multipart/form-data" method="POST" action="/upload">
          <input id="video-input" type="file" accept="video/*" onchange="fileSelected()" style="display: none;"/>
          <div class="upload-box">
            <img width="100" src="/static/upload-icon.png"/>
            <span>Click to browse or drop file here</span>
          </div>
          <div class="upload-details">
            <div id="upload-file" class="upload-file">
              <span id="upload-filename"></span>
              <img width="20" src="/static/close-icon.png" onclick="removeFile(event)"/>
            </div>
            <span id="upload-message" class="upload-message">No file selected</span>
            <div id="upload-button-wrapper" class="upload-button-wrapper">
              <button id="upload-button" class="upload-button" onclick="startUploading()" type="button">
                <span id="upload-stopped">Upload</span>
                <span id="upload-started" class="loader" style="display: none;"></span>
              </button>
            </div>
            <div id="upload-progress-container" class="upload-progress-container">
              <div id="upload-progress" class="upload-progress">
                <span id="upload-progress-label" class="upload-progress-label"></span>
              </div>
              <div style="flex-grow: 1;"></div>
            </div>
          </div>
        </form>
      </div>
    </label>
    <p>Need to import a video from another source? Click <a href="/import">Import</a></p>
  </div>
{{end}}
{{define "scripts"}}
  <script type="application/javascript" src="/static/upload.js"></script>
{{end}}