= form_with model: @offline, url: "/public/#{@contest.friendly_id}/offline/#{@offline.generate_token_for(:token)}" do |form|
  h3 = t("offlines.form.start_message", name: @offline.name)
  h1 id="display-time" style="font-size: 80px;"
  javascript:
    startTime = #{@offline.start_time.to_i};
    function updateTime() {
      const displayTimeEl = document.getElementById('display-time');
      if (displayTimeEl) {
        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);
      } else {
        setTimeout(updateTime, 20);
      }
    }
    setTimeout(updateTime, 1);
  .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", capture: "user"
      .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 > 5.3 * 1024 * 1024) {
              document.getElementById('image-error-message').style.display = 'block';
              this.value = "";
            } else {
              document.getElementById('image-error-message').style.display = 'none';
            }
          };
        }

        setMaxUploadSize();
  .row.mb-3
    .col
      .form-check.form-switch
        = form.check_box :completed, class: "form-check-input"
        = form.label :completed
      javascript:
        completedEl = document.getElementById('offline_completed');
        completedEl.addEventListener('change', (e) => {
          missingPiecesEl = document.getElementById('missing_pieces');
          remainingPiecesEl = document.getElementById('remaining_pieces');
          if (e.target.checked) {
            missingPiecesEl.style.display = 'block';
            remainingPiecesEl.style.display = 'none';
          } else {
            missingPiecesEl.style.display = 'none';
            remainingPiecesEl.style.display = 'block';
          }
        })
  .row.mb-3 id="missing_pieces" style="display: none;"
    .col
      .form-floating
        = form.text_field :missing_pieces, autocomplete: "off", class: "form-control"
        = form.label :missing_pieces
      .form-text
        = t("offlines.form.missing_pieces")
  .row.mb-3 id="remaining_pieces"
    .col
      .form-floating
        = form.text_field :remaining_pieces, autocomplete: "off", class: "form-control"
        = form.label :remaining_pieces
      .form-text
        = t("offlines.form.remaining_pieces")
  javascript:
    completedEl = document.getElementById('offline_completed');
    missingPiecesEl = document.getElementById('missing_pieces');
    remainingPiecesEl = document.getElementById('remaining_pieces');
    if (completedEl.checked) {
      missingPiecesEl.style.display = 'block';
      remainingPiecesEl.style.display = 'none';
    } else {
      missingPiecesEl.style.display = 'none';
      remainingPiecesEl.style.display = 'block';
    }
  .row.mt-4
    .col
      = form.submit t("helpers.buttons.end"), class: "btn btn-primary"