if (window.location.pathname == '/') {
  document.addEventListener('DOMContentLoaded', async function() {
        let response = await fetch('/api/news');
        let news = await response.json();
        news.forEach(element => {
          let newsItem = `
            
            <div class="col s12 m6">
              <div class="card sticky-action" data-aos="fade-up">
                <div class="card-content">
                  <span class="card-title grey-text text-darken-4">${element.title}<!--<i class="material-icons right">more_vert</i>--></span>
                  <!-- date -->
                  <p class="grey-text">Geplaatst op ${element.date}</p>
                  
                    ${
                    element.content.length > 200 ? element.content.substring(0, 100) + `...` : element.content 
                    }

                </div>
                <div class="card-reveal">
                  <span class="card-title grey-text text-darken-4">${element.title}<i
                      class="material-icons right">close</i></span>
                  <p class="grey-text">Geplaatst op ${element.date}</p>
                  ${element.content}
                </div>
                <div class="card-action">
                  <a href="${element.links[0].link}" class="activator">${element.links[0].title}</a>
                  ${element.links.length > 1 ? `<a href="activator" class="${element.links[1].class}">${element.links[1].title}</a>` : ''}
                </div>
              </div>
            </div>
            `; 
            document.getElementById('news').innerHTML += newsItem;
        });
        // disable loader
        document.getElementById('preloader').classList.add('hide');
        AOS.init();
      });
} 
else if (window.location.pathname == '/login') {
  // if token is set redirect to dashboard
  if (sessionStorage.getItem('token') != null) {
    window.location.href = '/dashboard';
  }



  document.getElementById('loginForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    // turn on loader and hide form
    document.getElementById('preloader').classList.remove('hide');
    document.getElementById('loginForm').classList.add('hide');
    document.getElementById('error').classList.add('hide');
    // get values
    let username = document.getElementById('username').value;
    let password = document.getElementById('password').value;
    // create object
    let user = {
      username: username,
      password: password
    }
    // send to server
    let response = await fetch('/api/user/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(user)
    });
    // check for status code 
    let status = response.status;
    if (status != 200) {
      // show error
      document.getElementById('errorText').innerHTML = 'Er is iets fout gegaan, probeer het opnieuw. Controleer of je de juiste gegevens hebt ingevuld.';
      // turn off loader and show form
      document.getElementById('preloader').classList.add('hide');
      document.getElementById('error').classList.remove('hide');
      document.getElementById('loginForm').classList.remove('hide');
    } else {
      // set token
      let result = await response.json();
      sessionStorage.setItem('token', result.token);
      // redirect to dashboard
      window.location.href = '/dashboard';

    }
  });
}
else if (window.location.pathname == '/inschrijven') {
  // add event listener to #inschrijvenform
  document.getElementById('inschrijvenForm').addEventListener('submit', async function(e) {
    // <!-- form that asks for name and password with a text about password requirements -->
    e.preventDefault();
    // turn on loader and hide form
    document.getElementById('preloader').classList.remove('hide');
    document.getElementById('inschrijvenForm').classList.add('hide');
    document.getElementById('error').classList.add('hide');
    // get values
    let username = document.getElementById('name').value;
    let password = document.getElementById('password').value;
    let passwordRepeat = document.getElementById('password2').value;
    // check if passwords are the same
    if (password != passwordRepeat) {
      // show error
      document.getElementById('errorText').innerHTML = 'De wachtwoorden komen niet overeen.';
      // turn off loader and show form
      document.getElementById('preloader').classList.add('hide');
      document.getElementById('error').classList.remove('hide');
      document.getElementById('inschrijvenForm').classList.remove('hide');
      return;
    }

    // create object
    let user = {
      username: username,
      password: password
    }
    // send to server
    let response = await fetch('/api/user/register', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(user)
    });
    // check for status code
    let status = response.status;
    if (status != 201) {
      // show error
      document.getElementById('errorText').innerHTML = 'Er is iets fout gegaan, probeer het opnieuw. Controleer of je de juiste gegevens hebt ingevuld.';
      // turn off loader and show form
      document.getElementById('preloader').classList.add('hide');
      document.getElementById('error').classList.remove('hide');
      document.getElementById('inschrijvenForm').classList.remove('hide');
    }
    else {
      // set token
      let result = await response.json();
      sessionStorage.setItem('token', result.token);
      // remove preloader
      document.getElementById('preloader').classList.add('hide');
      // show success message
      document.getElementById('success').classList.remove('hide');
      document.getElementById('successText').innerHTML = 'Succesvol ingeschreven! <br> Dit spel ben je een '+ result.role +'. <br> Veel plezier!';
    }
  });
}