doctype html
html
  = render "layouts/header"

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

      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: 100px"
        - 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
        = @title
        - if @action_path
          a.ms-4.btn.btn-primary href=@action_path style="margin-top: -4px"
            = @action_name

      = yield