{% extends 'auth-base.html' %}
{% load static %}
{% load humanize %}
{% load widget_tweaks %}
{% load embed_video_tags %}

{% block title %} User Dashboard {% endblock title %}

{% block content %}

    <!-- scroll-to-top start -->
    <div class="scroll-to-top">
        <span class="scroll-icon">
          <i class="fa fa-rocket" aria-hidden="true"></i>
        </span>
      </div>
      <!-- scroll-to-top end -->
  
    <div class="full-wh">
      <!-- STAR ANIMATION -->
      <div class="bg-animation">
        <div id='stars'></div>
        <div id='stars2'></div>
        <div id='stars3'></div>
        <div id='stars4'></div>
      </div><!-- / STAR ANIMATION -->
    </div>
    <div class="page-wrapper">
        <!-- header-section start  -->
    <header class="header">
      <div class="header__bottom">
        <div class="container">
          <nav class="navbar navbar-expand-xl p-0 align-items-center">
            <a class="site-logo site-title" href="{% url 'userdashboard:login' %}"><img src="https://res.cloudinary.com/daniela1/image/upload/v1699125102/logo_zmipkr.png" alt="site-logo"></a>
            <div id="google_translate_element"></div>
  
  <script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
  }
  </script>
  
  <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
            <ul class="account-menu responsive-account-menu ml-3">
                
                          <li class="icon"><a href="{% url 'userdashboard:user_profile' %}"><i class="las la-user"></i></a></li>
                        </ul> 
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="menu-toggle"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav main-menu ml-auto">
                <li> <a href="{% url 'userdashboard:user_profile' %}">Dashboard</a></li>
                <li><a href="{% url 'userdashboard:account_details' %}">Investment</a></li>
                <li><a href="{% url 'userdashboard:make_deposit' %}">Deposit</a></li>
                <li><a href="{% url 'userdashboard:request_withdraw' %}">Withdraw</a></li>
                <li><a href="{% url 'userdashboard:account_details' %}">Transactions</a></li>
                <li class="menu_has_children"><a href="#0">Referrals</a>
                  <ul class="sub-menu">
                    <li><a href="{% url 'userdashboard:account_details' %}">Referred Users</a></li>
                  </ul>
                </li>
                <li class="menu_has_children"><a href="#0">Account</a>
                  <ul class="sub-menu">
                    <li><a href="{% url 'userdashboard:update_wallet' id %}">Update Wallet</a></li>
                                      <li><a href="{% url 'password_change' %}">Change Password</a></li>
                    <li><a href="{% url 'zeeprimeapp:contact_us' %}">Get Support</a></li>
                    <li><a href="{% url 'userdashboard:logout' %}"> Logout</a></li>
                  </ul>
                </li>
              </ul>
              <div class="nav-right">
                <ul class="account-menu ml-3">
                                  <li class="icon"><a href="{% url 'userdashboard:user_profile' %}"><i class="las la-user"></i></a></li>
                                </ul>  
              </div>
            </div>
          </nav>
        </div>
      </div><!-- header__bottom end -->
    </header>
    <!-- header-section end  -->
  
      <!-- inner hero start -->
      <section class="inner-hero bg_img" data-background="https://res.cloudinary.com/daniela1/image/upload/v1664313966/IMG2_dhqgdk.jpg">
        <div class="container">
          <div class="row">
            <div class="col-lg-6">
              <h2 class="page-title">Dashboard</h2>
              <ul class="page-breadcrumb">
                <li><a href="{% url 'zeeprimeapp:home' %}">Home</a></li>
                <li>Dashboard ... {{hours}}</li>
              </ul>
            </div>
          </div>
        </div>
      </section>
      <!-- inner hero end -->
   <div class="row">
            <div class="col-lg-6">
          <button type="button" onclick="window.location='/account/user/make-deposit/'">Deposit Now</button> <button type="button2" onclick="window.location='/account/user/withdraw-balance/'">Withdraw Now</button> <button type="button" onclick="window.location='/account/user/make-deposit/'">Invest Now</button>
          </div>
  
  <div style="height:62px; background-color: #1D2330; overflow:hidden; box-sizing: border-box; border: 1px solid #282E3B; border-radius: 4px; text-align: right; line-height:14px; block-size:62px; font-size: 12px; font-feature-settings: normal; text-size-adjust: 100%; box-shadow: inset 0 -20px 0 0 #262B38;padding:1px;padding: 0px; margin: 0px; width: 100%;"><div style="height:40px; padding:0px; margin:0px; width: 100%;"><iframe src="https://widget.coinlib.io/widget?type=horizontal_v2&theme=dark&pref_coin_id=1505&invert_hover=" width="100%" height="36px" scrolling="auto" marginwidth="0" marginheight="0" frameborder="0" border="0" style="border:0;margin:0;padding:0;"></iframe></div><div style="color: #626B7F; line-height: 14px; font-weight: 400; font-size: 11px; box-sizing: border-box; padding: 2px 6px; width: 100%; font-family: Verdana, Tahoma, Arial, sans-serif;"><a href="https://coinlib.io" target="_blank" style="font-weight: 500; color: #626B7F; text-decoration:none; font-size:11px">Cryptocurrency Prices</a>&nbsp;by Coinlib</div></div>
  <script defer src="https://www.livecoinwatch.com/static/lcw-widget.js"></script> <div class="livecoinwatch-widget-5" lcw-base="USD" lcw-color-tx="#ffffff" lcw-marquee-1="coins" lcw-marquee-2="movers" lcw-marquee-items="10" ></div></div>
  
  <div class="pt-80 pb-80">
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-lg-12 pl-lg-5 mt-lg-0 mt-5">
              <div class="row mb-none-30">
                <div class="col-md-12 mb-4">
                  <label>Referral Link</label>
                  <div class="input-group">
                    <input type="text" name="text" class="form-control" id="referralURL"
                    value="https://{{request.get_host}}/ref={{request.user}}/" readonly>
                    <div class="input-group-append">
                      <span class="input-group-text copytext copyBoard" id="copyBoard"> <i class="fa fa-copy"></i> </span>
                    </div>
                  </div>
                </div>
                <div class="col-xl-4 col-sm-6 mb-30">
                  <div class="d-widget d-flex flex-wrap">
                    <div class="col-8">
                      <span class="caption">ACCOUNT BALANCE</span>
                      <h4 class="currency-amount">${{current_balance|intcomma}}</h4>
                    </div>
                    <div class="col-4">
                      <div class="icon ml-auto">
                        <i class="las la-dollar-sign"></i>
                      </div>
                    </div>
                  </div><!-- d-widget-two end -->
                </div>
                <div class="col-xl-4 col-sm-6 mb-30">
                  <div class="d-widget d-flex flex-wrap">
                    <div class="col-8">
                      <span class="caption">ACTIVE DEPOSIT</span>
                      <h4 class="currency-amount">${{deposit|intcomma}}</h4>
                    </div>
                    <div class="col-4">
                      <div class="icon ml-auto">
                        <i class="las la-wallet"></i>
                      </div>
                    </div>
                  </div><!-- d-widget-two end -->
                </div>
                <div class="col-xl-4 col-sm-6 mb-30">
                  <div class="d-widget d-flex flex-wrap">
                    <div class="col-8">
                      <span class="caption">TOTAL DEPOSIT</span>
                      <h4 class="currency-amount">${{ user_earn_tran.total_deposit|intcomma }}</h4>
                    </div>
                    <div class="col-4">
                      <div class="icon ml-auto">
                        <i class="las la-cubes "></i>
                      </div>
                    </div>
                  </div><!-- d-widget-two end -->
                </div>
                <div class="col-xl-4 col-sm-6 mb-30">
                  <div class="d-widget d-flex flex-wrap">
                    <div class="col-8">
                      <span class="caption">TOTAL WITHDRAW</span>
                      <h4 class="currency-amount">${{ user_earn_tran.total_withdrawal|intcomma }}</h4>
                    </div>
                    <div class="col-4">
                      <div class="icon ml-auto">
                        <i class="las la-credit-card"></i>
                      </div>
                    </div>
                  </div><!-- d-widget-two end -->
                </div>
                <div class="col-xl-4 col-sm-6 mb-30">
                  <div class="d-widget  d-flex flex-wrap">
                    <div class="col-8">
                      <span class="caption">TOTAL EARNING</span>
                      <h4 class="currency-amount">
                        {% if balance > 0 %}
                        ${{balance|intcomma}}
                       {% else %}
                       $0.0
                       {% endif %}
                      </h4>
                    </div>
                    <div class="col-4">
                      <div class="icon ml-auto">
                        <i class="las la-cloud-download-alt"></i>
                      </div>
                    </div>
                  </div><!-- d-widget-two end -->
                </div>
                <div class="col-xl-4 col-sm-6 mb-30">
                  <div class="d-widget  d-flex flex-wrap">
                    <div class="col-8">
                      <span class="caption">LAST DEPOSIT</span>
                      <h4 class="currency-amount">${{ user_earn_tran.last_deposit|intcomma }}</h4>
                    </div>
                    <div class="col-4">
                      <div class="icon ml-auto">
                      </div>
                    </div>
                  </div><!-- d-widget-two end -->
                </div>
                <div class="col-xl-4 col-sm-6 mb-30">
                  <div class="d-widget  d-flex flex-wrap">
                    <div class="col-8">
                      <span class="caption">LAST WITHDRAW</span>
                      <h4 class="currency-amount">${{ user_earn_tran.last_withdrawal|intcomma }}</h4>
                    </div>
                    <div class="col-4">
                      <div class="icon ml-auto">
                      </div>
                    </div>
                  </div><!-- d-widget-two end -->
                </div>
                <div class="col-xl-4 col-sm-6 mb-30">
                  <div class="d-widget  d-flex flex-wrap">
                    <div class="col-8">
                      <span class="caption">JOINED</span>
                      <h4 class="currency-amount">{{request.user.date_joined}}</h4>
                    </div>
                    <div class="col-4">
                      <div class="icon ml-auto">
                      </div>
                    </div>
                  </div><!-- d-widget-two end -->
                </div>
                <div class="col-xl-4 col-sm-6 mb-30">
                  <div class="d-widget  d-flex flex-wrap">
                    <div class="col-8">
                      <span class="caption">STATUS</span>
                      <h4 class="currency-amount">ACTIVE</h4>
                    </div>
                    <div class="col-4">
                      <div class="icon ml-auto">
                      </div>
                    </div>
                  </div><!-- d-widget-two end -->
                </div>
                <div class="col-xl-4 col-sm-6 mb-30">
                  <div class="d-widget d-flex flex-wrap">
                    <div class="col-8">
                      <span class="caption">BTC/USD MARKET FUNDAMENTALS</span>
                      <!-- TradingView Widget BEGIN -->
  <div class="tradingview-widget-container">
    <div class="tradingview-widget-container__widget"></div>
    <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/BTCUSD/?exchange=BITSTAMP" rel="noopener" target="_blank"><span class="blue-text">BTCUSD Rates</span></a> by TradingView</div>
    <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js" async>
    {
    "symbol": "BITSTAMP:BTCUSD",
    "width": 250,
    "height": 200,
    "locale": "en",
    "dateRange": "12M",
    "colorTheme": "dark",
    "trendLineColor": "rgba(41, 98, 255, 1)",
    "underLineColor": "rgba(41, 98, 255, 0.3)",
    "underLineBottomColor": "rgba(41, 98, 255, 0)",
    "isTransparent": false,
    "autosize": false,
    "largeChartUrl": ""
  }
    </script>
  </div>
  <!-- TradingView Widget END -->
                    </div>
                    <div class="col-4">
                      <div class="icon ml-auto">
                      </div>
                    </div>
                  </div><!-- d-widget-two end -->
                </div>
                <div class="col-xl-4 col-sm-6 mb-30">
                  <div class="d-widget  d-flex flex-wrap">
                    <div class="col-8">
                      <span class="caption">ETH/USD MARKET FUNDAMENTALS</span>
                     <!-- TradingView Widget BEGIN -->
  <div class="tradingview-widget-container">
    <div class="tradingview-widget-container__widget"></div>
    <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/ETHUSD/?exchange=PHEMEX" rel="noopener" target="_blank"><span class="blue-text">ETHUSD Rates</span></a> by TradingView</div>
    <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js" async>
    {
    "symbol": "PHEMEX:ETHUSD",
    "width": 250,
    "height": 200,
    "locale": "en",
    "dateRange": "12M",
    "colorTheme": "dark",
    "trendLineColor": "rgba(41, 98, 255, 1)",
    "underLineColor": "rgba(41, 98, 255, 0.3)",
    "underLineBottomColor": "rgba(41, 98, 255, 0)",
    "isTransparent": false,
    "autosize": false,
    "largeChartUrl": ""
  }
    </script>
  </div>
  <!-- TradingView Widget END -->
                    </div>
                    <div class="col-4">
                      <div class="icon ml-auto">
                      </div>
                    </div>
                  </div><!-- d-widget-two end -->
                </div>
                <div class="col-xl-4 col-sm-6 mb-20">
                  <div class="d-widget  d-flex flex-wrap">
                    <div class="col-8">
                      <span class="caption">XRP/USD</span>
                      <!-- TradingView Widget BEGIN -->
  <div class="tradingview-widget-container">
    <div class="tradingview-widget-container__widget"></div>
    <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/XRPUSD/?exchange=BITFINEX" rel="noopener" target="_blank"><span class="blue-text">XRPUSD Rates</span></a> by TradingView</div>
    <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js" async>
    {
    "symbol": "BITFINEX:XRPUSD",
    "width": 250,
    "height": 200,
    "locale": "en",
    "dateRange": "12M",
    "colorTheme": "dark",
    "trendLineColor": "rgba(41, 98, 255, 1)",
    "underLineColor": "rgba(41, 98, 255, 0.3)",
    "underLineBottomColor": "rgba(41, 98, 255, 0)",
    "isTransparent": false,
    "autosize": false,
    "largeChartUrl": ""
  }
    </script>
  </div>
  <!-- TradingView Widget END -->
                    </div>
                    <div class="col-4">
                      <div class="icon ml-auto">
                        <i class="las la-shopping-cart"></i>
                      </div>
                    </div>
                  </div><!-- d-widget-two end -->
                </div>
              </div><!-- row end -->
            </div>
          </div>
        </div>
      </div>  

{% endblock content %}