extends layout

block head
  link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:400,300')
  link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/css/bootstrap-select.min.css', integrity='sha256-VMPhaMmJn7coDSbzwqB0jflvb+CDnoAlfStC5RogOQo=', crossorigin='anonymous')
  style.
    html {
      position: relative;
      min-height: 100%;
    }
    body {
      margin-bottom: 4rem;
    }
    body, button, input, optgroup, select, textarea {
      font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }
    @media (min-width: 1800px) {
      .container {
          min-width: 1500px;
      }
    }
    @media (min-width: 2400px) {
      .container {
          min-width: 1800px;
      }
    }
    .display-3 {
      font-size: 5.5rem;
    }
    textarea, textarea:required, textarea:invalid {
      font-family: monospace, serif;
      line-height: 1.5em;
      box-shadow: none;
    }
    .border-gray {
      border: 1px solid #ced4da;
    }
    footer {
      width: 100%;
      height: 2.5rem;
      position: absolute;
      bottom: 0;
      line-height: 2rem;
    }

block content
  a(href='https://github.com/JoeBiellik/paste', style='position: absolute; top: 0; right: 0; border: 0;')
    img(src='https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png', alt='Fork me on GitHub')

  main.container.pt-5.mx-6
    h1.display-3.mb-5 #{title}

    form(action='/?redirect', method='POST', accept-charset='UTF-8')
      fieldset.form-group
        textarea.form-control(name='paste', rows='10', required, autofocus)

      div.row.mt-4
        div.col-md-auto.col-sm-12
          select#highlight.mt-3(name='highlight', data-live-search='true', data-width='auto', data-style='text-dark border-gray', data-styleBase='custom-select')
            option(value='', selected) Choose syntax highlighting
            each val, key in highlights
              option(value=key) #{val}

        div.col-md-auto.col-sm-12
          select#expire.custom-select.mt-3(name='expire')
            option(value='', selected) Choose expiry
            each val, key in expires
              option(value=key) #{val}

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

  footer.hidden-sm-down
    pre.text-center.text-muted.mb-0.
      echo 'Hello World' | 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.17/js/bootstrap-select.min.js', integrity='sha256-QOE02Glo1C1gHzP96JOaxyIMt4XSFv/exZaYLY4dwO0=', crossorigin='anonymous')
  script(src='/main.js')