compiler-explorer/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-browser-local-history" role="tab" data-toggle="tab") Browser-local history
              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:;")
              .input-group
                input.save-name(type="text" size="20" placeholder="Set name of state")
                .input-group-append
                  button.btn.btn-light.save-button(type="button") Save to browser-local storage
            #load-browser-local-history.tab-pane(role="tabpanel")
              h4.card-title Load from browser-local history:
              ul.local-history.small-v-scrollable
                li.template: a(href="javascript:;")
            #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-outline-primary(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-outline-primary(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-link.no(type="button" data-dismiss="modal") No
        button.btn.btn-link.yes(type="button" data-dismiss="modal") Yes

#enter-something.modal.fade.gl_keep(tabindex="-1" role="dialog")
  .modal-dialog.modal-lg
    .modal-content
      .modal-header
        h5.modal-title Enter something here
        button.close(type="button" data-dismiss="modal" aria-hidden="true" aria-label="Close")
          span(aria-hidden="true")
            | ×
      .modal-body
        .question
        input.question-answer
      .modal-footer
        button.btn.btn-light.no(type="button" data-dismiss="modal") Cancel
        button.btn.btn-light.yes(type="button" data-dismiss="modal") Ok

#settings.modal.fade.gl_keep(tabindex="-1" role="dialog")
  .modal-dialog.modal-lg(role="document")
    .modal-content
      .modal-header
        h5.modal-title
          | Compiler Explorer Settings
        button.close(type="button" data-dismiss="modal" aria-label="Close")
          span(aria-hidden="true") ×
      .modal-body
        .card.mb-1
          .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
          .card-header
            .card-title
              h4 Site behaviour
          .card-body
            .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
              .checkbox
                input.allowStoreCodeDebug(type="checkbox")
                label Allow my source code to be temporarily stored for diagnostic purposes in the event of an error
              div
                label
                  | Theme
                select.theme
              .checkbox
                input.newEditorLastLang(type="checkbox")
                label Use last selected language when opening new Editors
              .checkbox
                input.enableCommunityAds(type="checkbox")
                label Show community events
        .card
          .card-header
            .card-title
              h4 Keybindings
          .card-body
            .form-group(role="group")
              .checkbox
                input.useVim(type="checkbox")
                label Vim editor mode
              .checkbox.the-save-option-to-auto-share
                input.enableCtrlS(type="checkbox")
                label
                  | Make
                  kbd Ctrl
                  | +
                  kbd S
                  |  save to local file instead of creating a share link
              .checkbox.the-save-option-to-tree-save
                input.enableCtrlStree(type="checkbox")
                label
                  | Make
                  kbd Ctrl
                  | +
                  kbd S
                  |  include and save the file to a Tree if that's added to the UI
        .card
          .card-header
            .card-title
              h4 Editor
          .card-body
            .form-group(role="group")
              div
                label
                  | Desired Font Family in editors
                input.editorsFFont(type="text" style="width:100%")
              .checkbox
                input.editorsFLigatures(type="checkbox")
                label Enable font ligatures
              .checkbox
                input.autoCloseBrackets(type="checkbox")
                label Automatically insert matching brackets and parentheses
              .checkbox
                input.autoIndent(type="checkbox")
                label Automatically indent code (reload page after changing)
              .checkbox
                input.hoverShowSource(type="checkbox")
                label Highlight linked code lines on hover
              .checkbox
                input.hoverShowAsmDoc(type="checkbox")
                label Show asm description on hover
              .checkbox
                input.showQuickSuggestions(type="checkbox")
                label Show quick suggestions
              .checkbox
                input.useCustomContextMenu(type="checkbox")
                label Use custom context menu
              .checkbox
                input.showMinimap(type="checkbox")
                label Show editor minimap
              .checkbox
                input.keepSourcesOnLangChange(type="checkbox")
                label Keep editor source on language change
              .checkbox
                input.useSpaces(type="checkbox")
                label Use spaces for indentation
              div
                label Tab width
                input.tabWidth(type="numeric")
              div
                label Format based on
                select.formatBase
              .checkbox
                input.wordWrap(type="checkbox")
                label Enable Word Wrapping
        .card
          .card-header
            .card-title
              h4 Compilation
          .card-body
            .form-group(role="group")
              div
                .checkbox
                  input.compileOnChange(type="checkbox")
                  label Compile automatically when source changes
                div
                  label Delay before compiling
                  .slider-input
                    b 0.25s 
                    .slider.slider-horizontal.delay
                    b  3s
              .checkbox
                input.colourise(type="checkbox")
                label Colourise lines to show how the source maps to the output
              label
                | Colour scheme 
                select.colourScheme
      .modal-footer
        button.btn.btn-outline-primary(type="button" data-dismiss="modal") Close

