extends layout

block content
  .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 Ähnliche Cocktails
        .mdl-card__supporting-text
          canvas#myChart
          script(src="/js/Chart.bundle.min.js")
          script.
            var ctx = document.getElementById("myChart");
            console.log(ctx);
            var myChart = new Chart(ctx, {
              type: 'bubble',
              data: {
                datasets: !{JSON.stringify(data).replace(/<\//g, "<\\/")}
              }, options: {
                legend: {
                  display: false
                },
                tooltips: {
                  callbacks: {
                    title: function (tooltipItem, data) {
                      let dsIdx = tooltipItem[0].datasetIndex;
                      let idx = tooltipItem[0].index;
                      let val = data.datasets[dsIdx].data[idx].val;
                      return val[2] + " - " + val[3];
                    },
                    label: function (tooltipItem, data) {
                      let dsIdx = tooltipItem.datasetIndex;
                      let idx = tooltipItem.index;
                      let val = data.datasets[dsIdx].data[idx].val;
                      return val[7];
                    },
                    afterLabel: function (tooltipItem, data) {
                      let dsIdx = tooltipItem.datasetIndex;
                      let idx = tooltipItem.index;
                      let val = data.datasets[dsIdx].data[idx].val;
                      return val[4] + " - Happy Hour: " + val[5];
                    }
                  }
                }
              }
            });

  .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 Persönliche Empfehlungen
        .mdl-card__supporting-text
          each recommend in recommends
            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= recommend[1][3]
                span.mdl-list__item-sub-title= recommend[1][7].replace(/;/g, ', ')
              span.mdl-list__item-secondary-content= Math.round(recommend[0]*10)/10