extends layout

block head
  link(rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css' integrity='sha256-wiMI7buOV5UBzdWN4s4kXqE/LZ794hx5oJOOIQlDBaM=' crossorigin='anonymous')
  link(rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-touchspin/4.3.0/jquery.bootstrap-touchspin.min.css' integrity='sha256-lo84g8NnZnmj6M802u7YMGf8mMuoQYV4xKEIb2DrRnk=' crossorigin='anonymous')
  style.
    html {
      position: relative;
      min-height: 100%;
    }
    body {
      font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    }
    @media (min-width: 1800px) {
      .container {
          min-width: 1500px;
      }
    }
    @media (min-width: 2400px) {
      .container {
          min-width: 1800px;
      }
    }
    @media (min-width: 2800px) {
      .container {
          min-width: 80%;
      }
    }
    .display-3 {
      font-size: 5.5rem;
    }
    @media (max-width: 575.98px) {
      .display-3 {
        font-size: 4rem;
      }
    }
    textarea {
      font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
      line-height: 1.5rem;
      box-shadow: none;
    }
    label {
      width: 7.5rem;
      font-size: 1.2rem;
    }
    .border-gray {
      border: 1px solid #ced4da;
    }
    .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
      width: 18rem;
    }
    @media (max-width: 318px) {
      .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
        width: 100%;
      }
    }
    #highlight {
      max-width: 18rem;
    }
    #expire {
      max-width: 7.5rem;
    }
    .bootstrap-touchspin {
      max-width: 7.5rem;
      float: left;
      margin-right: 1rem;
      margin-bottom: 1rem;
    }
    #multiplier {
      max-width: 9.5rem;
    }
    button.btn-lg {
      font-size: 1.5rem;
    }
    @media (min-width: 768px) {
      button.btn-lg {
        margin-top: -6rem;
      }
     }
    footer {
      height: 2.5rem;
      bottom: 0;
      line-height: 2rem;
    }

block content
  a.position-absolute.dropdown-menu-right.d-none.d-sm-block(href='https://github.com/JoeBiellik/paste')
    img(src='https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png' alt='Fork me on GitHub')

  main.container.py-3.pt-sm-5.pb-md-5
    h1.display-3= title

    form(action='/?redirect' method='POST' accept-charset='UTF-8')
      label.sr-only(for='paste') Paste content
      textarea#paste.my-3.my-sm-5.form-control(name='paste' rows='10' required autofocus)

      .row
        .col-12.col-md-9.mb-3.mb-sm-4.clearfix
          label.d-block.float-sm-left(for='highlight') Highlight
          select#highlight.custom-select.float-sm-left(name='highlight' data-live-search='true' data-style='text-dark border-gray' data-stylebase='custom-select')
            each val, key in highlights
              option(value=key data-tokens=(val.alias || []).join(' ') || false)= val.name

        .col-md-9.col-sm-12.mb-3.clearfix
          label.d-block.float-sm-left(for='expire') Expiry
          input#expire.mr-3.form-control.text-center.float-sm-left(name='expire' type='text' value=expires.default.value required)
          label.sr-only(for='multiplier') Expiry multiplier
          select#multiplier.custom-select.float-sm-left(name='multiplier' required)
            each val, key in expires.multipliers
              option(value=key selected=key == expires.default.multiplier)= val

        .col-12.col-md-3.mb-3.text-md-right
          button.btn.btn-primary.btn-lg(type='submit') Upload

  footer.w-100.position-absolute.d-none.d-md-block
    pre.text-center.text-muted.mb-0 echo 'Hello World'
      span.user-select-all  | curl -F 'paste=<-' #{url}

  script(src='https://cdnjs.cloudflare.com/ajax/libs/autosize.js/4.0.2/autosize.min.js' integrity='sha256-dW8u4dvEKDThJpWRwLgGugbARnA3O2wqBcVerlg9LMc=' crossorigin='anonymous')
  script(src='https://code.jquery.com/jquery-3.5.1.min.js' integrity='sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=' crossorigin='anonymous')
  script(src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.min.js' integrity='sha256-Xt8pc4G0CdcRvI0nZ2lRpZ4VHng0EoUDMlGcBSQ9HiQ=' crossorigin='anonymous')
  script(src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js' integrity='sha256-qo0Cam4XJ0QQ06XnCiCFYBh3GDXU45j3lpUp+em2yBU=' crossorigin='anonymous')
  script(src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-touchspin/4.3.0/jquery.bootstrap-touchspin.min.js' integrity='sha256-i215zpldm5iRs4r/PqXbdfyahPFuW/gtPECq5Dn3gSc=' crossorigin='anonymous')
  script(src='/main.js')