#? stdtmpl(subsChar = '$', metaChar = '#')
#import xmltree, strutils, uri
#import ../types, ../formatters, ../utils, ../search
#include "tweet.nimf"
#
#proc renderProfileCard*(profile: Profile): string =
<div class="profile-card">
  <a class="profile-card-avatar" href="${profile.getUserPic().getSigUrl("pic")}">
    ${genImg(profile.getUserpic("_200x200"))}
  </a>
  <div class="profile-card-tabs">
    <div class="profile-card-tabs-name">
      ${linkUser(profile, class="profile-card-fullname")}
      ${linkUser(profile, class="profile-card-username")}
    </div>
  </div>
  <div class="profile-card-extra">
    #if profile.bio.len > 0:
    <div class="profile-bio">
      <p>${linkifyText(profile.bio)}</p>
    </div>
    #end if

    <div class="profile-card-extra-links">
      <ul class="profile-statlist">
        <li class="tweets">
          <span class="profile-stat-header">Tweets</span>
          <span class="profile-stat-num">${$profile.tweets}</span>
        </li>
        <li class="followers">
          <span class="profile-stat-header">Followers</span>
          <span class="profile-stat-num">${$profile.followers}</span>
        </li>
        <li class="following">
          <span class="profile-stat-header">Following</span>
          <span class="profile-stat-num">${$profile.following}</span>
        </li>
      </ul>
    </div>
  </div>
</div>
#end proc
#
#proc renderPhotoRail(username: string; photoRail: seq[GalleryPhoto]): string =
<div class="photo-rail-card">
  <div class="photo-rail-heading">
    <a href="/${username}/media">🖼 Photos and videos</a>
  </div>
  <div class="photo-rail-grid">
    #for i, photo in photoRail:
    #if i == 20: break
    #end if
    <a href="/${username}/status/${photo.tweetId}" style="${photo.color}">
      <img src=${getSigUrl(photo.url & ":thumb", "pic")}></img>
    </a>
    #end for
  </div>
</div>
#end proc
#
#proc renderBanner(profile: Profile): string =
#if "#" in profile.banner:
<div style="${profile.banner}" class="profile-banner-color"></div>
#else:
#let url = getSigUrl(profile.banner, "pic")
<a href="${url}">${genImg(profile.banner)}</a>
#end if
#end proc
#
#proc renderTimeline*(timeline: Timeline; profile: Profile; beginning: bool): string =
#var retweets: seq[string]
#var query = "?"
#if timeline.query.isSome: query = genQueryUrl(get(timeline.query))
#end if
<div id="tweets">
  #if not beginning:
  <div class="show-more status-el">
    <a href="/${profile.username}${query.strip(chars={'?'})}">Load newest tweets</a>
  </div>
  #end if
  #
  #for tweet in timeline.tweets:
  #if tweet.id in retweets: continue
  #elif tweet.retweet.isSome: retweets.add tweet.id
  #end if
  ${renderTweet(tweet, "timeline-tweet")}
  #end for
  #
  #if timeline.hasMore or timeline.query.isSome and timeline.tweets.len > 0:
  <div class="show-more">
    <a href="/${profile.username}${query}after=${timeline.minId}">Load older tweets</a>
  </div>
  #elif timeline.tweets.len > 0:
  <div class="timeline-footer">
    <h2 class="timeline-end" style="text-align: center;">No more tweets.</h2>
  </div>
  #else:
  <div class="timeline-header">
    #if profile.protected:
    <h2 class="timeline-protected">This account's tweets are protected.</h2>
    <p>Only confirmed followers have access to @${profile.username}'s tweets.</p>
    #else:
    <h2 class="timeline-none" style="text-align: center;">No tweets found.</h2>
    #end if
  </div>
  #end if
</div>
#end proc
#
#proc renderProfile*(profile: Profile; timeline: Timeline;
#                    photoRail: seq[GalleryPhoto]; beginning: bool): string =
<div class="profile-tabs">
  <div class="profile-banner">
    ${renderBanner(profile)}
  </div>
  <div class="profile-tab">
    ${renderProfileCard(profile)}
    #if photoRail.len > 0:
    ${renderPhotoRail(profile.username, photoRail)}
    #end if
  </div>
  <div class="timeline-tab">
    #let link = "/" & profile.username
    <ul class="tab">
      <li class=${timeline.tabClass("tweets")}><a href="${link}">Tweets</a></li>
      <li class=${timeline.tabClass("replies")}><a href="${link}/replies">Tweets & Replies</a></li>
      <li class=${timeline.tabClass("media")}><a href="${link}/media">Media</a></li>
      #discard "<li class=tab-item><a href=${link}/search>Custom</a></li>"
    </ul>
    ${renderTimeline(timeline, profile, beginning)}
  </div>
</div>
#end proc
#
#proc renderConversation*(conversation: Conversation): string =
<div class="conversation" id="tweets">
  <div class="main-thread">
    #if conversation.before != nil:
    <div class="before-tweet thread-line">
      #for i, tweet in conversation.before.tweets:
        ${renderTweet(tweet, first=(i == 0))}
      #end for
    </div>
    #end if
    <div class="main-tweet">
      #let afterClass = if conversation.after != nil: "thread thread-line" else: ""
      ${renderTweet(conversation.tweet, class=afterClass)}
    </div>
    #if conversation.after != nil:
    <div class="after-tweet thread-line">
      #for i, tweet in conversation.after.tweets:
      ${renderTweet(tweet, first=(i == 0), last=(i == conversation.after.tweets.high))}
      #end for
    </div>
    #end if
  </div>
  #if conversation.replies.len > 0:
  <div class="replies">
    #for thread in conversation.replies:
    <div class="reply thread thread-line">
      #for i, tweet in thread.tweets:
      #let last = (i == thread.tweets.high and thread.more == 0)
      ${renderTweet(tweet, first=(i == 0), last=last)}
      #end for
      #if thread.more != 0:
      #let num = if thread.more != -1: $thread.more & " " else: ""
      <div class="status-el more-replies">
        #let reply = if thread.more == 1: "reply" else: "replies"
        <a class="more-replies-text" title="Not implemented yet">${num}more ${reply}</a>
      </div>
      #end if
    </div>
    #end for
  </div>
  #end if
  </div>
</div>
#end proc