= form_with model: @offline, url: "/public/#{@contest.friendly_id}/offline/#{@offline.generate_token_for(:token)}" do |form|
  = form.hidden_field :completed
  h3 = t("offlines.form.start_message")
  h1 id="display-time" style="font-size: 80px;"
  javascript:
    const startTime = #{@offline.start_time.to_i};
    function updateTime() {
      const displayTimeEl = document.getElementById('display-time');
      const s = Math.floor((Date.now() - 1000 * startTime) / 1000);
      let ss = s % 60;
      let mm = Math.floor(s / 60) % 60;
      let hh = Math.floor(s / 3600);
      displayTimeEl.innerHTML = `${hh < 10 ? `0${hh}` : hh}:${mm < 10 ? `0${mm}` : mm}:${ss < 10 ? `0${ss}` : ss}`;
      setTimeout(updateTime, 1000);
    }
    setTimeout(updateTime, 5);
  .row.mt-5.mb-3
    .col
      .form-text.mb-1
        = t("offlines.form.end_image_select")
      = form.file_field :end_image, accept: "image/*", class: "form-control"
      .form-text.error-message style="display: none;" id="image-error-message"
        = t("puzzles.form.file_too_big")
      javascript:
        function setMaxUploadSize() {
          const el = document.querySelector('input[type="file"]');
          el.onchange = function() {
            if(this.files[0].size > 2 * 1024 * 1024) {
              document.getElementById('image-error-message').style.display = 'block';
              this.value = "";
            } else {
              document.getElementById('image-error-message').style.display = 'none';
            }
          };
        }

        setMaxUploadSize();
  .row.mt-4
    .col
      = form.submit t("helpers.buttons.end"), class: "btn btn-primary"