doctype html
html
  head
    title #{title}
    link(rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css' integrity='sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M' crossorigin='anonymous')
    script(src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous")
    script(src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous")
    script(src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous")
    script(src='https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js', integrity='sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb', crossorigin='anonymous')
    link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css')
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    include partials/menu.pug
    .container
      h1 Dodajanje pravil
      #rezultat-testa
      form(action='/pravila/filtri/add', method='POST')
        .form-group
          label(for='filtri') Testni namen:
          input#testninamen.form-control.form-control-lg(type='text', name='testninamen', value='', placeholder='Namen transakcije ...')
          small.form-text.text-muted Vpišite testni namen transakcije, ki ga bomo preverili s spodnjim RegExp pravilom.
        .form-group
          label(for='filtri') Vnesi RegExp pravilo:
          input#filtri.form-control.form-control-lg(type='text', name='filtri', value='', placeholder='RegExp pravilo ...')
          small.form-text.text-muted Vpišite RegExp pravilo, s katerim bomo preverili zgornji tesni namen transakcije. Pomoč za RegExp je na voljo spodaj (gumb Pomoč).
        button#test-gumb.btn.btn-secondary(name='test', value='Testiraj', type='button')
          span.fa.fa-flask
          |  Testiraj
        strong
        |  
        button.btn.btn-secondary(type='button', data-toggle='collapse', data-target='#collapseExample', aria-expanded='false', aria-controls='collapseExample')
          span.fa.fa-info-circle
          |  Pomoč
        strong
        |  
        button#submit-gumb.btn.btn-primary(name='submit', value='Shrani', type='submit')
          span.fa.fa-floppy-o
          |  Shrani
      p  
      #collapseExample.collapse
        .card.card-body
          h2 Brackets
          p Brackets are used to find a range of characters:
          pre.
            Expression      Description
                    [abc]   Find any character between the brackets
                    [^abc]  Find any character NOT between the brackets
                    [0-9]   Find any character between the brackets (any digit)
                    [^0-9]  Find any character NOT between the brackets (any non-digit)
                    (x|y)   Find any of the alternatives specified            
          h2 Metacharacters
          p Metacharacters are characters with a special meaning:
          pre.
            Metacharacter   Description
                    .       Find a single character, except newline or line terminator
                    \w      Find a word character
                    \W      Find a non-word character
                    \d      Find a digit
                    \D      Find a non-digit character
                    \s      Find a whitespace character
                    \S      Find a non-whitespace character
                    \b      Find a match at the beginning/end of a word
                    \B      Find a match not at the beginning/end of a word
                    \0      Find a NUL character
                    \n      Find a new line character
                    \f      Find a form feed character
                    \r      Find a carriage return character
                    \t      Find a tab character
                    \v      Find a vertical tab character
                    \xxx    Find the character specified by an octal number xxx
                    \xdd    Find the character specified by a hexadecimal number dd
                    \uxxxx  Find the Unicode character specified by a hexadecimal number xxxx            
          h2 Quantifiers
          pre.
            Quantifier      Description
                  n+        Matches any string that contains at least one n
                  n*        Matches any string that contains zero or more occurrences of n
                  n?        Matches any string that contains zero or one occurrences of n
                  n{X}      Matches any string that contains a sequence of X n's
                  n{X,Y}    Matches any string that contains a sequence of X to Y n's
                  n{X,}     Matches any string that contains a sequence of at least X n's
                  n$        Matches any string with n at the end of it
                  ^n        Matches any string with n at the beginning of it
                  ?=n       Matches any string that is followed by a specific string n
                  ?!n       Matches any string that is not followed by a specific string n            
      h1 Pregled in brisanje pravil
      table.table
        tr
          th ID
          th filter
          th.text-right Orodja
        each filter, index in seznamFiltrov
          tr
            td= index
            td= filter
            td.text-right
              a.btn.btn-danger(href='/pravila/filtri/delete/'+index)
                i.fa.fa-trash
                |  Briši
      include partials/footer.pug

    script.
      $("#test-gumb").click(function() {
        var re = RegExp($("#filtri").val(), "gi");
        if($("#testninamen").val().search(re) != -1) {
          $("#rezultat-testa").append('<div id="success-alert" class="alert alert-success alert-dismissible fade show" role="alert"> \
                                       <button type="button" class="close" data-dismiss="alert" aria-label="Zapri"> \
                                         <span aria-hidden="true">&times;</span> \
                                       </button> \
                                       <strong>Uspeh!</strong> Tvoj filter je pravi za ta namen. \
                                       </div>')
        } else {
          $("#rezultat-testa").append('<div id="success-alert" class="alert alert-danger alert-dismissible fade show" role="alert"> \
                                       <button type="button" class="close" data-dismiss="alert" aria-label="Zapri"> \
                                       <span aria-hidden="true">&times;</span> \
                                       </button> \
                                       <strong>Napaka!</strong> Tvoj filter ni pravi za ta namen. \
                                       </div>')
        }
      });