<!DOCTYPE html>
<html ng-app="myApp" ng-strict-di>
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Bitmark</title>
  <link rel="stylesheet" href="/bootstrap-3.3.7-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="/bitmark/css/chatstyle.css">
  <link rel="stylesheet" href="/bitmark/css/style.css">
  <script src="/bundle.js"></script>
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-animate.min.js"></script>
  <script src="/bitmark/js/disable-scroll.min.js"></script>
  <script src="/bitmark/js/jquery.min.js"></script>
  <script src="/bitmark/js/angular.min.js"></script>
  <script src="/bitmark/js/moment.min.js"></script>
  <script src="/bitmark/js/angular-moment.min.js"></script>
  <script src="/bitmark/js/elastic.js"></script>
  <script src="/socket.io/socket.io.js"></script>
  <script src="/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> -->
  <script src="/bitmark/js/bitmark_script.js"></script>
  <script src="/bitmark/js/script.js"></script>
</head>
<body loaded="navbar" ng-cloak ng-controller="mainController">
  <nav id="navbar" class="navbar navbar-inverse navbar-fixed-top">
    <div class="topbar container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mn" aria-expanded="true">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a style="padding: 0px 20px 0px 25px;" href="http://www.bitmark.io" class="navbar-brand" href="#">
          <img id="btmid" src="/bitmark/images/bitmark-purple.png" width="45" height="45">
        </a>
      </div>
      <div id="mn" class="collapse navbar-collapse" style="padding-right: 25px;">
        <ul class="nav navbar-nav">
          <li ng-click="updateState('/bitmark/', 'home')" ng-class="state === 'home' || state.length === 24 ? 'active' : 'menu-option'">
            <a style="padding-top: 17px; padding-left: 10px; padding-right: 10px;" href="#">Home</a>
          </li>
          <li ng-click="updateState('/bitmark/', 'wallet')" ng-class="state === 'wallet' ? 'active' : 'menu-option'">
            <a style="padding-top: 17px; padding-left: 10px; padding-right: 10px;" href="#">Wallet</a>
          </li>
          <li ng-click="updateState('/bitmark/', 'profile')" ng-class="state === 'profile' ? 'active' : 'menu-option'">
            <a style="padding-top: 17px; padding-left: 10px; padding-right: 10px;" href="#">Profile</a>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
              <div class="item">
                <span ng-if="data.notifications.length > 0" class="notify-badge">{{data.notifications.amount}}</span>
                <img class="avatar-navbar" ng-src="/uploads/{{data.username}}" alt="">
              </div>
              <span title="Your reputation." class="reputation">{{data.reputation || 0}}</span>
              <span title="Your balance." class="balance">{{data.balance || 0}}</span>
            </a>
            <ul class="dropdown-menu top-right-menu">
              <li class="top-right-menu-option" ng-repeat="notification in data.notifications track by $index" ng-init="post = posts[notification.id]">
                <div ng-click="notificationClicked(notification)" id="reply" ng-style="postGlow({marks: post.marks})" class="posting"
                     style="margin-top: 5px; margin-bottom: 5px; overflow: hidden; height: 100px; width: 220px; display: inline-block; box-shadow: purple 0px 0px 0px;">
                  <img ng-src="" alt="" style="width: 100%; top: -0px;">
                  <!-- For pictures when they are allowed -->
                  <div style="position: relative; bottom: 10px"class="post-body">
                    <a href="/bitmark/users/{{post.username}}" onclick="event.stopPropagation()" target="_parent">
                      <img class="avatar" ng-src="/uploads/{{post.username}}" alt="">
                      <strong>{{post.username}}</strong>
                    </a>
                    <span class="spacer"></span>
                    <small class="time">
                      <span class="timestamp">{{post.date | amTimeAgo}}</span>
                    </small>
                    <p style="position: relative; bottom: 10px" class="post-paragraph">{{post.message}}</p>
                    <div style="float:right">
                      <button style="position: relative; bottom: 25px" type="button" class="btnMark">
                        <span class="iconMark"></span><span class="markAmnt">{{post.marks}}</span>
                      </button>
                      <div class="bcmcontainer"></div>
                    </div>
                    <div></div>
                  </div>
                </div>
              </li>
              <li class="nav-divider"></li>
              <li ng-if="data.username === 'Guest'" ng-click="$root.account_create = false" data-toggle="modal" data-target=".login-modal-sm">
                <a href="" onclick="event.preventDefault()">Log in</a>
              </li>
              <li ng-if="data.username === 'Guest'" ng-click="$root.account_create = true" data-toggle="modal" data-target=".login-modal-sm">
                <a href="" onclick="event.preventDefault()">Create account</a>
              </li>
              <li ng-if="data.username !== 'Guest'" ng-click="logout()">
                <a href="" ng-click="$event.preventDefault()">Sign Out</a>
              </li>
            </ul>
          </li>
        </ul>
        <div class="navbar-form navbar-right">
          <input id="sp" type="text" ng-model="postsFilter.message" class="form-control search-posts" placeholder="{{replyto ? 'Search Replies' : 'Search Posts'}}">
        </div>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>
  <!-- Start wallet -->
  <div ng-if="state === 'wallet'">
    <div style="margin-top: 25px; text-align: center; vertical-align: middle;">
      <div style="background-color: ghostwhite; padding: 10px; border-radius: 15px; box-shadow: inset 0px 0px 50px #8b8c8e;">
        <span title="Address"><strong>{{data.wallet}}</strong></span>
        <br />
        <span title="Balance"><strong>{{data.balance}}</strong></span>
        <br />
        <button ng-click="withdrawMarks(withdraw.amount, withdraw.address)">Withdraw</button>&nbsp;<input size="6" ng-model="withdraw.amount" placeholder="amount"> to
        <input ng-model="withdraw.address" placeholder="address" size="38">
        <br />
        <br />
        To increase your balance send Bitmarks (BTM) to your wallet address or post and get marked. <strong>1 BTM = 1000 Marks.</strong>
      </div>
      <h1 style="margin-top: 40px">Transaction history</h1>
      <div style="margin-top: 30px" ng-repeat="tran in trans">
        <div style="display: inline-block; border-radius: 7px;" ng-class="tran.type">
          <a href="http://explorer.bitmark.io/tx/{{tran.txid}}">{{tran.txid}}</a>
          <div><strong>{{tran.type === 'withdraw' ? '-' : '+'}}</strong>{{tran.amount}} {{tran.date | amTimeAgo}}</div>
        </div>
      </div>
    </div>
  </div>
  <!-- Start profile -->
  <div ng-if="state === 'profile'">
    <img class="profile-pic" ng-src="/uploads/{{data.username}}">
    <form class="inline" action="/bitmark/uploads" method="post" enctype="multipart/form-data">
      <label for="file">To change profile picture choose file:</label><br>
      <input style="display: inline-block" type="file" name="upl" ng-model="file" id="file">
      <input class="btn btn-success" type="submit" name="submit" value="Submit">
    </form>
  </div>
  <!-- Start home page -->
  <div ng-if="state === 'home' || state === replyto">
    <!-- Start selected post reply container -->
    <div ng-if="!replyto" class="comment-container">
      <img class="comment-img" ng-src="/uploads/{{data.username}}" />
      <textarea ng-focus="$event.target.style.height='120px'" ng-blur="$event.target.style.height='50px'"
                ng-keydown="$event.keyCode == 13 && !$event.shiftKey && create($event);" ng-model="data.message" class="post-textarea"
                placeholder="{{data.username == 'Guest' ? ' You need to create a FREE account to post.' : ' What would you like to post ' + data.username + '?'}}">
      </textarea>
    </div>
    <!-- Start selected post -->
    <div ng-disable-scroll="data.mouseOverSomething" class="selected-gridcell fixed-container" id="post2">
      <div ng-click="!isDisabled && select(post, $event)" ng-if="post = posts[replyto]" class="gridcell post-selected" id="post">
        <div ng-style="postGlow(post)" class="post-selected posting">
          <!-- For future use (allow images in posts), for now it just adds spacing -->
          <img ng-src="" alt="">
          <!-- <img style="max-height: {{replyto ? '620px' : '340px' }}; max-width: {{replyto ? '620px' : '340px' }};"> example to allow larger imgs ons elected post-->
          <div class="post-body">
            <a href="/bitmark/users/{{post.username}}" onclick="event.stopPropagation()" target="_parent">
              <img class="avatar" ng-src="/uploads/{{post.username}}" alt="">
              <strong>{{post.username}}</strong>
            </a>
            <span class="spacer"></span>
            <small class="time"><span class="timestamp">{{post.date | amTimeAgo}}</span></small>
            <p class="post-paragraph">{{post.message}}</p>
            <div class="fright">
              <div style="position:relative">
                <div ng-click="back($event, {'replyto': ''})" ng-if="replyto" class="x x-big"><b></b><b></b><b></b><b></b></div>
              </div>
              <div ng-click="back($event, post);" ng-if="replyto" style="float: right;" class="x"><b></b><b></b><b></b><b></b></div>
              <button ng-click="mark($event, post)" class="btnMark" onmouseleave="this.childNodes[1].style.transform = 'rotate(0deg)'" onmouseover="this.childNodes[1].style.transform = 'rotate(45deg)'">
                <span class="iconMark"></span><span class="markAmnt">{{post.marks}}</span>
              </button>
              <div class="bcmcontainer">
                <button class="btn-cancel-marking" ng-if="messageNeeded[post._id]" ng-click="cancelMarking($event, post)" class="btn-cancel-marking-shifted">
                 Cancel
                </button>
              </div>
            </div>
            <textarea class="reason-textarea" ng-model="data.marking_msg" ng-if="messageNeeded[post._id]" auto-focus ng-blur="reasonBlur(post)"
                      ng-keydown="$event.keyCode === 13 && !$event.shiftKey && mark($event, post)" placeholder="Reason? (This may be left blank)">
            </textarea>
            <div class="bcmcontainer"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- Start replies or posts container -->
    <div ng-if="replyto" class="comment-container" loaded="post">
      <img class="comment-img" ng-src="/uploads/{{data.username}}">
      <textarea ng-click="$event.target.style.height = '120px'" ng-blur="$event.target.style.height = '50px'"
                ng-model="data.message" class="post-textarea" ng-keydown="$event.keyCode === 13 && !$event.shiftKey && create($event)"
                placeholder="{{data.username === 'Guest' ? ' You need to create a FREE account to reply.' : ' What would you like to reply ' + data.username + '?'}}">
      </textarea>
    </div>
    <!-- Start replies or posts -->
    <div class="selected-gridcell">
      <div ng-click="!isDisabled && select(post, $event)" ng-repeat="post in replies[post._id || ''] | filter: postsFilter track by $index" Class="gridcell">
        <div style="display: inline-block" id="reply" ng-style="postGlow(post)" class="posting">
          <img ng-src="" alt="" style="width: 100%; top: -0px;">
          <!-- For pictures when they are allows -->
          <div class="post-body">
            <a href="/bitmark/users/{{post.username}}" onclick="event.stopPropagation()" target="_parent">
              <img class="avatar" ng-src="/uploads/{{post.username}}" alt="">
              <strong>{{post.username}}</strong>
            </a>
            <span class="spacer"></span>
            <small class="time">
              <span class="timestamp">{{post.date | amTimeAgo}}</span>
            </small>
            <p class="post-paragraph">{{post.message}}</p>
            <div style="float:right">
              <button ng-click="mark($event, post)" type="button" class="btnMark"
                      onmouseout="this.childNodes[1].style.transform = 'rotate(0deg)'" onmouseover="this.childNodes[1].style.transform = 'rotate(45deg)'">
                <span class="iconMark"></span><span class="markAmnt">{{post.marks}}</span>
              </button>
              <div class="bcmcontainer">
                <button class="btn-cancel-marking"
                        ng-if="messageNeeded[post._id]" ng-click="cancelMarking($event, post)" class="btn-cancel-marking-shifted">
                 Cancel
                </button>
              </div>
            </div>
            <textarea class="reason-textarea" ng-model="data.marking_msg" ng-if="messageNeeded[post._id]" auto-focus ng-blur="reasonBlur(post)"
                      ng-keydown="$event.keyCode == 13 && !$event.shiftKey && mark($event, post)" placeholder="Reason? (This may be left blank)">
            </textarea>
            <div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Start login modal -->
  <div id="loginModal" class="modal fade login-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
      <div style="min-width: 200px; min-height:200px; width: 20vw; height: 20vw" class="modal-content">
        <div ng-controller="loginController" id="column_container">
          <div id="row_container">
            <button class="btn btn-primary" ng-click="login()">Log In</button>
            <button class="btn btn-success" ng-click="createAccount(); !account_create && validateUsername()">Create Account</button>
          </div>
          <div ng-class="data.username.style">
            <input type="text" id="username" ng-model="data.username.value" ng-change="validateUsername()" class="form-control" placeholder="Username">
          </div> {{data.username.information}}
          <div ng-class="data.password.style">
            <input type="password" ng-model="data.password.value" ng-change="validatePassword(); validatePassword2()" class="form-control"
              ng-keydown="$event.keyCode == 13 && ( !account_create && login() || account_create && createAccount() )" placeholder="Password">
          </div> {{data.password.information}}
          <div ng-if="account_create" ng-class="data.password2.style">
            <input type="password" ng-model="data.password2.value" class="form-control" ng-change="validatePassword2()" ng-keydown="$event.keyCode == 13 && createAccount()" placeholder="Repeat Password">
          </div> {{data.password2.information}}
        </div>
      </div>
    </div>
  </div>
  <!-- Start footer -->
  <footer class="navbar-fixed-bottom" style="width: 10%; margin-left: 90vw">
    <div ng-repeat="pm in pms track by $index" class="container">
      <div ng-style="{'right': pmRightOffSet($index), 'height': pm.maximized ? '348px' : '34px'}" class="popup-box-on popup-box full-pm-window" id="qnimate">

        <div class="popup-head" ng-click="togglePmWindow(pm)">
          <div class="popup-head-left pull-left">
            <span class="pm-status" ng-class="usersOnline[pm.username].status || 'gone'"></span>
            <span class="pm-username">{{pm.username}}</span>
            <!-- User is typing dots -->
            <div ng-if="pm.istyping" id="wave">
              <span class="dot"></span>
              <span class="dot"></span>
              <span class="dot"></span>
            </div>
            <span ng-if="data.awaitingPms[pm.username]" class="pm-badge">{{data.awaitingPms[pm.username]}}</span>
          </div>
          <div class="popup-head-right pull-right">
            <div class="btn-group">
              <!-- Pm window settings button -->
              <button ng-click="data.dontMinimize = true;" class="chat-header-button" data-toggle="dropdown" type="button" aria-expanded="false">
                <a href="#" class="pm-settings-icon"></a>
              </button>
              <ul role="menu" class="dropdown-menu pull-right">
                <li><a href="#">Add media</a></li>
                <li><a href="#">Block</a></li>
                <li><a href="#">Clear Chat</a></li>
                <li><a href="#">Email Chat</a></li>
              </ul>
            </div>
            <!-- Exit pm window button -->
            <button data-widget="remove" id="removeClass" class="chat-header-button pull-right" type="button">
              <a href="#" ng-click="closePmWindow(pm); $event.stopPropagation(); $event.preventDefault()" class="pm-exit-icon"></a>
            </button>
          </div>
        </div>
        <div ng-mouseover="data.mouseOverSomething=true" ng-mouseleave="data.mouseOverSomething=false" ng-if="pm.maximized" class="popup-messages">
          <div class="direct-chat-messages" autoscroll>
            <div ng-repeat="msg in pm.history track by $index">
              <div ng-if="!sameDay(msg.date, pm.history[$index-1].date)" class="chat-box-single-line">
                <abbr class="timestamp">{{msg.date | date:'MMMM, dd yyyy'}}</abbr>
              </div>
              <div ng-if="msg.sender !== data.username && !skipSameMin()">
                <div class="direct-chat-msg doted-border">
                  <div class="direct-chat-info clearfix">
                    <span class="direct-chat-name pull-left">PM</span>
                  </div>
                  <img alt="message user image" src="/uploads/{{pm.username}}" class="direct-chat-img">
                  <div class="direct-chat-text">
                    {{getSameMin(pm.history, $index)}}
                  </div>
                  <div class="direct-chat-info clearfix">
                    <span class="direct-chat-timestamp pull-right">{{msg.date | date:'hh:mm a'}}</span>
                  </div>
                  <div ng-if="msg.ismarked || msg.sender !== pm.history[$index+skipSameMins+1].sender" class="direct-chat-info clearfix">
                    <span onmouseleave="this.childNodes[1].style.transform = 'rotate(0deg)'" onmouseover="this.childNodes[1].style.transform='rotate(45deg)'"
                          ng-click="!msg.ismarked && markPm(msg)" ng-class="{'pm-marked':msg.ismarked}" class="direct-chat-img-reply-small pull-left">
                      <span class="iconMark iconMark-pm" style="cursor: pointer"></span>
                    </span>
                     <span ng-if="msg.sender !== pm.history[$index+skipSameMins+1].sender" class="direct-chat-reply-name">{{pm.username}}</span>
                  </div>
                </div>
              </div>
              <div ng-if="msg.sender === data.username && !skipSameMin()">
                <div class="direct-chat-msg-self doted-border-self">
                  <div class="direct-chat-info clearfix">
                     <span class="direct-chat-name pull-left">PM</span>
                  </div>
                  <img alt="message user image" src="/uploads/{{data.username}}" class="direct-chat-img pull-right">
                  <div class="direct-chat-text-self">
                    {{getSameMin(pm.history, $index)}}
                  </div>
                  <div class="direct-chat-info clearfix">
                     <span class="direct-chat-timestamp pull-left">{{msg.date | date:'hh:mm a'}}</span>
                  </div>
                  <div ng-if="msg.ismarked || msg.sender !== pm.history[$index+skipSameMins+1].sender"
                       class="direct-chat-info clearfix pull right">
                    <span ng-class="{'pm-marked':msg.ismarked}" class="direct-chat-img-reply-small pull-right">
                      <span class="iconMark iconMark-pm"></span>
                     </span>
                     <span ng-if="msg.sender !== pm.history[$index+skipSameMins+1].sender" class="direct-chat-reply-name pull-right" style="margin-right: 10px;">{{data.username}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div ng-if="pm.maximized" class="popup-messages-footer">
          <textarea msd-elastic class="pm_text" ng-keydown="$event.keyCode !== 13 && startedTyping(pm); $event.keyCode === 13 && !$event.shiftKey && createPm($event, pm);"
                   auto-focus ng-model="$parent.pm.text" placeholder="{{data.username !== 'Guest' ? 'Type a message...' : 'Create an account...'}}" rows="1" name="message"></textarea>
        </div>
      </div>
    </div>
    <!-- User list button -->
    <div class="popup-userlist-tab">
      <a ng-click="popupUserlist = !popupUserlist" href="#" id="chat"><span class="glyphicon glyphicon-comment"></span> {{amountOnline}} Online</a>
    </div>
    <!-- User list -->
    <div ng-if="popupUserlist" ng-mouseover="data.mouseOverSomething=true" ng-mouseleave="data.mouseOverSomething=false" id="userlist" class="popup-userlist">
      <div class="content container-fluid bootstrap snippets" style="height: 100%; padding-bottom: 50px">
        <div class="row row-broken" style="padding: 2px; height: 100%">
          <div class="chat" style="overflow: scroll; height: 100%" tabindex="5000">
            <!-- offline, busy, online, -->
            <div class="chat-users">
              <div id="user-container">
                <div ng-if="!usersOnline[username] || usersOnline[username].status === 'offline'" style="height: 40px" ng-repeat="(username, value) in data.awaitingPms track by $index"
                     ng-click="openPmWindow({username: username})" class="user-container awaiting-pm">
                  <div class="user">
                    <div class="avatar">
                      <img class="user-list-img" src="/uploads/{{username}}" alt="{{username}}">
                      <div class="status gone"></div>
                    </div>
                    <div class="name">{{username}}</div>
                    <div class="marks"> </div>
                  </div>
                </div>
                <div ng-if="user.status !== 'offline'" ng-repeat="user in usersOnline track by $index"
                     ng-click="openPmWindow(user)" class="user-container" ng-class="{'awaiting-pm': data.awaitingPms[user.username]}">
                  <div class="user">
                    <div class="avatar">
                      <img class="user-list-img" src="/uploads/{{user.username}}" alt="{{user.username}}">
                      <div class="status" ng-class="usersOnline[user.username].status"></div>
                    </div>
                    <div class="name">{{user.username}}</div>
                    <div class="marks">{{user.balance}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="popup-userlist-tab-open">
        <a class="the-userlist-link" ng-click="data.mouseOverSomething = false; $parent.popupUserlist = !popupUserlist" href="#" id="chat"><span class="glyphicon glyphicon-comment"></span> {{amountOnline}} Online</a>
      </div>
    </div>
  </footer>
</body>
<script>
$(function(){
  // Auto focus login model input.
  $('#loginModal').on('shown.bs.modal', $("#username").focus)
})
</script>
</html>
