@extends("layouts.layout")

@section("content")
     <div class="profile">
        <div class="loader"> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div>

        <div class="profile-info hidden animated fadeIn">
        
          <div class="user-info">
        
            <div class="user-img">
              <img :src="user.statistics.avatar" alt="Avatar" />
            </div>
        
            <div class="user-details">
              <div class="user-detail">
                <h3 v-html="user.statistics.name"><h3>
                <h5 v-if="user.statistics.rank == 0"><span style='color: white'>User</span></h5>
                <h5 v-else-if="user.statistics.rank == 1"><span style='color: #7442ff'>MOD</span></h5>
                <h5 v-else-if="user.statistics.rank == 100"><span style='color: #9f73eb'>ADMIN</span></h5>
                <h5 v-else-if="user.statistics.rank == 10"><i style='color: #9f73eb' class='fab fa-youtube'></i></h5>
                <h5 v-else-if="user.statistics.rank == 11"><i style='color: #2196F3;' class='fab fa-twitter'></i></h5>
                <h5 v-else-if="user.statistics.rank == 12"><i style='color: #4B367C;' class='fab fa-twitch'></i></h5>
                <h5 v-else><span style='color: #5292f9;'>SPONSOR </span></h5>
              </div>
        
              <p class="xp-info">LEVEL 10 / 300XP LEFT FOR LEVEL 11</p>
              <div class="xp-bar">
                <div class="xp-fill">
                </div>
              </div>
        
            </div>
          </div>
        
          <div class="user-graph">
          </div>
        
        <div class="user-stats">
            <div class="user-stat">
                <h4>Wagered</h4>
                <h5 class="profile_wagered">0</h5>
            </div>
            <div class="user-stat" style="margin-top: 10px; margin-bottom: 10px;">
                <h4>Won</h4>
                <h5 class="profile_won">0</h5>
            </div>
            <div class="user-stat">
                <h4>Profit</h4>
                <h5 class="profile_profit"></h5>
            </div>
        </div>
        
        </div>
        
        <div class="history hidden animated fadeIn">
        
        <div class="history-tabs">
          <a class="profileGoto" data-go="transactions">
            TRANSACTIONS
          </a>
        </div>
        
        
          <table class="history-table active-table" data-id="transactions">
            <tr>
              <th>TID</th>
              <th>DATE</th>
              <th>TYPE</th>
              <th>STATUS</th>
              <th>VALUE</th>
            </tr>
            <tbody id="transactionsHistory"></tbody>
          </table>
        
        </div>
        
        </div>
        
        </div>
        
@endsection