{{define "articlesHTML"}}
<script>
  function createPreview(content) {
    var slicedContent = content.slice(0, 200);
    if (content.length > 200) {
      slicedContent += '...';
    }
    return slicedContent;
  }
</script>

<div class="list">
  <div class="slide-container">
  </div>
  {{range .articles}}
    <article class="news-article">
      <div class="article_content">
        <div class="ar-title">
          <a href="/{{.ID}}/{{.Slug}}">
            {{.Title}}
          </a>
        </div>
      </div>
      <a href="/{{.ID}}/{{.Slug}}">
        <div class="prewi" data-content="{{.Content}}" data-title="{{.Title}}" data-link="/{{.ID}}/{{.Slug}}"></div>
      </a>
      <div class="timestamp"> starenovine - {{ .FormatedCreatedAt }}</div>
    </article>
  {{else}}
    <div class="empty">
      Nema članaka za izabrani datum.
    </div>
  {{end}}
</div>

<script>
  let i = 1;
  let allArticles = []
  let lastArticles = []
  let previewDivs = document.querySelectorAll('.prewi');
  previewDivs.forEach(function (previewDiv) {
    let content = previewDiv.getAttribute('data-content');
    let title = previewDiv.getAttribute('data-title')
    let link = previewDiv.getAttribute('data-link')
    allArticles.push({content,title,link})
      if (allArticles.length > 4){
        previewDiv.textContent = createPreview(content);
        }
      else{
          lastArticles.push({title,content,link})
    }
    i = i+1;
  }); 
  slideArticles = lastArticles.slice(0, 4); 
  function createSlide(){
    if (slideArticles.length > 0) {
      let temp = slideArticles.shift()
      document.querySelector('.slide-container').innerHTML = `
          <div class="ar-title">
                <a href="${temp.link}">
                  ${temp.title}
                  </a>
              </div>
            </div>
            <a href="${temp.link}">
              <div class="prewi">${createPreview(temp.content)}</div>
            </a>
         `
      slideArticles.push(temp)
    }
  }
  createSlide();
  setInterval(createSlide, 5000)
  
  let articleDivs = document.querySelectorAll('.news-article');
  for (let i = 0; i < 4; i++) {
    if (articleDivs[i]) {
      articleDivs[i].remove();
    }
  }
</script>
{{end}}