<style>
  form.upload-form {
    background: #fdf9f3;
    background: var(--theme-container-accent-background, #fdf9f3);
    max-width: 590px;
    margin: 20px auto;
    padding: 40px 10px;
    border: 2px solid #4e57ef;
    box-shadow: 4px 5px 0px #4e57ef;
  }
</style>
<center style="margin-top:200px">
  <%= stylesheet_link_tag "s3_direct_upload", media: "all" %>
  <h1>🎥 Upload Video File 🙌</h1>
  <%= s3_uploader_form callback_url: "/videos",
                       callback_method: "POST",
                       callback_param: "article[video]",
                       key: "video-upload__#{SecureRandom.hex}",
                       key_starts_with: "video-upload__",
                       acl: "public-read",
                       max_file_size: (current_user.has_role?(:super_admin) ? 20_000 : 6000).megabytes,
                       id: "s3-uploader",
                       class: "upload-form",
                       data: { key: :val } do %>
    <%= file_field_tag :file, accept: "video/mp4,video/x-m4v,video/*" %>
    <script id="template-upload" type="text/x-tmpl">
    <div id="file-{%=o.unique_id%}" class="upload">
      {%=o.name%}
      <div class="progress"><div class="bar" style="width: 0%"></div></div>
      <br/><br/><br/>
    </div>
    </script>
  <% end %>
  <div style="margin:50px auto;max-width:80%;font-size:0.86em;">
    <p>
      <strong>Video is beta:</strong> Email <%= email_link %> if you have any problems.
    </p>
  </div>
</center>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<%= javascript_include_tag "s3_direct_upload" %>
<script>
  setTimeout(function () {
    $("#s3-uploader").S3Uploader({
      additional_data: {authenticity_token: "<%= form_authenticity_token %>"}
    })
  }, 1000)
</script>
