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


<div class="introductory-div">
  <h1 class="heading">Welcome to GNU/Linux Distributions Encyclopedia!</h1>
  <p class="heading-paragraph"><%=welcomeStartingContent%></p>
  <p class="heading-paragraph">(You might need to refresh page few times to view content)</p>
</div>

<div class="container-fluid">
  <div class="row justify-content-between cards">
    <% for( let i = distros.length-1; i>=0; i--) {%>
    <% let imageLink = "http://lde-main.herokuapp.com/distros/" + distros[i].name + "/logo" %>
    <% let creationDate = ""+ distros[i].createdAt.slice(0,10) %>
    <% let updateDate = ""+ distros[i].updatedAt.slice(0,10) %>
    <% let hrefLink = "/viewDistro/" + distros[i].name %>
    <% let userImage = "http://lde-main.herokuapp.com/distros/" + distros[i].name + "/userProfilePicture"  %>

    <a style="display: inline-block;" class="col-lg-3 card-box" href="<%=hrefLink%>">
      <img class="user-picture" src="<%= userImage %> " alt="user-picture">

      <div class="distro-card">
        <div class="distro-name-first-div">
          <h4 class="distro-name"><%=distros[i].name%></h4>
          <span class="text-mute" style="text-align: right; margin-top: 10px;">ðŸ•’ <%= creationDate %></span>
        </div>
        <div class="container-logo">
          <img class="logo-img" src="<%=imageLink %>" alt="logo" />
        </div>
        <div class="distro-name-last-div">
          <span class="text-mute">Supported By: <%=distros[i].backedBy%> </span>
          <span class="posted-by">Posted By: <%=distros[i].postedBy%></span>
        </div>
      </div>

    </a>

    <% } %> <%- include('partials/footer.ejs') %>
  </div>
</div>