views/popups.pug

#load-save.modal.fade.gl_keep(tabindex="-1" role="dialog")
  .modal-dialog.modal-lg
    .modal-content
      .modal-header
        h5.modal-title Load and save editor text
        button.close(type="button" data-dismiss="modal" aria-hidden="true" aria-label="Close")
          span(aria-hidden="true")
            | ×
      .modal-body
        .card
          .card-header
            ul.nav.nav-tabs.card-header-tabs(role="tablist")
              li.nav-item(role="presentation"): a.nav-link.active(href="#load-examples" role="tab" data-toggle="tab") Examples
              li.nav-item(role="presentation"): a.nav-link(href="#load-browser-local" role="tab" data-toggle="tab") Browser-local storage
              li.nav-item(role="presentation"): a.nav-link(href="#load-file-system" role="tab" data-toggle="tab") File system
          .card-body.tab-content
            #load-examples.tab-pane.active(role="tabpanel")
              h4.card-title Load from examples:
              ul.examples.small-v-scrollable
                li.template: a(href="javascript:;")
            #load-browser-local.tab-pane(role="tabpanel")
              h4.card-title Load from browser-local storage:
              ul.local-storage.small-v-scrollable
                li.template: a(href="javascript:;")
              .form-group
                input.save-name(type="text" size="20")
                button.btn.btn-light.save-button(type="button") Save to browser-local storage
            #load-file-system.tab-pane(role="tabpanel")
              h4.card-title Load/save to your system
              label.btn.btn-outline-secondary.btn-file(role="button") Load from a local file
                input.local-file(type="file")
              label.btn.btn-outline-secondary.btn-file.save-btn(role="button") Save to file
                input.save-file(type="button")
      .modal-footer
        button.btn.btn-light(type="button" data-dismiss="modal" aria-label="Close") Close

#alert.modal.fade.gl_keep(tabindex="-1" role="dialog")
  .modal-dialog.modal-lg
    .modal-content
      .modal-header
        h5.modal-title Something alert worthy
        button.close(type="button" data-dismiss="modal" aria-hidden="true" aria-label="Close")
          span(aria-hidden="true")
            | ×
      .modal-body
      .modal-footer
        button.btn.btn-light(type="button" data-dismiss="modal") Close

#yes-no.modal.fade.gl_keep(tabindex="-1" role="dialog")
  .modal-dialog.modal-lg
    .modal-content
      .modal-header
        h5.modal-title Well, do you or not?
        button.close(type="button" data-dismiss="modal" aria-hidden="true" aria-label="Close")
          span(aria-hidden="true")
            | ×
      .modal-body
      .modal-footer
        button.btn.btn-light.no(type="button" data-dismiss="modal") No
        button.btn.btn-light.yes(type="button" data-dismiss="modal") Yes

#settings.modal.fade.gl_keep(tabindex="-1" role="dialog")
  .modal-dialog.modal-lg
    .modal-content
      .modal-header
        h5.modal-title Compiler Explorer Settings
        button.close(type="button" data-dismiss="modal" aria-hidden="true" aria-label="Close")
          span(aria-hidden="true")
            | ×
      .modal-body
        .card
          .card-header
            | These settings control how Compiler Explorer acts for you. They are not
            | preserved as part of shared URLs, and are persisted locally using browser
            | local storage.
          .card-body
            .card-title
              h4 Site behaviour
            .form-group(role="group")
              label
                | Default language 
                small
                  span.fas.fa-info-circle(title="New editors only (Reset UI to clear yours)" aria-label="New editors only (Reset UI to clear yours)")
                select.defaultLanguage
              div
                label
                  | Theme 
                  select.theme
              .checkbox
                label
                  input.newEditorLastLang(type="checkbox")
                  | Use last selected language when opening new Editors
              .checkbox
                label
                  input.enableCommunityAds(type="checkbox")
                  | Show community events
        .card
          .card-body
            .card-title
              h4 Editor
            .form-group(role="group")
              .checkbox
                label
                  input.autoCloseBrackets(type="checkbox")
                  | Automatically insert matching brackets and parentheses
              .checkbox
                label
                  input.hoverShowSource(type="checkbox")
                  | Highlight linked code lines on hover
              .checkbox
                label
                  input.hoverShowAsmDoc(type="checkbox")
                  | Show asm description on hover
              .checkbox
                label
                  input.showQuickSuggestions(type="checkbox")
                  | Show quick suggestions
              .checkbox
                label
                  input.useCustomContextMenu(type="checkbox")
                  | Use custom context menu
              .checkbox
                label
                  input.showMinimap(type="checkbox")
                  | Show editor minimap
              div
                label
                  |  Tab width 
                  select.tabWidth
              div
                label
                  | Format based on 
                  select.formatBase
        .card
          .card-body
            .card-title
              h4 Compilation
            .form-group(role="group")
              div
                .checkbox
                  label
                    input.compileOnChange(type="checkbox")
                    | Compile automatically when source changes
                div Delay before compiling: 
                  b 0.25s 
                  .slider.slider-horizontal.delay
                  b  3s
              .checkbox
                label
                  input.colourise(type="checkbox")
                  | Colourise lines to show how the source maps to the output
              label
                | Colour scheme 
                select.colourScheme
      .modal-footer
        button.btn.btn-light(type="button" data-dismiss="modal") Close

#notifications