= form_with model: puzzle, url: url, method: method do |form|
  .row.mb-3
    .col.alert.alert-warning
      = t("puzzles.form.fake_data_recommendation")
  .row.mb-3
    .col
      = image_tag(puzzle.image, class: "img-fluid", style: "max-height: 256px") if puzzle.image.attached?
  .row.mb-3
    .col
      .form-floating
        = form.text_field :name, autocomplete: "off", class: "form-control"
        = form.label :name, class: "required"
  .row.mb-3
    .col
      .form-floating
        = form.text_field :brand, autocomplete: "off", class: "form-control"
        = form.label :brand, class: "required"
  .row.mb-3
    .col
      .form-floating
        = form.number_field :pieces, autocomplete: "off", class: "form-control"
        = form.label :pieces, class: "required"
  .row.mb-3
    .col
      .form-text.mb-1
        = t("puzzles.image_select")
      = form.file_field :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
      - if method == :patch
        = link_to t("helpers.buttons.delete"), contest_puzzle_path(contest, puzzle), data: { turbo_method: :delete }, class: "btn btn-danger me-2"
      = form.submit submit_text, class: "btn btn-primary"