#simplecook.gl_keep(tabindex="-1" role="dialog" style="display:none")
  .message
    .btn-group.btn-group-sm
      button.btn.btn-light.btn-sm.cookies(title="Read cookie policy" aria-label="Read new cookie policy")
        span.fas.fa-info-circle
        |  Read the new cookie policy
      p.new-cookie-msg Compiler Explorer uses cookies and other related techs to serve you
    .btn-group.btn-group-sm(role="group" aria-label="Consent options" style="float:right")
      button.btn.btn-secondary.btn-sm.cook-dont-consent(title="Do not consent cookie policy" aria-label="Oppose cookie policy")
        span.fas.fa-thumbs-down
        |  Don't consent
      button.btn.btn-primary.btn-sm.cook-do-consent(title="Consent cookie policy" aria-label="Consent cookie policy")
        span.fas.fa-thumbs-up
        |  Consent

#notifications

#sharelinkdialog.modal.fade.gl_keep(tabindex="-1" role="dialog")
  .modal-dialog.modal-lg
    .modal-content
      .modal-header
        h5.modal-title Share
        button.close(type="button" data-dismiss="modal" aria-hidden="true" aria-label="Close")
          span(aria-hidden="true")
            | ×
      .modal-body
        .card
          .card-body
            .container
              .input-group-append
                input.form-control.input-sm.permalink(type="text" placeholder="Loading" readonly size="1024" style="font-size: 10px")
                button.input-group-btn.btn.btn-outline-secondary.btn-sm.clippy(type="button" data-clipboard-target="#sharelinkdialog .permalink" title="Copy to clipboard")
                  span.fa.fa-clipboard
              #embedsettings.form-group(role="group")
                .checkbox
                  label
                    input.readOnly(type="checkbox")
                    | Read Only
                .checkbox
                  label
                    input.hideEditorToolbars(type="checkbox")
                    | Hide Editor Toolbars
              .spacer  
              if sharingEnabled
                .socialsharing

#history.modal.fade.gl_keep(tabindex="-1" role="dialog")
  .modal-dialog.modal-lg
    .modal-content
      .modal-header
        h5.modal-title History
        button.close(type="button" data-dismiss="modal" aria-hidden="true" aria-label="Close")
          span(aria-hidden="true")
            | ×
      .modal-body
        .card
          .card-body
            ul.nav.nav-tabs(role="tablist")
              li.nav-item
                a.nav-link.active(data-toggle="tab" role="tab" href="#load-history" aria-controls="load-history" aria-selected="true")
                  | History
              li.nav-item
                a.nav-link(data-toggle="tab" role="tab" href="#load-history-diff-display" aria-controls="load-history-diff-display" aria-selected="false")
                  | Diff

            div.tab-content#historyTabs(style="height:600px;overflow-y:scroll")
              div.tab-pane.show.active#load-history(role="tabpanel")
                ul.historiccode
                  li.template
                    input.base(type="radio" name="base")
                    input.comp(type="radio" name="comp")
                    |  
                    a(href="javascript:;")
              div.tab-pane#load-history-diff-display(role="tabpanel")
                .checkbox
                  label.control-label(for="inline-diff-checkbox")
                    input.inline-diff-checkbox(type="checkbox" value="")
                    | Inline diff
                div.monaco-placeholder#history-diff
      .modal-footer
        button.btn.btn-outline-primary(type="button" data-dismiss="modal") Close

#library-selection.modal.fade.gl_keep(tabindex="-1" role="dialog")
  .modal-dialog.modal-lg
    .modal-content
      .modal-header
        h5.modal-title Libraries
        button.close(type="button" data-dismiss="modal" aria-hidden="true" aria-label="Close")
          span(aria-hidden="true")
            | ×
      .modal-body
        .card
          .card-body
            .container
              .row
                .col-lg
                  div(style='text-align: center')
                    input.lib-search-input(value="" placeholder="Search text")
                    button.btn.btn-primary.lib-search-button(type="button") Search
                    hr
              .row
                .col-lg.libs-how-to-use To add a library, search for one you want and select the version in the dropdown. Or if you have favorited it before, just click the library name in the Favorites section.
              .row
                .col-lg  
              .row
                .libs-selected-col.col-md
                  div
                    h6 Selected
                  .libs-selected-items
                .libs-results-col.col-md
                  h6 Results
                  .lib-results-items
                .libs-favorites-col.col-md
                  h6 Favorites
                  .lib-favorites

#timing-info.modal.fade.gl_keep(tabindex="-1" role="dialog")
  .modal-dialog.modal-lg
    .modal-content
      .modal-header
        h5.modal-title Timing
        button.close(type="button" data-dismiss="modal" aria-hidden="true" aria-label="Close")
          span(aria-hidden="true")
            | ×
      .modal-body
        #chart
      .modal-footer
        button.btn.btn-outline-primary(type="button" data-dismiss="modal") Close