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.min.js', integrity='sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=', 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')
    script(src='https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.0/chartist.js')
    link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.0/chartist.min.css')
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    include partials/menu.pug
    .container
      h1 #{title}
      .card-group
        .card
          .card-body
            .ct-chart.ct-perfect-fourth
        .card
          .card-body
            table.table
              tr
                th Opis
                th.text-right Število
              tr
                td Niz vsebuje ime:
                td#vIme.text-right #{vsebujeIme}
              tr
                td Niz vsebuje priimek:
                td#vPriimek.text-right #{vsebujePriimek}
              tr
                td Niz vsebuje ulico:
                td#vUlica.text-right #{vsebujeUlico}
              tr
                td Niz vsebuje obliko:
                td#vOblika.text-right #{vsebujeObliko}
              tr
                td Niz vsebuje davčno:
                td#vDavcna.text-right #{vsebujeDavcno}
              tr
                td Niz vsebuje matično:
                td#vMaticna.text-right #{vsebujeMaticno}
              tr
                td Niz vsebuje filter:
                td#vFilter.text-right #{vsebujeFilter}
            strong#vObdelano Vsi obdelani nizi: #{obdelanih} | Nizi, ki ne vsebujejo osebnih podatkov: #{niziBrezOP}
      p  
      p
        button.btn.btn-primary(type='button', data-toggle='collapse', data-target='#collapseExample', aria-expanded='false', aria-controls='collapseExample')
          | Upravljanje statistik
      #collapseExample.collapse
        .card.card-body
          | Pobriši statistike
          a.btn.btn-secondary.btn-sm(href='/stats/delete', role='button')
            i.fa.fa-trash
            |  Izbriši
      p  
      include partials/footer.pug
    script(type='application/javascript').
      var data = {
        labels: ['Ime', 'Priimek', 'Ulica', 'Oblika', 'Davčna', 'EMŠO', 'Filter'],
        series: [#{vsebujeIme}, #{vsebujePriimek}, #{vsebujeUlico}, #{vsebujeObliko},
                 #{vsebujeDavcno}, #{vsebujeMaticno}, #{vsebujeFilter}
                ]
      };
      var options = {
        labelInterpolationFnc: function (value) {
          return value[0]
        },
        width: 400,
        height: 300
      };
      var responsiveOptions = [
        ['screen and (min-width: 640px)', {
          chartPadding: 30,
          labelOffset: 100,
          labelDirection: 'explode',
          labelInterpolationFnc: function (value) {
            return value;
          }
        }],
        ['screen and (min-width: 1024px)', {
          labelOffset: 80,
          chartPadding: 20
        }]
      ];
      new Chartist.Pie('.ct-chart', data, options, responsiveOptions);
      $(document).ready(function() {
        setInterval(function() {
          $.get('/stats/data', function(odgovor) {
            data.series = [];
            data.series.push(odgovor.vsebujeIme);
            data.series.push(odgovor.vsebujePriimek);
            data.series.push(odgovor.vsebujeUlico);
            data.series.push(odgovor.vsebujeObliko);
            data.series.push(odgovor.vsebujeDavcno);
            data.series.push(odgovor.vsebujeMaticno);
            data.series.push(odgovor.vsebujeFilter);
            var mychart = $('.ct-chart');
            mychart.get(0).__chartist__.update(data);
            $("#vIme").html(odgovor.vsebujeIme);
            $("#vPriimek").html(odgovor.vsebujePriimek);
            $("#vUlica").html(odgovor.vsebujeUlico);
            $("#vOblika").html(odgovor.vsebujeObliko);
            $("#vDavcna").html(odgovor.vsebujeDavcno);
            $("#vMaticna").html(odgovor.vsebujeMaticno);
            $("#vFilter").html(odgovor.vsebujeFilter);
            $("#vObdelano").html("Vsi obdelani nizi: " + odgovor.obdelanih + " | Nizi, ki ne vsebujejo osebnih podatkov: " + odgovor.niziBrezOP + " (" + odgovor.niziBrezOP / odgovor.obdelanih * 100 + "%)");
          });
        }, 1000);
      });