<!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><%= AuthorData.nickname %> - MyPix</title>
  <link rel="stylesheet" href="/css/userStyle.css">
  <!-- dios mio lo que tuve que pasar para que esto sirva -->
  <style>
    :root {
      --background-image: url(<%= AuthorData.profile_portrait_dir %>);
    }
  </style>
</head>

<body>
  <%- include('navbar', LoginData) %>
  <div class="author__header">
    <div class="header__fill" style="background-image: var(--background-image);">
      <div class="author__line">
        <div class="author__picname">
          <img src="<%='/images/'+AuthorData.profile_pic_dir.slice(1,AuthorData.profile_pic_dir.length)%>" alt="" style="width: 90px;">
          <h3><%= AuthorData.nickname %> </h3>
        </div>
        <div class="author__inline">
          <h4>Views: <%= AuthorData.page_views %></h4>
          <h4>
            <% if (AuthorIllusts) { %>
            <%= AuthorIllusts.length %>
            <% } else { %>
            0
            <% } %>
          </h4>
        </div>
      </div>
    </div>
  </div>

  <div class="author__nav">
    <nav>
      <ul class="nav__links__auth">
        <li><a name="author-li" class="active-li" onclick="openNav(event, 'Home')">Home</a></li>
        <li><a name="author-li" class="inactive-li" onclick="openNav(event, 'Ilustraciones')">Ilustraciones</a></li>
        <li><a name="author-li" class="inactive-li" onclick="openNav(event, 'Albumes')">Albumes</a></li>
        <li><a name="author-li" class="inactive-li" onclick="openNav(event, 'Publicaciones')">Publicaciones</a></li>
        <% if (bool_info.comm_bool) {%> <li><a name="author-li" class="inactive-li" onclick="openNav(event, 'Comisiones')">‚≠ê Comisiones abiertas! </a></li> <%} %>

        <% if (bool_info.req_bool) {%> <li><a name="author-li" class="inactive-li" onclick="openNav(event, 'Request')">üßæ Requests abiertas!</a></li><%} %>
      </ul>
    </nav>

    <% if (bool_info.match) { %>
    <div class="lift_left">
      <a href="/manage/perfil">Editar</a>
    </div>
    <% } else { %>
    <div class="lift_left"></div>
  </div>
  <% } %>

  </div>

  <div id="Home" class="tabcontent" style="display: block;">
    <div class="home_recents_container">
      <div class="img_sh_title">
        <hr class="hr_left">
        <label>ILUSTRACIONES RECIENTES</label>
        <hr class="hr_right">
      </div>
      <div class="container" id="Home" onload="myFunction()">
        <% if (AuthorIllusts) { %>
        <% if (bool_info.has_only_one_il) { %>
        <div class="image">
          <a class="card__a" href="/illusts/<%= AuthorIllusts.id %>" style="width: 200px; height: 200px;">
            <img class="image__img" src="/images<%= AuthorIllusts.thumb_dir %>">
            <div class="image__overlay">
              <div class="image__title">
                <% if (AuthorIllusts.title.length > 5 ) { %>
                <%= AuthorIllusts.title.slice(0, 5) %>...
                <% } else { %>
                <%= AuthorIllusts.title %>
                <% } %>
              </div>
            </div>
          </a>
        </div>
        <% } else if(AuthorIllusts.length > 9) { %>
        <% for( let i = 0; i < 9; i++ ) { %>
        <div class="image">
          <a class="card__a" href="/illusts/<%= AuthorIllusts[i].id %>" style="width: 200px; height: 200px;">
            <img class="image__img" src="/images<%= AuthorIllusts[i].thumb_dir %>">
            <div class="image__overlay">
              <div class="image__title">
                <% if (AuthorIllusts[i].title.length > 5 ) { %>
                <%= AuthorIllusts[i].title.slice(0, 5) %>...
                <% } else { %>
                <%= AuthorIllusts[i].title %>
                <% } %>
              </div>
            </div>
          </a>
        </div>
        <% } %>
        <% } else if(AuthorIllusts.length < 9) { %>
        <% for( let i = 0; i < AuthorIllusts.length; i++ ) { %>
        <div class="image">
          <a class="card__a" href="/illusts/<%= AuthorIllusts[i].id %>" style="width: 200px; height: 200px;">
            <img class="image__img" src="/images<%= AuthorIllusts[i].thumb_dir %>">
            <div class="image__overlay">
              <div class="image__title">
                <% if (AuthorIllusts[i].title.length > 5 ) { %>
                <%= AuthorIllusts[i].title.slice(0, 5) %>...
                <% } else { %>
                <%= AuthorIllusts[i].title %>
                <% } %>
              </div>
            </div>
          </a>
        </div>
        <% } %>
        <% } %>
        <% } else { %>
        <div class="image">
          <label for="">A√öN NO HA PUBLICADO NADA :p</label>
        </div>
        <% } %>
      </div>
    </div>
    <div class="ile_container">
      <div class="ile_left">
        <div class="img_sh_title">
          <hr class="hr_left">
          <label>ME GUSTA</label>
          <hr class="hr_right">
        </div>
        <div class="container">
          <% if (bool_info.single_album) { %>
          <% if (album_illusts) { %>
          <% if (album_illusts.illust_id) { %>
          <div class="image">
            <a class="card__a" href="/illusts/<%= album_illusts.illust_id %>" style="width: 200px; height: 200px;">
              <img class="image__img" src="/images<%= album_illusts.thumb_dir.slice(1,album_illusts.thumb_dir.length) %>">
              <div class="image__overlay">
                <div class="image__title">
                  <% if (album_illusts.title.length > 5 ) { %>
                  <%= album_illusts.title.slice(0, 5) %>...
                  <% } else { %>
                  <%= album_illusts.title %>
                  <% } %>
                </div>
                <div class="author__line">
                  <a class="author__button" href="/user/<%= album_illusts.author_id %> ">
                    <img class="author__img" src="/images<%= album_illusts.profile_pic_dir.slice(1,album_illusts.profile_pic_dir.length)%>" alt="">
                    <p class="author__name"><%= album_illusts.nickname %> </p>
                  </a>
                </div>
              </div>
            </a>
          </div>
          <% } else { %>
          <% for( let u = 0; u < album_illusts.length; u++ ) { %>
          <div class="image">
            <a class="card__a" href="/illusts/<%= album_illusts[u].illust_id %>" style="width: 200px; height: 200px;">
              <img class="image__img" src="/images<%= album_illusts[u].thumb_dir.slice(1,album_illusts[u].thumb_dir.length) %>">
              <div class="image__overlay">
                <div class="image__title">
                  <% if (album_illusts[u].title.length > 5 ) { %>
                  <%= album_illusts[u].title.slice(0, 5) %>...
                  <% } else { %>
                  <%= album_illusts[u].title %>
                  <% } %>
                </div>
                <div class="author__line">
                  <a class="author__button" href="/user/<%= album_illusts[u].author_id %> ">
                    <img class="author__img" src="/images<%= album_illusts[u].profile_pic_dir.slice(1,album_illusts[u].profile_pic_dir.length)%>" alt="">
                    <p class="author__name"><%= album_illusts[u].nickname %> </p>
                  </a>
                </div>
              </div>
            </a>
          </div>
          <% } %>
          <% } %>
          <% } %>
          <% } else { %>
          <% for( let i = 0; i < albums_info.length; i++ ) { %>
          <% if (albums_info[i].album_name == 'Favorites') { %>
          <% for( let u = 0; u < album_illusts[i].illusts.length; u++ ) { %>
          <div class="image">
            <a class="card__a" href="/illusts/<%= album_illusts[i].illusts[u].id %>" style="width: 200px; height: 200px;">
              <img class="image__img" src="/images<%= album_illusts[i].illusts[u].thumb_dir %>">
              <div class="image__overlay">
                <div class="image__title">
                  <% if (album_illusts[i].illusts[u].title.length > 5 ) { %>
                  <%= album_illusts[i].illusts[u].title.slice(0, 5) %>...
                  <% } else { %>
                  <%= album_illusts[i].illusts[u].title %>
                  <% } %>
                </div>
              </div>
            </a>
          </div>
          <% } %>
          <% } %>
          <% } %>
          <% } %>
        </div>
      </div>
      <div class="ile_right">
        <div class="img_sh_title">
          <hr class="hr_left">
          <label>INFORMACI√ìN</label>
          <hr class="hr_right">
        </div>
      </div>
    </div>
  </div>

  <div id="Ilustraciones" class="tabcontent">
    <div class="illusts_container">
      <div class="img_sh_title">
        <hr class="hr_left">
        <label>ILUSTRACIONES</label>
        <hr class="hr_right">
      </div>
    </div>
    <div class="container">
      <% if (AuthorIllusts) { %>
      <% if (bool_info.has_only_one_il) { %>
      <div class="image">
        <a class="card__a" href="/illusts/<%= AuthorIllusts.id %>" style="width: 300px; height: 200px;">
          <div class="image__img_w" style="background-image: url(/images/<%=AuthorIllusts.thumb_dir%>);"></div>
          <div class="image__overlay">
            <div class="image__title">
              <% if (AuthorIllusts.title.length > 6 ) { %>
              <%= AuthorIllusts.title.slice(0, 6) %>...
              <% } else { %>
              <%= AuthorIllusts.title %>
              <% } %>
            </div>
          </div>
        </a>
      </div>
      <% } else if(AuthorIllusts.length > 1) { %>
      <% for( let i = 0; i < AuthorIllusts.length; i++ ) { %>
      <div class="image">
        <a class="card__a" href="/illusts/<%= AuthorIllusts[i].id %>" style="width: 300px; height: 200px;">

          <div class="image__img_w" style="background-image: url(/images/<%=AuthorIllusts[i].thumb_dir%>);"></div>
          <div class="image__overlay">
            <div class="image__title">
              <% if (AuthorIllusts[i].title.length > 6 ) { %>
              <%= AuthorIllusts[i].title.slice(0, 6) %>...
              <% } else { %>
              <%= AuthorIllusts[i].title %>
              <% } %>
            </div>
          </div>
        </a>
      </div>
      <% } %>
      <% } %>
      <% } else { %>
      <div class="image">
        <label for="">A√öN NO HA PUBLICADO NADA :p</label>
      </div>
      <% } %>
    </div>
  </div>

  <div id="Albumes" class="tabcontent">
    <div class="albums_container">
      <div class="img_sh_title">
        <hr class="hr_left">
        <label>ALBUMES</label>
        <hr class="hr_right">
      </div>
      <div class="album__thumb__container">
        <% if(bool_info.single_album ) {%>
        <% if (has_illusts[0]) { %>
        <a onclick="openAlbum(event, `Favorites`)" style="cursor: pointer;" name="albums-card">
          <div class="album__card">
            <div class="album__image" style="background-image: url(/images/<%=albums_info.thumb%>);"></div>
            <div class="title__label">
              <label>+ <%= albums_info.album_name %></label>
              <p><%= albums_info.album_id %></p>
            </div>
          </div>
        </a>
        <% } %>
        <% }else{ %>
        <% for( let i = 0; i < albums_info.length; i++ ) { %>
        <% if (has_illusts[i]) { %>
        <a onclick="openAlbum(event, `${albums_info[i].album_name}`)" name="albums-card">
          <div class="album__card">
            <div class="album__image" style="background-image: url(/images/<%=albums_info[i].thumb%>);"></div>
            <div class="title__label">
              <label for="">* <%= albums_info[i].album_name %></label>
              <p><%= albums_info[i].album_id%></p>
            </div>
          </div>
        </a>
        <% } %>
        <% } %>
        <% } %>
      </div>
      <div class="img_sh_title">
        <hr class="hr_left">
        <label>COLECCI√ìN</label>
        <hr class="hr_right">
      </div>
      <!-- ALBUMES TOGGLE POR CLICK EN ALBUM -->
      <% if(bool_info.single_album) { %>
      <!-- CUANDO HAY UN SOLO ALBUM MOSTRAR ESE ALBUM A LA PRIMERA -->
      <div class="container__il" id="Favorites" styles="display: flex;">
        <% if (album_illusts.illust_id) { %>
        <div class="image">
          <a class="card__a" href="/illusts/<%= album_illusts.illust_id %>" style="width: 200px; height: 200px;">
            <img class="image__img" src="/images<%= album_illusts.thumb_dir.slice(1,album_illusts.thumb_dir.length) %>">
            <div class="image__overlay">
              <div class="image__title">
                <% if (album_illusts.title.length > 5 ) { %>
                <%= album_illusts.title.slice(0, 5) %>...
                <% } else { %>
                <%= album_illusts.title %>
                <% } %>
              </div>
              <div class="author__line">
                <a class="author__button" href="/user/<%= album_illusts.author_id %> ">
                  <img class="author__img" src="/images<%= album_illusts.profile_pic_dir.slice(1,album_illusts.profile_pic_dir.length)%>" alt="">
                  <p class="author__name"><%= album_illusts.nickname %> </p>
                </a>
              </div>
            </div>
          </a>
        </div>
        <% } else { %>
        <% for( let u = 0; u < album_illusts.length; u++ ) { %>
        <div class="image">
          <a class="card__a" href="/illusts/<%= album_illusts[u].illust_id %>" style="width: 200px; height: 200px;">
            <img class="image__img" src="/images<%= album_illusts[u].thumb_dir.slice(1,album_illusts[u].thumb_dir.length) %>">
            <div class="image__overlay">
              <div class="image__title">
                <% if (album_illusts[u].title.length > 5 ) { %>
                <%= album_illusts[u].title.slice(0, 5) %>...
                <% } else { %>
                <%= album_illusts[u].title %>
                <% } %>
              </div>
              <div class="author__line">
                <a class="author__button" href="/user/<%= album_illusts[u].author_id %> ">
                  <img class="author__img" src="/images<%= album_illusts[u].profile_pic_dir.slice(1,album_illusts[u].profile_pic_dir.length)%>" alt="">
                  <p class="author__name"><%= album_illusts[u].nickname %> </p>
                </a>
              </div>
            </div>
          </a>
        </div>
        <% } %>
        <% } %>
      </div>
      <% } else { %>
      <!-- CUANDO HAY MAS DE UN ALBUM, MOSTRAR EL PRIMERO, Y LOS DEMAS EN MODO OCULTO -->
      <div class="container__il" id="Favorites" styles="display: flex;">
        <% for( let u = 0; u < album_illusts[0].length; u++ ) { %>
        <div class="image">
          <a class="card__a" href="/illusts/<%= album_illusts[0][u].illust_id %>" style="width: 200px; height: 200px;">
            <img class="image__img" src="/images<%= album_illusts[0][u].thumb_dir.slice(1,album_illusts[0][u].thumb_dir.length) %>">
            <div class="image__overlay">
              <div class="image__title">
                <% if (album_illusts[0][u].title.length > 5 ) { %>
                <%= album_illusts[0][u].title.slice(0, 5) %>...
                <% } else { %>
                <%= album_illusts[0][u].title %>
                <% } %>
              </div>
            </div>
          </a>
        </div>
        <% } %>
      </div>
      <% for( let i = 1; i < album_illusts.length; i++ ) { %>
      <div class="container__il" id="Favorites">
        <% for( let u = 0; u < album_illusts[i].length; u++ ) { %>
        <div class="image">
          <a class="card__a" href="/illusts/<%= album_illusts[i][u].illust_id %>" style="width: 200px; height: 200px;">
            <img class="image__img" src="/images<%= album_illusts[i][u].thumb_dir.slice(1,album_illusts[i][u].thumb_dir.length) %>">
            <div class="image__overlay">
              <div class="image__title">
                <% if (album_illusts[i][u].title.length > 5 ) { %>
                <%= album_illusts[i][u].title.slice(0, 5) %>...
                <% } else { %>
                <%= album_illusts[i][u].title %>
                <% } %>
              </div>
            </div>
          </a>
        </div>
        <% } %>
      </div>
      <% } %>
      <% } %>
    </div>

  </div>

  <div id="Publicaciones" class="tabcontent">
    <div class="posts_container">
      <div class="img_sh_title">
        <hr class="hr_left">
        <label>POSTS</label>
        <hr class="hr_right">
      </div>
      <div class="posts__class">
        <div class="post__form">
          <h3>Nueva publicaci√≥n</h3>
          <form action="">
            <textarea name="" id="" cols="30" rows="10"></textarea>
            <input type="submit" value="Publicar">
          </form>
        </div>
        <div class="post__history">
          <div class="post__card">
            <label for="">Este es un post</label>
            <label for="">Este es el contenido</label>
          </div>
          <div class="post__card">
            <label for="">Este es un post</label>
            <label for="">Este es el contenido</label>
          </div>
          <div class="post__card">
            <label for="">Este es un post</label>
            <label for="">Este es el contenido</label>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div id="Comisiones" class="tabcontent">
    <div class="comms_container">
      <div class="img_sh_title">
        <hr class="hr_left">
        <label>COMISIONES</label>
        <hr class="hr_right">
      </div>
      <div class="container">
        <form method="POST" action="/user/post-commission" class="commission_form">

          <% const date = new Date();

          let day = date.getDate();
          let month = date.getMonth() + 1;
          let year = date.getFullYear();

          // This arrangement can be altered based on how we want the date's format to appear.
          let currentDate = `${day}-${month}-${year}`; // "17-6-2022" 
          %>

          <div class="commision_form">
            <div class="details">
              <label>Details <strong>*</strong></label>
              <br>
              <textarea placeholder="Put here the details..." class="input_detail" name="details" required id="details" cols="50" rows="12"></textarea>
            </div>
            <div class="deliver_date">
              <label>Commision Deliver <strong>*</strong></label>
              <br>
              <input class="input_deliver_date" required type="date" name="comm_deliver_date" id="current_date">
            </div>

            <input hidden type="text" name="author_id" value="<%= AuthorData.author_id %> ">
            <input hidden type="text" name="commissioner_id" value="<%= LoginData.author_id  %>">
          </div>

          <input class="button_commission" onclick="fun()" type="submit" value="Realizar Pedido">

        </form>
      </div>
    </div>
  </div>

  <div id="Request" class="tabcontent">
    <div class="request_container">
      <div class="img_sh_title">
        <hr class="hr_left">
        <label>REQUESTS</label>
        <hr class="hr_right">
      </div>
      <div class="container">
        <!--el for de las requests-->
      </div>
    </div>
  </div>
  <script src="/js/tabPane.js"></script>
</body>

</html>