-
link(rel="stylesheet" href="static/asset/css/datatables.css")
div
  .card
    .card-header
      p.card-header-title
        span.icon
          i.mdi.mdi-account-edit
        | Skill Analyzer Settings (WIP)
    .card-content
      div
        div
          p(style="display:inline") Select Game:
          |
          |
          select(id='sdvx-version')
            option() -- Select --
            option(value='4') IV - Heavenly Haven
            option(value='5') V - Vivid Wave
            option(value='6') VI - Exceed Gear
          // input(id='add-skill-level-input')
          // button(id='add-skill-level-btn') +

        div
          p(style="display:inline") Skill course:
          |
          |
          select(id='skill-course')
            option() -- Select --
          |
          |
          select(id='skill-course-level')
            option() -- Select --

        div
          each val in [1, 2, 3]
            br
            p(style="display:inline") Track ##{val}: 
            |
            |
            |
            input(class='track-id' maxlength="4" size="4" onkeyup="this.value = this.value.replace(/[^0-9]+/, '')")
            |
            |
            |
            input(class='track-name')
            |
            |
            |
            select(class='track-difficulty')
              option() -- Select --
          br
          br
          button(id='savebutton') Save
br
br
div
  .card
    .card-header
      p.card-header-title
        span.icon
          i.mdi.mdi-account-edit
        | Songs List
    .card-content
      table.table(id="songslist" style="width:100%")
        thead
          tr    
            th ID
            th Song Name
            th Release Date
            th Novice
            th Advanced
            th Exhaust
            th Maximum
            th Other
        tbody

script(src="static/asset/js/skillanalyzer.js") 
script(src="static/asset/js/datatables.js")
script(src="static/asset/js/songslist.js")