<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MyPix</title>
  <link rel="stylesheet" href="/css/mainDash.css">
</head>

<body>
  <%- include('navbar', LoginData) %>
  <div class="img__showcase">
    <div class="img_sh_title">
      <hr class="hr_left">
      <a href="/Dashboard/following">ULTIMOS DE ARTISTAS QUE SIGUES</a>
      <hr class="hr_right">
    </div>
    <div class="container">
      <% for( let index = 0; index < illusts.length; index++ ) { %>
      <div class="image">
        <a class="card__a" href="/illusts/<%= illusts[index].id %>" style="width: 200px; height: 200px;">
          <img class="image__img" src="/images<%= illusts[index].thumb_dir.split(".")[1] %>.jpg">
          <div class="image__overlay">
            <div class="image__title">
              <% if (illusts[index].title.length > 5 ) { %>
              <%= illusts[index].title.slice(0, 5) %>...
              <% } else { %>
              <%= illusts[index].title %>
              <% } %>
            </div>
            <div class="author__line">
              <a class="author__button" href="/user/<%= illusts[index].author_id %> ">
                <img class="author__img" src="/images<%= illusts[index].profile_pic_dir.split(".")[1]+"."+illusts[index].profile_pic_dir.split(".")[2]%>" alt="">
                <p class="author__name"><%= illusts[index].nickname %> </p>
              </a>
            </div>
          </div>
        </a>
      </div>
      <% } %>
    </div>
  </div>
  <div class="img__showcase">
    <div class="img_sh_title">
      <hr class="hr_left">
      <a href="/Dashboard/ranking">RANKING</a>
      <hr class="hr_right">
    </div>
    <div class="container">
      <% if (globalranking) { %>
      <% for( let index = 0; index < globalranking.length; index++ ) { %>
      <div class="image-rank">
        <div class="rank__info__line">
          <p>#<%= index+1 %></p>
        </div>
        <a class="card__a" href="/illusts/<%= globalranking[index].id %>" style="width: 300px; height: 300px;">
          <div class="image__img__rank" style="background-image: url(/images/<%=globalranking[index].thumb_dir%>);">
            <div class="image__overlay">
              <div class="image__title">
                <% if (globalranking[index].title.length > 5 ) { %>
                <%= globalranking[index].title.slice(0, 5) %>...
                <% } else { %>
                <%= globalranking[index].title %>
                <% } %>
              </div>
              <div class="author__line">
                <a class="author__button" href="/user/<%= globalranking[index].author_id %> ">
                  <img class="author__img" src="/images<%= globalranking[index].profile_pic_dir.split(".")[1]+"."+globalranking[index].profile_pic_dir.split(".")[2]%>" alt="">
                  <p class="author__name"><%= globalranking[index].nickname %> </p>
                </a>
              </div>
            </div>
          </div>
        </a>
      </div>
      <% } %>
      <% } %>
    </div>
  </div>
  <div class="img__showcase">
    <div class="img_sh_title">
      <hr class="hr_left">
      <a href="/dashboard/recommended">ARTISTAS RECOMENDADOS</a>
      <hr class="hr_right">
    </div>
    <div class="container">
      <% for( let index = 0; index < rec_artists.length; index++ ) { %>
      <div class="author__card">
        <a href=/user/<%= rec_artists[index].author_id %> ">
          <div class=" author__card_img" style="background-image: url(<%=rec_artists[index].profile_portrait_dir%>);">
          <div class="author__header">
            <img class="author__img" src="/images<%= rec_artists[index].profile_pic_dir.split(".")[1]+"."+rec_artists[index].profile_pic_dir.split(".")[2]%>" alt="">
            <p class="author__name"><%= rec_artists[index].nickname %></p>
          </div>
      </div>
      </a>
    </div>
    <% } %>
  </div>

  </div>
  <div class="img__showcase">
    <div class="img_sh_title">
      <hr class="hr_left">
      <a href="/dashboard/recommended">ILUSTRACIONES RECOMENDADAS</a>
      <hr class="hr_right">
    </div>
    <div class="container">
      <% for( let index = 0; index < rec_illusts.length; index++ ) { %>
      <div class="image">
        <a class="card__a" href="/illusts/<%= rec_illusts[index].id %>" style="width: 200px; height: 200px;">
          <img class="image__img" src="/images<%= rec_illusts[index].thumb_dir.split(".")[1] %>.jpg">
          <div class="image__overlay">
            <div class="image__title">
              <% if (rec_illusts[index].title.length > 5 ) { %>
              <%= rec_illusts[index].title.slice(0, 5) %>...
              <% } else { %>
              <%= rec_illusts[index].title %>
              <% } %>
            </div>
            <div class="author__line">
              <a class="author__button" href="/user/<%= rec_illusts[index].author_id %> ">
                <img class="author__img" src="/images<%= rec_illusts[index].profile_pic_dir.split(".")[1]+"."+rec_illusts[index].profile_pic_dir.split(".")[2]%>" alt="">
                <p class="author__name"><%= rec_illusts[index].nickname %> </p>
              </a>
            </div>
          </div>
        </a>
      </div>
      <% } %>
    </div>
  </div>
</body>

</html>