text: let slideIndex = 0;
  
  $('.popup-inner-content').height($('.dialogSlide').eq(0).height() * (100 / document.documentElement.clientHeight) + "vh");
  
  $('#dialogBack').on('click', function () {
      slideIndex--;
  
      let width = getValues() - $('.dialogSlide').eq(slideIndex).width() * (100 / document.documentElement.clientWidth);
  
      $('.popup-inner-content').css({"-webkit-transform":"translateX(-" + Math.round(width) + "vw)"});
  
      $('.popup-inner-content').height($('.dialogSlide').eq(slideIndex).height() * (100 / document.documentElement.clientHeight) + "vh");
  
  
      if (slideIndex <= 0) {
          $('#dialogBack').css('display', 'none');
      }
  
      if (slideIndex <= $('.dialogSlide').length - 1) {
          $('#dialogFinish').css('display', 'none');
          $('#dialogNext').css('display', 'flex');
      }
  });
  
  $('#dialogNext').on('click', function () {
      let nextAllowed = true;
  
      slideIndex++;
  
      unsetErrors();
  
      if (!$('#presentationName').val() && slideIndex == 1) {
          $('#presentationNameError').css('color', 'red');
          nextAllowed = false;
      }
  
      if ($('.general-dimension').data('dimension') === undefined && slideIndex == 1) {
          $('#dimensionsError').css('color', 'red');
          nextAllowed = false;
      }
  
      if (slideIndex == 3) {
          setOverview();
      }
  
      if (nextAllowed) {
          $('.popup-inner-content').height($('.dialogSlide').eq(slideIndex).height() * (100 / document.documentElement.clientHeight) + "vh");
  
          let testWidth = -1 * ($('.dialogSlide').eq(slideIndex).width() - $('.dialogSlide').eq(slideIndex - 1).width()) * (100 / document.documentElement.clientWidth);
          let width = testWidth + getValues() + $('.dialogSlide').eq(slideIndex).width() * (100 / document.documentElement.clientWidth);
      
          $('.popup-inner-content').css({"-webkit-transform":"translateX(-" + Math.round(width) + "vw)"});
      
          if (slideIndex >= $('.dialogSlide').length - 1) {
              $('#dialogFinish').css('display', 'flex');
              $('#dialogNext').css('display', 'none');
          }
      
          if (slideIndex > 0) {
              $('#dialogBack').css('display', 'flex');
          }
      
          if (slideIndex == 2) {
              setTemplateHeights();
          }
      } else {
          slideIndex--;
      }
  });
  
  function unsetErrors() {
      $('#presentationNameError').css('color', '#585858');
      $('#dimensionsError').css('color', '#585858');
  }
  
  function setOverview() {
      $('#overview-name-presentationName').text($('#presentationName').val());
      $('#overview-dimension-value').text($('.general-dimension').data('dimension'));
  
      $('.presentationUser').each(function() {
          $('#overview-users-table').append(`
          <div class="overviewUser">
              <div class="overviewUser-image" style="background: url('${$(this).data('img')}'); background-position: center; background-size: cover;">
              
              </div>
              <div class="overviewUser-name">
              ${$(this).data('username')}
              </div>
          </div>
          `);
      });
  
      $('#overview-template-templateName').text($('#templatesBox').data('template'));
  }
  
  $('#noTemplate').on('click', function() {
      slideIndex++;
  
      $('.popup-inner-content').height($('.dialogSlide').eq(slideIndex).height() * (100 / document.documentElement.clientHeight) + "vh");
  
      let testWidth = -1 * ($('.dialogSlide').eq(slideIndex).width() - $('.dialogSlide').eq(slideIndex - 1).width()) * (100 / document.documentElement.clientWidth);
      let width = testWidth + getValues() + $('.dialogSlide').eq(slideIndex).width() * (100 / document.documentElement.clientWidth);
  
      $('.popup-inner-content').css({"-webkit-transform":"translateX(-" + Math.round(width) + "vw)"});
  
      $('#dialogFinish').css('display', 'flex');
      $('#dialogNext').css('display', 'none');
  
      $('.popup-inner').width($('.dialogSlide').eq(slideIndex).width() * (100 / document.documentElement.clientWidth) + "vw");
      setProgress();
      $('#progress').text(slideIndex);
      $('#templatesBox').data('template', 'none');
      setOverview();
  });
  
  function getValues(){
      var matrix = $('.popup-inner-content').css('-webkit-transform').replace(/[^0-9\-.,]/g, '').split(',');
      var x = matrix[12] || matrix[4];
      var y = matrix[13] || matrix[5];
      return x * (100 / document.documentElement.clientWidth) * -1;
    };
  
  $('.dialogButton').on('click', function () {
      setProgress();
      $('.popup-inner').width($('.dialogSlide').eq(slideIndex).width() * (100 / document.documentElement.clientWidth) + "vw");
      $('#progress').text(slideIndex);
  });
  
  function setProgress() {
      $('#dialogProgress').width(100 / 3 * slideIndex + "%");
  }
  
  $('#onedimensional').on('click', function () {
      $('#twodimensional').removeClass('activeDimension');
      $(this).addClass('activeDimension');
      $('.general-dimension').data('dimension', 'one');
  });
  
  /*$('#twodimensional').on('click', function () {
      $('#onedimensional').removeClass('activeDimension');
      $(this).addClass('activeDimension');
      $('.general-dimension').data('dimension', 'two');
  });*/
  
  $('#searchAllUsers').on('input', function () {
      $('.allUser').each(function () {
          $(this).css('display', 'flex');
          if ($(this).data('username').toUpperCase().search($('#searchAllUsers').val().toUpperCase()) == -1) {
              $(this).css('display', 'none');
          }
      });
  })
  
  $('body').on('click', '.allUser', function() {
      $('#management-presentationUsers-users').append(`
          <div class="presentationUser" data-user="${$(this).data('user')}" data-img="${$(this).data('img')}" data-username="${$(this).data('username')}" data-email="${$(this).data('email')}">
              <div class="presentationUser-picture">
              <div class="presentationUser-picture-image" style="background: url('${$(this).data('img')}'); background-position: center; background-size: cover;"></div>
              </div>
              <div class="presentationUser-username">
              ${$(this).data('username')}
              </div>
          </div>
      `);
  
      $(this).remove();
  });
  
  $('body').on('click', '.presentationUser', function() {
      $('#management-allUsers-users').append(`
          <div class="allUser" data-user="${$(this).data('user')}" data-img="${$(this).data('img')}" data-username="${$(this).data('username')}">
              <div class="allUser-picture">
              <div class="allUser-picture-image" style="background: url('${$(this).data('img')}'); background-position: center; background-size: cover;"></div>
              </div>
              <div class="allUser-username">${$(this).data('username')}</div>
              <div class="allUser-email">${$(this).data('email')}</div>
          </div>
      `);
  
      $(this).remove();
  });
  
  function setTemplateHeights() {
      $('.template-image').each(function () {
          $(this).height($(this).width() * 9 / 16 * (100 / document.documentElement.clientWidth) + "vw");
      });
  }
  
  $('#searchTemplate').on('input', function() {
      $('.template').each(function () {
          $(this).css('display', 'flex');
          if ($(this).data('template').toUpperCase().search($('#searchTemplate').val().toUpperCase()) == -1) {
              $(this).css('display', 'none');
          }
      });
  });
  
  $('.template').on('click', function () {
      $('.template').each(function () {
          $(this).removeClass('activeTemplate');
      });
  
      $(this).addClass('activeTemplate');
      $('#templatesBox').data('template', $(this).data('template'));
  });
  
  
  $(document).ready(function() {
      if(localStorage.getItem('createPresentation') == 'openPopup') {
          $('#popup').css('display', 'flex');
          localStorage.removeItem('createPresentation')
          $('#twodimensional').removeClass('activeDimension');
          $('#onedimensional').addClass('activeDimension');
          $('.general-dimension').data('dimension', 'one');
      } else {
          console.warn("WIESO GEHTS DO NED EINI")
          $('#popup').css('display', 'none');
      }
  });
  
  sendRequestToServer({
      type: "GET",
      url: "/editor-redesign/getAllUsers"
  }).then(data => {
      data.res.forEach(user => {
          $('#management-allUsers-users').append(`
          <div class="allUser" data-user="${user._id}" data-img="${user.img}" data-username="${user.name}" data-email="${user.mail}">
              <div class="allUser-picture">
              <div class="allUser-picture-image" style="background: url('${user.img}'); background-position: center; background-size: cover;"></div>
              </div>
              <div class="allUser-username">${user.name}</div>
              <div class="allUser-email">${user.mail}</div>
          </div>
          `);
      });
  });
  
  $('#dialogFinish').on('click', function () {
      $('#popup').css('display', 'none');
      
      let presentation = {
          name: $('#presentationName').val(),
          dimension: $('.general-dimension').data('dimension'),
          users: [],
          template: $('#templatesBox').data('template')
      }
  
      $('.presentationUser').each(function() {
          presentation.users.push({"status": "pending", "u_id": $(this).data('user')});
      });
  
      console.warn(presentation);
  
      sendRequestToServer({
          type: "POST",
          url: "/editor-redesign/createNewPresentation",
          data: presentation
      }).then(data => {
          console.warn(data);
      });
  
  });