- if @public && @puzzles.length == @contestant.completions.length
  h4
    = t("completions.form.validate_name", name: @contestant.name)
  .mt-3.alert.alert-warning
    = t("completions.form.all_finished", name: @contestant.name)
- else
  = form_with model: completion, url: url, method: method do |form|
    - if @message
      = form.hidden_field :message_id, value: @message.id
      .row.mb-3
        .col
          h4 = t("messages.singular").capitalize
          .alert.alert-secondary
            b
              = @message.author
            br
            = @message.text
    .row.mb-2
      .col
        h4
          - if @public
            = t("completions.form.validate_name", name: @contestant.name)
          - else
            = t("completions.singular").capitalize
    - if @contestants.present?
      .row.mb-3
        .col
          .form-floating
            = form.select :contestant_id, @contestants.map { |contestant| [contestant.form_name, contestant.id] }, {}, class: "form-select"
            = form.label :contestant_id
    - if @closest_contestant
      javascript:
        el = document.querySelector('select[name="completion[contestant_id]"]');
        el.value = "#{@closest_contestant.id}"
    - if @puzzles.size > 1
      .row.mb-3
        .col
          .form-floating
            = form.select :puzzle_id, @puzzles.map { |puzzle| ["#{puzzle.name} - #{puzzle.brand}", puzzle.id] }, {}, class: "form-select"
            = form.label :puzzle_id
    - elsif @puzzles.size == 1
      = form.hidden_field :puzzle_id, value: @puzzles.first.id
    - else
      = form.hidden_field :puzzle_id
    .row.mb-3
      .col
        .form-check.form-switch
          = form.check_box :completed, class: "form-check-input"
          = form.label :completed
        javascript:
          savetime = "";
          ispatch = #{method == :patch};
          completedEl = document.getElementById('completion_completed');
          completedEl.addEventListener('change', (e) => {
            const timeEl = document.getElementById('time');
            const missingPiecesEl = document.getElementById('missing_pieces');
            const remainingPiecesEl = document.getElementById('remaining_pieces');
            const refreshEl = document.getElementById('refresh');
            if (e.target.checked) {
              if (ispatch) timeEl.value = '#{@completion.display_time_from_start}';
              else timeEl.value = savetime;
              missingPiecesEl.style.display = 'block';
              remainingPiecesEl.style.display = 'none';
              if (refreshEl) refreshEl.style.display = '';
            } else {
              savetime = timeEl.value;
              timeEl.value = '#{display_time(@contest.duration_seconds)}';
              missingPiecesEl.style.display = 'none';
              remainingPiecesEl.style.display = 'block';
              if (refreshEl) refreshEl.style.display = 'none';
            }
          })
    .row.mb-3
      .col
        .form-floating
          = form.text_field :display_time_from_start, autocomplete: "off", class: "form-control", id: "time"
          = form.label :display_time_from_start, class: "required"
      - unless method == :patch
        .col.mt-2
          a.btn.btn-primary id="refresh"
            = t("helpers.buttons.refresh")
      .form-text
        = t("activerecord.attributes.completion.display_time_from_start_description")
      - if @contest.start_time.present? && method != :patch
        javascript:
          startTime = #{@contest.start_time.present? ? @contest.start_time.to_i : "null"};
          pauseTime = #{@contest.pause_time.present? ? @contest.pause_time.to_i : "null"};
          function updateTime() {
            const timeEl = document.getElementById('time');
            if (timeEl) {
              if (startTime) {
                let s = Math.floor((Date.now() - 1000 * startTime) / 1000);
                if (pauseTime) s = Math.floor(pauseTime - startTime);
                let ss = s % 60;
                let mm = Math.floor(s / 60) % 60;
                let hh = Math.floor(s / 3600);
                timeEl.value = `${hh}:${mm < 10 ? `0${mm}` : mm}:${ss < 10 ? `0${ss}` : ss}`;
              }
            }
          }
          refreshButton = document.getElementById("refresh");
          refreshButton?.addEventListener('click', updateTime);
          updateTime();
    .row.mb-3 id="missing_pieces"
      .col
        .form-floating
          = form.text_field :missing_pieces, autocomplete: "off", class: "form-control"
          = form.label :missing_pieces
    .row.mb-3 id="remaining_pieces" style="display: none;"
      .col
        .form-floating
          = form.text_field :remaining_pieces, autocomplete: "off", class: "form-control"
          = form.label :remaining_pieces
    javascript:
      completedEl = document.getElementById('completion_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';
      }
    - if @public
      .row.mb-3
        .col
          .form-floating
            = form.text_field :code, autocomplete: "off", class: "form-control"
            = form.label :code
              = t("completions.form.code")
    .row
      .col
        = form.submit submit_text, class: "btn btn-primary"