doctype html
html
  = render "layouts/header"

  body
    .container.mt-5
      - if @current_user
        .float-end style="margin-top: -5px;"
          nav.navbar.bg-body-primary
            - if @current_user.admin
              a.navbar-brand href=users_path class="btn btn-light" style="margin-right: 0"
                = t("nav.users")
            a.navbar-brand href=contests_path class="btn btn-light" style="margin-right: 0"
                = t("nav.home")
            a.navbar-brand href=user_path(@current_user) class="btn btn-light"
                = t("nav.settings")
            = button_to t("nav.log_out"), session_path, method: :delete, class: "btn btn-danger"

      css:
        .toast {
          opacity: 0;
          animation: fadeInAndOut 6s linear;
        }
        @keyframes fadeInAndOut {
          0%, 5%, 100% { opacity: 0 }
          7%, 85% { opacity: 1 }
        }
      javascript:
        function closeToast(event) {
          event.target.parentElement.parentElement.style.display = 'none';
        }

      .toast-container.position-fixed.p-3 style="right: 30px; top: 85px"
        - flash.each do |type, msg|
          .toast role="alert" aria-live="assertive" aria-atomic="true" style="display: block"
            .toast-header
              strong.me-auto
                i.bi-bell-fill.fs-6.text-primary
                =< type.humanize
              small.text-body-secondary
                | Just now
              button.btn-close type="button" data-bs-dismiss="toast" aria-label="Close" onclick="closeToast(event)"
            .toast-body
              = msg

      h1.mb-4
        - if @contest && @contest.id.present?
          - if active_page("/public") == "active" && @action_path
            = @contest.name
            .float-end style="margin-top: -5px;" id="scoreboard-switches"
              .d-inline-flex.align-items-center
                .ms-4.form-check.form-switch style="font-size: 16px; font-weight: 300;"
                  input.form-check-input type="checkbox" id="refresh-checkbox"
                label.ms-1 style="font-size: 16px; font-weight: 300;"
                  = t("contests.scoreboard.auto_refresh")
              .js data-turbo="false"
                javascript:
                  function refresh() {
                    if (document.getElementById('refresh-checkbox').checked) {
                      addParam('autorefresh', 1);
                      setTimeout(refresh, 30000);
                    }
                  }
                  function addParam(key, value) {
                    const urlParams = new URLSearchParams(window.location.search);
                    urlParams.delete(key);
                    urlParams.append(key, value);
                    const refreshBtn = document.getElementById('refresh-button')
                    refreshBtn.href = `/public/#{@contest.friendly_id}?${urlParams.toString()}`;
                    refreshBtn.click();
                  }
                  function removeParam(key) {
                    const urlParams = new URLSearchParams(window.location.search);
                    urlParams.delete(key);
                    const refreshBtn = document.getElementById('refresh-button')
                    refreshBtn.href = `/public/#{@contest.friendly_id}?${urlParams.toString()}`;
                    refreshBtn.click();
                  }
                  function autoRefresh() {
                    if (document.getElementById('refresh-checkbox').checked) setTimeout(refresh, 30000);
                    document.getElementById('refresh-checkbox').addEventListener('change', (e) => {
                      if (e.target.checked) refresh();
                      else removeParam('autorefresh');
                    });
                  }
                  async function startAutoRefresh(count) {
                    if (count == 0) return;
                    if (document.getElementById('refresh-button') && document.getElementById('refresh-checkbox')) autoRefresh();
                    else setTimeout(() => startAutoRefresh(count - 1), 10);
                  }
                  startAutoRefresh(200);
          - elsif active_page("/contests") == "active"
            = @contest.name
            - if @contest.public
              a.ms-4.btn.btn-success href="/public/#{@contest.slug}" style="margin-top: -6px;"
                = t("contests.show.open_public_scoreboard")
            - else
              a.ms-4.btn.btn-success.disabled style="margin-top: -6px;"
                = t("contests.show.public_scoreboard_disabled")
          - else
            = @contest.name
        - else
          = @title

      - if @contest && active_page("/contests") == "active" && !@nonav
        = render "contest_nav"

      = yield