#? stdtmpl(subsChar = '$', metaChar = '#')
#import xmltree, strutils, uri
#import ../types, ../formatters, ../utils
#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">
    <div class="profile-bio">
      #if profile.bio.len > 0:
      <div class="profile-bio">
        <p>${linkifyText(profile.bio)}</p>
      </div>
      #end if
    </div>

    <div class="profile-card-extra-links">
      <ul class="profile-statlist">
        <li class="tweets">
          <span class="profile-stat-header">Tweets</span>
          <span>${$profile.tweets}</span>
        </li>
        <li class="followers">
          <span class="profile-stat-header">Followers</span>
          <span>${$profile.followers}</span>
        </li>
        <li class="following">
          <span class="profile-stat-header">Following</span>
          <span>${$profile.following}</span>
        </li>
      </ul>
    </div>
  </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*(tweets: Tweets; profile: Profile; beginning: bool): string =
<div id="tweets">
  #if profile.protected:
  <div class="timeline-protected">
    <h2 class="timeline-protected-header">This account's Tweets are protected.</h2>
    <p class="timeline-protected-explanation">Only confirmed followers have access to @${profile.username}'s Tweets.</p>
  </div>
  #end if
  #if not beginning:
  <div class="show-more status-el">
    <a href="/${profile.username}">Load newest tweets</a>
  </div>
  #end if
  #var retweets: Tweets
  #for tweet in tweets:
    #if tweet in retweets: continue
    #elif tweet.retweetBy.isSome: retweets.add tweet
    #end if
    ${renderTweet(tweet, "timeline-tweet")}
  #end for
  #if tweets.len > 0:
  <div class="show-more">
    #let retweet = tweets[^1].retweetId.get("")
    #let id = if retweet.len > 0: retweet else: tweets[^1].id
    <a href="/${profile.username}?after=${$id}">Load older tweets</a>
  </div>
  #else:
  <div class="timeline-protected">
    <h2 class="timeline-protected-header" style="text-align: center;">No tweets found.</h2>
  </div>
  #end if
</div>
#end proc
#
#proc renderProfile*(profile: Profile; tweets: Tweets; beginning: bool): string =
<div class="profile-tabs">
  <div class="profile-banner">
    ${renderBanner(profile)}
  </div>
  <div class="profile-tab">
    ${renderProfileCard(profile)}
  </div>
  <div class="timeline-tab">
    ${renderTimeline(tweets, profile, beginning)}
  </div>
</div>
#end proc
#
#proc renderConversation*(conversation: Conversation): string =
<div class="conversation" id="tweets">
  <div class="main-thread">
    #if conversation.before.len > 0:
    <div class="before-tweet">
      #for tweet in conversation.before:
      ${renderTweet(tweet)}
      #end for
    </div>
    #end if
    <div class="main-tweet">
      ${renderTweet(conversation.tweet)}
    </div>
    #if conversation.after.len > 0:
    <div class="after-tweet">
      #for tweet in conversation.after:
      ${renderTweet(tweet)}
      #end for
    </div>
    #end if
  </div>
  #if conversation.replies.len > 0:
  <div class="replies">
    #for thread in conversation.replies:
    <div class="thread">
      #for tweet in thread:
      ${renderTweet(tweet)}
      #end for
    </div>
    #end for
  </div>
  #end if
  </div>
</div>
#end proc