javascript:
  function refresh() {
    const el = document.querySelector('input[type="checkbox"]');
    if (el.checked) location.replace("/public/#{@contest.friendly_id}?refresh=1")
    setTimeout(refresh, 5000);
  }

  / const params = new URL(document.location.toString()).searchParams;
  / if (params.get("refresh") == "1") {
  /   const el = document.querySelector('input[type="checkbox"]');
  /   el.checked = true;
  / }

  / setTimeout(refresh, 5000);

css:
  @media (max-width: 800px) {
    a.btn { display: none; }
    .col-5 { display: none; }
    .col-6 { width: 100% !important; display: block !important; }
    .small-screen-image { display: block !important; }
    .container { margin-top: 2rem !important; }
  }

- if @contest.puzzles.size <= 1
  .row.small-screen-image style="display: none"
    - @contest.puzzles.each do |puzzle|
      .d-flex.flex-column.justify-content-center.mb-5
        = image_tag(puzzle.image, style: "max-height: 200px; object-fit: contain") if puzzle.image.attached?
        .mt-2.fs-6 style="text-align: center"
          => "#{puzzle.name} -"
          = "#{puzzle.brand} #{puzzle.pieces}p"
  .row
    .col-6.d-flex.flex-column style="height: calc(100vh - 180px)"
      .d-flex.flex-column style="overflow-y: auto"
        table.table.table-striped.table-hover
          thead
            tr
              th
                = t("helpers.rank")
              th
                = t("activerecord.attributes.contestant.name")
              - if @contest.puzzles.size > 1
                th
                  = t("activerecord.attributes.contestant.completions")
              th style="width: 170px"
                = t("activerecord.attributes.contestant.display_time")
          tbody
            - @contestants.each_with_index do |contestant, index|
              tr scope="row"
                td
                  = index + 1
                td
                  = contestant.name
                - if @contest.puzzles.size > 1
                  td
                    = contestant.completions.length
                td style="position: relative"
                  - if index > 0 && contestant.time_seconds > 0
                    .relative-time style="position:absolute; margin: 1px 0 0 64px; font-size: 14px; color: grey"
                      |> +
                      = display_time(contestant.time_seconds - @contestants[index - 1].time_seconds)
                  = contestant.display_time
    .col-1
    .col-5
      - @contest.puzzles.each do |puzzle|
        = image_tag(puzzle.image, class: "img-fluid ms-3 me-3") if puzzle.image.attached?
        .mt-3.fs-4 style="margin-left: 15px"
          = puzzle.name
        .fs-6 style="margin-left: 15px"
          b
            = "#{puzzle.brand} - #{puzzle.pieces}p"

- else
  .d-flex.flex-column style="height: calc(100vh - 180px)"
    .d-flex.flex-row.justify-content-center.mb-5
      - @contest.puzzles.each do |puzzle|
        = image_tag(puzzle.image, class: "img-fluid ms-3 me-3", style: "max-height: 220px") if puzzle.image.attached?

    .d-flex.flex-column style="overflow-y: auto"
      table.table.table-striped.table-hover
        thead
          tr
            th scope="col"
              = t("helpers.rank")
            th scope="col"
              = t("activerecord.attributes.contestant.name")
            - if @contest.puzzles.size > 1
              th scope="col"
                = t("activerecord.attributes.contestant.completions")
            th scope="col"
              = t("activerecord.attributes.contestant.display_time")
        tbody
          - @contestants.each_with_index do |contestant, index|
            tr scope="row"
              td
                = index + 1
              td
                = contestant.name
              - if @contest.puzzles.size > 1
                td
                  = contestant.completions.length
              td
                = contestant.display_time