{{define "content"}}
  <div style="text-align: center;">
    <label class="import-container" onclick="labelClicked(event)">
      <div class="import-wrapper">
        <form id="import-form" class="import-form" enctype="multipart/form-data" method="POST" action="/import">
          <input id="import-input" type="text" name="url" placeholder="Enter a valid URL or ID" required onchange="urlSelected()" />
          <div class="import-details">
            <span id="import-message" class="import-message">No URL entered</span>
            <div id="import-button-wrapper" class="import-button-wrapper">
              <button id="import-button" class="import-button" onclick="startImporting()" type="button">
                <span id="import-stopped">Import</span>
                <span id="import-started" class="loader" style="display: none;"></span>
              </button>
            </div>
            <div id="import-progress-container" class="import-progress-container">
              <div id="import-progress" class="import-progress">
                <span id="import-progress-label" class="import-progress-label"></span>
              </div>
              <div style="flex-grow: 1;"></div>
            </div>
          </div>
        </form>
      </div>
    </label>
    <p>ID is of the form provider:video_id</p>
    <p>Examples:<br />youtube:Hks6Nq7g6P4<br />vimeo:374624356</p>
  </div>
{{end}}
{{define "scripts"}}
  <script type="application/javascript" src="/static/import.js"></script>
{{end}}