extends layout

mixin rangemaker(id)
  .mdl-grid(style="width:100px;text-align:center;padding:0;margin:0", id=id)
    .mdl-cell(style="width:33.33333333%;margin-right:0px;margin-left:0px")
      a.minus-arrow.mdl-list__item-secondary-action(href='#')
        i.material-icons remove
    .mdl-cell(style="width:33.33333333%;margin-right:0px;margin-left:0px")
      .mdl-progress.mdl-js-progress(style="text-align:center")
        span.mdl-list__item-secondary-info
    .mdl-cell(style="width:33.33333333%;margin-right:0px;margin-left:0px")
      a.plus-arrow.mdl-list__item-secondary-action(href='#')
        i.material-icons add
  script.
    let m = null;
    let rangediv = document.getElementById('#{id}');
    rangediv.getElementsByClassName('mdl-progress')[0].addEventListener('mdl-componentupgraded', function () {
      m = this.MaterialProgress;
      this.MaterialProgress.setProgress(100 * 3 / 7);
    });
    rangediv.getElementsByClassName('mdl-list__item-secondary-info')[0].innerHTML = "3/7";
    rangediv.getElementsByClassName('minus-arrow')[0].addEventListener('click', function () {
      m.setProgress(100);
    });


block content
  style.
    .demo-card-square.mdl-card {
      width: 100%;
    }

    .demo-card-square > .mdl-card__title {
      color: #fff;
      background: #795548;
    }

    .mdl-selectfield__select option {
      font-family: "Helvetica", "Arial", sans-serif;
    }


  script(src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.13.3/dist/tf.min.js", defer)
  script(src="/js/neuralnet.js", defer)
  .mdl-grid
    .mdl-cell--3-offset-desktop
    .mdl-cell.mdl-cell--6-col.mdl-cell--12-col-tablet
      .demo-card-square.mdl-card.mdl-shadow--2dp
        .mdl-card__title.mdl-card--expand
          h2.mdl-card__title-text Über diese Seite
        .mdl-card__supporting-text
          | Auf dieser Website kannst Du Deine Lieblingscocktails speichern und beim nächsten Mal wieder bestellen!
          h3 Freiwillige Informationen
          | Du kannst anonym Dein Alter und Geschlecht angeben, um die Cocktails weiter verbessern zu können.
          .form
            .mdl-selectfield.mdl-js-selectfield.mdl-selectfield--floating-label
              select#sex-input.mdl-selectfield__select(onchange="sendSex(this)")
                each val, index in {'na':'Nicht angegeben','m':'Männlich','w':'Weiblich', 'o': 'Divers'}
                  if (user.sex === index)
                    option(value=index, selected="selected")= val
                  else
                    option(value=index)= val
              label.mdl-selectfield__label(for='sex-input') Geschlecht
              span.mdl-selectfield__error Select a value
            br
            .mdl-textfield.mdl-js-textfield.mdl-textfield--floating-label
              input.mdl-textfield__input(type="number", id="age_input", onchange="sendAge(this)", value=(user.age !== -1 ? user.age : ""))
              label.mdl-textfield__label(for="age_input") Alter
        //.mdl-card__actions.mdl-card--border
        //  a.mdl-button.mdl-button--colored.mdl-js-button.mdl-js-ripple-effect
        //    | View Updates
  .mdl-grid
    .mdl-cell--3-offset-desktop
    .mdl-cell.mdl-cell--6-col.mdl-cell--12-col-tablet
      .demo-card-square.mdl-card.mdl-shadow--2dp
        .mdl-card__title.mdl-card--expand
          h2.mdl-card__title-text Lieblingscocktails
        .mdl-card__supporting-text
          ul.demo-list-two.mdl-list
            li.mdl-list__item.mdl-list__item--two-line
              span.mdl-list__item-primary-content
                i.material-icons.mdl-list__item-avatar local_bar
                span Bryan Cranston
                span.mdl-list__item-sub-title 62 Episodes, 62 Episodes, 62 Episodes, 62 Episodes, 62 Episodes, 62 Episodes, 62 Episodes
              span.mdl-list__item-secondary-content
                .mdl-grid(style="width:100px;text-align:center;padding:0;margin:0")
                  .mdl-cell(style="width:33.33333333%;margin-right:0px;margin-left:0px")
                    a.mdl-list__item-secondary-action(href='#')
                      i.material-icons remove
                  .mdl-cell(style="width:33.33333333%;margin-right:0px;margin-left:0px")
                    #p1.mdl-progress.mdl-js-progress(style="text-align:center")
                      span.mdl-list__item-secondary-info 6/7
                  .mdl-cell(style="width:33.33333333%;margin-right:0px;margin-left:0px")
                    a.mdl-list__item-secondary-action(href='#')
                      i.material-icons add
                script.
                  document.querySelector('#p1').addEventListener('mdl-componentupgraded', function () {
                    this.MaterialProgress.setProgress(100 * 6 / 7);
                  });
            li.mdl-list__item.mdl-list__item--two-line
              span.mdl-list__item-primary-content
                i.material-icons.mdl-list__item-avatar local_bar
                span Aaron Paul
                span.mdl-list__item-sub-title 62 Episodes
              span.mdl-list__item-secondary-content
                .mdl-grid(style="width:100px;text-align:center;padding:0;margin:0")
                  .mdl-cell(style="width:33.33333333%;margin-right:0px;margin-left:0px")
                    a.mdl-list__item-secondary-action(href='#')
                      i.material-icons remove
                  .mdl-cell(style="width:33.33333333%;margin-right:0px;margin-left:0px")
                    #p2.mdl-progress.mdl-js-progress(style="text-align:center")
                      span.mdl-list__item-secondary-info 2/7
                  .mdl-cell(style="width:33.33333333%;margin-right:0px;margin-left:0px")
                    a.mdl-list__item-secondary-action(href='#')
                      i.material-icons add
                script.
                  document.querySelector('#p2').addEventListener('mdl-componentupgraded', function () {
                    this.MaterialProgress.setProgress(100 * 2 / 7);
                  });
            li.mdl-list__item.mdl-list__item--two-line
              span.mdl-list__item-primary-content
                i.material-icons.mdl-list__item-avatar local_bar
                span Bob Odenkirk
                span.mdl-list__item-sub-title 62 Episodes
              span.mdl-list__item-secondary-content
                .mdl-grid(style="width:100px;text-align:center;padding:0;margin:0")
                  .mdl-cell(style="width:33.33333333%;margin-right:0px;margin-left:0px")
                    a.mdl-list__item-secondary-action(href='#')
                      i.material-icons remove
                  .mdl-cell(style="width:33.33333333%;margin-right:0px;margin-left:0px")
                    #p3.mdl-progress.mdl-js-progress(style="text-align:center")
                      span.mdl-list__item-secondary-info 5/7
                  .mdl-cell(style="width:33.33333333%;margin-right:0px;margin-left:0px")
                    a.mdl-list__item-secondary-action(href='#')
                      i.material-icons add
                script.
                  document.querySelector('#p3').addEventListener('mdl-componentupgraded', function () {
                    this.MaterialProgress.setProgress(100 * 5 / 7);
                  });
            br
            .form
              .mdl-grid
                .mdl-cell--6-col
                  .mdl-selectfield.mdl-js-selectfield.mdl-selectfield--floating-label
                    select#gender.mdl-selectfield__select
                      option(value='')
                      each val in cocktails
                        option(value=val[3])= val[2] + " - " + val[3]
                    label.mdl-selectfield__label(for='gender') New cocktail
                    span.mdl-selectfield__error Select a value
                .mdl-cell--3-col
                  +rangemaker("pnew")
                .mdl-cell--3-col
                  button.mdl-button.mdl-js-button.mdl-button--fab.mdl-js-ripple-effect
                    i.material-icons add
        //.mdl-card__actions.mdl-card--border
        //  a.mdl-button.mdl-button--colored.mdl-js-button.mdl-js-ripple-effect
        //    | View Updates