
<%- include('../partials/header') %>

<section id="navigation">
  <nav class="navbar navbar navbar-dark bg-dark">
    <a class="navbar-brand" href="home"><i class="fab fa-opera"></i>ptimizedHealth</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="ml-auto navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="nutrition">Nutrition</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="sleep">Sleep</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="fitness">Fitness</a>
        </li>
        
        <li class="nav-item active">
          <a class="nav-link" href="trending">Trending</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="about">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="profile">Dashboard</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/">Register!</a>
        </li>
      </ul>
    </div>
  </nav>
</section>

<section class="trending-header">
  <h2 class="display-1">Trending</h2>
  <h1 class="lead">See the Latest Advice From Health Professionals</h1>
</section>

<section class="newsCards">
  <br>
  <div class="container" id="blog">
    <div class="card-columns" id="display"></div>
  </div>
</section>

<script>
  function getArticles() {
    // get elements
    var card_cols = document.getElementById("display");
    
    // arguments
    var key = 'J12AXRsHmThmrGp2LjoALOir3MjEjn6l';
    var query = 'fitness';
    var filter = 'document_type:("article")';
    // build url
    var url = `https://api.nytimes.com/svc/search/v2/articlesearch.json?q=${query}&api-key=${key}&fq=${filter}`;
    console.log(url);
    // api call
    $.ajax({url:url, dataType:"json"}).then(function(data) {
      // console.log(data);
      var cards = '';
      for (var i = 0; i < data.response.docs.length; i++) {
        var article = data.response.docs[i];
        cards += '<div class="card border-info bg-light mb-3"><a href=' + article.web_url + ' style="text-decoration: none; color: black">';
        if (article.multimedia.length > 0) {
          cards += '<img class="card-img-top" src=https://static01.nyt.com/' + article.multimedia[0].url;
          cards += ' alt=\'\'>';
        }
        cards += '<div class="lead card-body"><p class="card-text"><h2 style="font-family: copperplate;">' + article.headline.main + '</h2>'
        cards += article.snippet + '</p></div></a></div>';
      }
      // add cards to html
      card_cols.innerHTML = cards;
    })
    .catch(function(err) {
      // error message
      console.log(err);
      var error_msg = '<p>Could not load articles.</p>';
      document.getElementbyId("blog").innerHTML += error_msg;
    })
  }
  window.onload = getArticles;
</script>
<%- include('../partials/footer') %>