{% extends "base_dashboard_user.html" %}
{% load gravatar %}
{% load static %}
{% load ratings %}
{% block style %}
<style>
  .modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
    -webkit-animation-name: fadeIn;
    /* Fade in the background */
    -webkit-animation-duration: 0.4s;
    animation-name: fadeIn;
    animation-duration: 0.4s
  }

  /* Modal Content */
  .wallet-modal-content {
    position: fixed;
    bottom: 0;
    background-color: #fefefe;
    width: 100%;
    -webkit-animation-name: slideIn;
    -webkit-animation-duration: 0.4s;
    animation-name: slideIn;
    animation-duration: 0.4s
  }

  /* The Close Button */
  .close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }

  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }

  .wallet-modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
  }

  .wallet-modal-body {
    padding: 2px 16px;
  }

  .wallet-modal-footer {
    padding: 2px 16px;
    < !-- background-color: #5cb85c;
    -->color: white;
  }

  .withdraw_button {
    float: right;
    margin: -13px 10px 20px;
  }

  /* Add Animation */
  @-webkit-keyframes slideIn {
    from {
      bottom: -300px;
      opacity: 0
    }

    to {
      bottom: 0;
      opacity: 1
    }
  }

  @keyframes slideIn {
    from {
      bottom: -300px;
      opacity: 0
    }

    to {
      bottom: 0;
      opacity: 1
    }
  }

  @-webkit-keyframes fadeIn {
    from {
      opacity: 0
    }

    to {
      opacity: 1
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0
    }

    to {
      opacity: 1
    }
  }

  :root {
    --body-color: rgb(247, 250, 252);
    --button-color: rgb(30, 166, 114);
    --accent-color: #0a721b;
    --link-color: #ffffff;
    --font-color: rgb(105, 115, 134);
    --body-font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    --radius: 6px;
    --form-width: 400px;
  }

  /* Base */
  * {
    box-sizing: border-box;
  }

  body {
    font-family: var(--body-font-family);
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
  }

  /* Layout */
  .sr-root {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 980px;
    padding: 48px;
    align-content: center;
    justify-content: center;
    height: auto;
    min-height: 100vh;
    margin: 0 auto;
  }

  .sr-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    align-self: center;
    padding: 75px 50px;
    background: var(--body-color);
    width: var(--form-width);
    border-radius: var(--radius);
    box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1),
      0px 2px 5px 0px rgba(50, 50, 93, 0.1),
      0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
  }

  .sr-field-error {
    color: var(--font-color);
    text-align: left;
    font-size: 13px;
    line-height: 17px;
    margin-top: 12px;
  }

  /* Inputs */
  .sr-input,
  input[type="text"] {
    border: 1px solid var(--gray-border);
    border-radius: var(--radius);
    padding: 5px 12px;
    height: 44px;
    width: 100%;
    transition: box-shadow 0.2s ease;
    background: white;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
  }

  .sr-input:focus,
  input[type="text"]:focus,
  button:focus,
  .focused {
    box-shadow: 0 0 0 1px rgba(50, 151, 211, 0.3), 0 1px 1px 0 rgba(0, 0, 0, 0.07),
      0 0 0 4px rgba(50, 151, 211, 0.3);
    outline: none;
    z-index: 9;
  }

  .sr-input::placeholder,
  input[type="text"]::placeholder {
    color: var(--gray-light);
  }

  .sr-result {
    height: 44px;
    -webkit-transition: height 1s ease;
    -moz-transition: height 1s ease;
    -o-transition: height 1s ease;
    transition: height 1s ease;
    color: var(--font-color);
    overflow: auto;
  }

  .sr-result code {
    overflow: scroll;
  }

  .sr-result.expand {
    height: 350px;
  }

  .sr-combo-inputs-row {
    box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1),
      0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
    border-radius: 7px;
  }

  /* Buttons and links */
  button {
    background: var(--accent-color);
    border-radius: var(--radius);
    color: white;
    border: 0;
    padding: 12px 16px;
    margin-top: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: block;
    box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
    width: 100%;
  }

  button:hover {
    filter: contrast(115%);
  }

  button:active {
    transform: translateY(0px) scale(0.98);
    filter: brightness(0.9);
  }

  button:disabled {
    opacity: 0.5;
    cursor: none;
  }

  a {
    color: var(--link-color);
    text-decoration: none;
    transition: all 0.2s ease;
  }

  a:hover {
    filter: brightness(0.8);
  }

  a:active {
    filter: brightness(0.5);
  }

  /* Code block */
  code,
  pre {
    font-family: "SF Mono", "IBM Plex Mono", "Menlo", monospace;
    font-size: 12px;
  }

  /* Stripe Element placeholder */
  .sr-card-element {
    padding-top: 12px;
  }

  /* Responsiveness */
  @media (max-width: 720px) {
    .sr-root {
      flex-direction: column;
      justify-content: flex-start;
      padding: 48px 20px;
      min-width: 320px;
    }

    .sr-header__logo {
      background-position: center;
    }

    .sr-payment-summary {
      text-align: center;
    }

    .sr-content {
      display: none;
    }

    .sr-main {
      width: 100%;
      height: 305px;
      background: rgb(247, 250, 252);
      box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1),
        0px 2px 5px 0px rgba(50, 50, 93, 0.1),
        0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
      border-radius: 6px;
    }
  }

  /* todo: spinner/processing state, errors, animations */

  .spinner,
  .spinner:before,
  .spinner:after {
    border-radius: 50%;
  }

  .spinner {
    color: #ffffff;
    font-size: 22px;
    text-indent: -99999px;
    margin: 0px auto;
    position: relative;
    width: 20px;
    height: 20px;
    box-shadow: inset 0 0 0 2px;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
  }

  .spinner:before,
  .spinner:after {
    position: absolute;
    content: "";
  }

  .spinner:before {
    width: 10.4px;
    height: 20.4px;
    background: var(--accent-color);
    border-radius: 20.4px 0 0 20.4px;
    top: -0.2px;
    left: -0.2px;
    -webkit-transform-origin: 10.4px 10.2px;
    transform-origin: 10.4px 10.2px;
    -webkit-animation: loading 2s infinite ease 1.5s;
    animation: loading 2s infinite ease 1.5s;
  }

  .spinner:after {
    width: 10.4px;
    height: 10.2px;
    background: var(--accent-color);
    border-radius: 0 10.2px 10.2px 0;
    top: -0.1px;
    left: 10.2px;
    -webkit-transform-origin: 0px 10.2px;
    transform-origin: 0px 10.2px;
    -webkit-animation: loading 2s infinite ease;
    animation: loading 2s infinite ease;
  }

  @-webkit-keyframes loading {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  @keyframes loading {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  /* Animated form */

  .sr-root {
    animation: 0.4s form-in;
    animation-fill-mode: both;
    animation-timing-function: ease;
  }

  .hidden {
    display: none;
  }

  @keyframes field-in {
    0% {
      opacity: 0;
      transform: translateY(8px) scale(0.95);
    }

    100% {
      opacity: 1;
      transform: translateY(0px) scale(1);
    }
  }

  @keyframes form-in {
    0% {
      opacity: 0;
      transform: scale(0.98);
    }

    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

  /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

  /* Document
========================================================================== */

  /**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/

  html {
    line-height: 1.15;
    /* 1 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
  }

  /* Sections
========================================================================== */

  /**
* Remove the margin in all browsers.
*/

  body {
    margin: 0;
  }

  /**
* Render the `main` element consistently in IE.
*/

  main {
    display: block;
  }

  /**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/

  h1 {
    font-size: 2em;
    margin: 0.67em 0;
  }

  /* Grouping content
========================================================================== */

  /**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/

  hr {
    box-sizing: content-box;
    /* 1 */
    height: 0;
    /* 1 */
    overflow: visible;
    /* 2 */
  }

  /**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/

  pre {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
  }

  /* Text-level semantics
========================================================================== */

  /**
* Remove the gray background on active links in IE 10.
*/

  a {
    background-color: transparent;
  }

  /**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/

  abbr[title] {
    border-bottom: none;
    /* 1 */
    text-decoration: underline;
    /* 2 */
    text-decoration: underline dotted;
    /* 2 */
  }

  /**
* Add the correct font weight in Chrome, Edge, and Safari.
*/

  b,
  strong {
    font-weight: bolder;
  }

  /**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/

  code,
  kbd,
  samp {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
  }

  /**
* Add the correct font size in all browsers.
*/

  small {
    font-size: 80%;
  }

  /**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/

  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  sub {
    bottom: -0.25em;
  }

  sup {
    top: -0.5em;
  }

  /* Embedded content
========================================================================== */

  /**
* Remove the border on images inside links in IE 10.
*/

  img {
    border-style: none;
  }

  /* Forms
========================================================================== */

  /**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/

  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit;
    /* 1 */
    font-size: 100%;
    /* 1 */
    line-height: 1.15;
    /* 1 */
    margin: 0;
    /* 2 */
  }

  /**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/

  button,
  input {
    /* 1 */
    overflow: visible;
  }

  /**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/

  button,
  select {
    /* 1 */
    text-transform: none;
  }

  /**
* Correct the inability to style clickable types in iOS and Safari.
*/

  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    -webkit-appearance: button;
  }

  /**
* Remove the inner border and padding in Firefox.
*/

  button::-moz-focus-inner,
  [type="button"]::-moz-focus-inner,
  [type="reset"]::-moz-focus-inner,
  [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }

  /**
* Restore the focus styles unset by the previous rule.
*/

  button:-moz-focusring,
  [type="button"]:-moz-focusring,
  [type="reset"]:-moz-focusring,
  [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
  }

  /**
* Correct the padding in Firefox.
*/

  fieldset {
    padding: 0.35em 0.75em 0.625em;
  }

  /**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/

  legend {
    box-sizing: border-box;
    /* 1 */
    color: inherit;
    /* 2 */
    display: table;
    /* 1 */
    max-width: 100%;
    /* 1 */
    padding: 0;
    /* 3 */
    white-space: normal;
    /* 1 */
  }

  /**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/

  progress {
    vertical-align: baseline;
  }

  /**
* Remove the default vertical scrollbar in IE 10+.
*/

  textarea {
    overflow: auto;
  }

  /**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/

  [type="checkbox"],
  [type="radio"] {
    box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */
  }

  /**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/

  [type="number"]::-webkit-inner-spin-button,
  [type="number"]::-webkit-outer-spin-button {
    height: auto;
  }

  /**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/

  [type="search"] {
    -webkit-appearance: textfield;
    /* 1 */
    outline-offset: -2px;
    /* 2 */
  }

  /**
* Remove the inner padding in Chrome and Safari on macOS.
*/

  [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  /**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/

  ::-webkit-file-upload-button {
    -webkit-appearance: button;
    /* 1 */
    font: inherit;
    /* 2 */
  }

  /* Interactive
========================================================================== */

  /*
* Add the correct display in Edge, IE 10+, and Firefox.
*/

  details {
    display: block;
  }

  /*
* Add the correct display in all browsers.
*/

  summary {
    display: list-item;
  }

  /* Misc
========================================================================== */

  /**
* Add the correct display in IE 10+.
*/

  template {
    display: none;
  }

  /**
* Add the correct display in IE 10.
*/

  [hidden] {
    display: none;
  }
</style>
{% endblock %}

{% block content %}

<link rel="stylesheet" href="{% static 'star-ratings/css/star-ratings.css' %}">
<script type="text/javascript" src="{% static 'star-ratings/js/dist/star-ratings.min.js' %}"></script>
<link link="link" href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet" />


<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet" type="text/css"
  id="bs-default-stylesheet" />
<link href="{% static 'css/app.min.css' %}" rel="stylesheet" type="text/css" id="app-default-stylesheet" />
<style type="text/css">
  /**
 * The CSS shown here will not be introduced in the Quickstart guide, but shows
 * how you can use CSS to style your Element's container.
 */
  .StripeElement {
    box-sizing: border-box;

    height: 40px;

    padding: 10px 12px;

    border: 1px solid transparent;
    border-radius: 4px;
    background-color: white;

    box-shadow: 0 1px 3px 0 #e6ebf1;
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
  }

  .StripeElement--focus {
    box-shadow: 0 1px 3px 0 #cfd7df;
  }

  .StripeElement--invalid {
    border-color: #fa755a;
  }

  .StripeElement--webkit-autofill {
    background-color: #fefde5 !important;
  }

  .overlay {
    background: #ff1d1d;
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
    bottom: 0;
    left: 0;
    opacity: 0.5;
  }

  .center {
    position: absolute;
    width: 20%;
    height: 20%;
    top: 30%;
    left: 42%;
  }

  .dot-1 {
    position: absolute;
    z-index: 3;
    width: 30px;
    height: 30px;
    top: 95px;
    left: 95px;
    background: #fff;
    border-radius: 50%;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation: jump-jump-1 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;
    animation: jump-jump-1 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;
  }

  .dot-2 {
    position: absolute;
    z-index: 2;
    width: 60px;
    height: 60px;
    top: 80px;
    left: 80px;
    background: #fff;
    border-radius: 50%;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation: jump-jump-2 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;
    animation: jump-jump-2 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;
  }

  .dot-3 {
    position: absolute;
    z-index: 1;
    width: 90px;
    height: 90px;
    top: 65px;
    left: 65px;
    background: #fff;
    border-radius: 50%;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation: jump-jump-3 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;
    animation: jump-jump-3 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;
  }

  @-webkit-keyframes jump-jump-1 {

    0%,
    70% {
      box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
      -webkit-transform: scale(0);
      transform: scale(0);
    }

    100% {
      box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }

  @keyframes jump-jump-1 {

    0%,
    70% {
      box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
      -webkit-transform: scale(0);
      transform: scale(0);
    }

    100% {
      box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }

  @-webkit-keyframes jump-jump-2 {

    0%,
    40% {
      box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
      -webkit-transform: scale(0);
      transform: scale(0);
    }

    100% {
      box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }

  @keyframes jump-jump-2 {

    0%,
    40% {
      box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
      -webkit-transform: scale(0);
      transform: scale(0);
    }

    100% {
      box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }

  @-webkit-keyframes jump-jump-3 {

    0%,
    10% {
      box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
      -webkit-transform: scale(0);
      transform: scale(0);
    }

    100% {
      box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }

  @keyframes jump-jump-3 {

    0%,
    10% {
      box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
      -webkit-transform: scale(0);
      transform: scale(0);
    }

    100% {
      box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }
</style>
<!-- Begin page -->
<div class="overlay">
  <div class="center">
    <div class="dot-1"></div>
    <div class="dot-2"></div>
    <div class="dot-3"></div>
  </div>
</div>

<div class="profile-body">
  <div id="wrapper">

    <!-- Topbar Start -->
    <!-- end Topbar -->

    <!-- ========== Left Sidebar Start ========== -->
    <div class="left-side-menu">

      <div class="h-100" data-simplebar>


        <!--- Sidemenu -->
        <div id="sidebar-menu" style="
    margin-top: 50px;
">

          <ul id="side-menu">




            <li>
              <div style="width:150px;height:150px;border-radius:10px;margin-left:50px;">
                {% if user.userprofile.avatar %}
                <img src="{{ user.userprofile.avatar }}" style="width:140px;height:140px;border-radius:80px">
                {% else %}
                <img src="https://www.jamf.com/jamf-nation/img/default-avatars/generic-user-purple.png"
                  style="width:140px;height:140px;border-radius:80px">
                {% endif %}
              </div>

            </li>

            <li>


              <ul class="nav-second-level" style="
    margin: 0;
    padding: 0;
    text-align: center;
">

                <li>
                  <a href="#"><b>{{user.username|title}}</b></a>
                </li>
                <li>
                  {% ratings user %}
                </li>
                <li>

                  <div id="target_div">
                    {% if request.user != user and request.user.is_authenticated %}
                    {% if request.user.email in followers_list %}
                    <a class="follow_unfollow btn btn-default" name="{{ user }}">Unfollow</a>
                    {% else %}
                    <a class="follow_unfollow btn btn-default" name="{{ user }}">Follow</a>
                    {% endif %}
                    {% endif %}

                    <div class="status">
                      <form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">
                        <input type="hidden" name="cmd" value="_xclick">
                        <input type="hidden" name="business" value="{{ project.paypal|default:" coderbounty@gmail.com"
                          }}">
                        <input type="hidden" name="item_name" value="tip for {{ user.username }}">
                        <input type="hidden" name="currency_code" value="USD">
                        <button type="submit" class="btn btn-danger">
                          <i class="fa fa-money fa-lg"></i> Send a tip
                        </button>
                      </form>
                    </div>
                  </div>
                </li>

                <li>
                  <a href="#"><b>About {{user.username|title}}</b></a>
                  <p>{{user_details.description }}</p>
                </li>


              </ul>
            </li>

            <li>
              <i data-feather="book"></i>
              <span><b>Current Tasks</b></span>
              <div id="sidebarContacts">
                <ul class="nav-second-level">
                  <li>
                    <a href="#">345 Open Bugs</a>
                  </li>

                  <li>
                    <a href="#">200 Closed Bugs</a>
                  </li>


                </ul>
              </div>
            </li>

          </ul>

        </div>
        <!-- End Sidebar -->

        <div class="clearfix"></div>

      </div>
      <!-- Sidebar -left -->

    </div>
    <!-- Left Sidebar End -->

    <!-- ============================================================== -->
    <!-- Start Page Content here -->
    <!-- ============================================================== -->

    <div class="content-page" style="
    margin-top: 0px;
">
      <div class="content">

        <!-- Start Content-->
        <div class="container-fluid">

          <!-- start page title -->
          <div class="row">
            <div class="col-12">
              <div class="page-title-box">
                <div class="page-title-right">
                  <form class="form-inline">
                    <div class="form-group">
                      <div class="input-group input-group-sm">
                        <input type="text" class="form-control border" id="dash-daterange">
                      </div>
                    </div>
                    <a href="javascript: void(0);" class="btn btn-blue btn-sm ml-2">
                      <i class="fa fa-filter"></i>
                    </a>
                  </form>
                </div>
              </div>
            </div>
          </div>
          <!-- end page title -->

          <div class="row">
            <div class="col-md-6 col-xl-3">
              <div class="widget-rounded-circle card-box">
                <div class="row">
                  <div class="col-6">
                    <div class="avatar-lg rounded-circle bg-soft-primary border-primary border">
                      <i class="fa fa-heart font-22 avatar-title text-primary"></i>
                    </div>
                  </div>
                  <div class="col-6">


                    <div class="text-right">
                      <h3 class="mt-1"><span data-plugin="counterup">2450</span></h3>
                      <p class="text-muted mb-1 text-truncate">Top Bug Reported</p>
                    </div>
                  </div>
                </div> <!-- end row-->
              </div> <!-- end widget-rounded-circle-->
            </div> <!-- end col-->

            <div class="col-md-6 col-xl-3">
              <div class="widget-rounded-circle card-box">
                <div class="row">
                  <div class="col-6">
                    <div class="avatar-lg rounded-circle bg-soft-success border-success border">
                      <i class="fa fa-shopping-cart font-22 avatar-title text-success"></i>
                    </div>
                  </div>



                  <div class="col-6">
                    <div class="text-right">
                      <h3 class="mt-1"> <span data-plugin="counterup">719</span></h3>
                      <p class="text-muted mb-1 text-truncate">Total Bug Fixed</p>
                    </div>
                  </div>
                </div> <!-- end row-->
              </div> <!-- end widget-rounded-circle-->
            </div> <!-- end col-->

            {% if user == request.user %}
            <div class="col-md-6 col-xl-3">
              <div class="widget-rounded-circle card-box">
                <div class="row">
                  <div class="col-6">
                    <div class="avatar-lg rounded-circle bg-soft-success border-success border">
                      <i class="fa fa-money font-22 avatar-title text-success"></i>
                    </div>
                  </div>



                  <div class="col-6">
                    <div class="text-right">
                      <h3 class="mt-1"> <span data-plugin="counterup">{{wallet.current_balance}} $</span></h3>
                      <p class="text-muted mb-1 text-truncate"><button class="btn btn-default" id="addBtn">
                          Add Money</button></p>
                      <p class="text-muted mb-1 text-truncate"><button class="btn btn-default" id="withDrawBtn">
                          Withdraw Money</button></p>
                    </div>
                  </div>

                </div> <!-- end row-->
              </div> <!-- end widget-rounded-circle-->
            </div> <!-- end col-->
            {% endif %}

          </div> <!-- end widget-rounded-circle-->
          </div----> <!-- end col-->

          <!-- end col-->
        </div>
        <!-- end row-->


        <div class="row">
          <div class="col-xl-6">
            <div class="card-box">
              <div class="dropdown float-right">
                <a href="#" class="dropdown-toggle arrow-none card-drop" data-toggle="dropdown" aria-expanded="false">
                  <i class="fa fa-ellipsis-v"></i>
                </a>

              </div>

              <h4 class="header-title mb-3">Recent Activity</h4>

              <div class="table-responsive">
                <table class="table table-borderless table-nowrap table-hover table-centered m-0">

                  <thead class="thead-light">
                    <tr>
                      <th>Url</th>
                      <th>Details</th>

                      <th>Action</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% if activities %}
                    {% for activity in activities %}
                    <tr>
                      <td>
                        <h5 class="m-0 font-weight-normal"><a href="/domain/{{ activity.domain_name }}">
                            {{ activity.domain_name }}</a></h5>
                      </td>

                      <td>
                        <a href="{{ activity.get_absolute_url }}">
                          Submitted a Bug Report {{ activity.created|timesince }} ago
                        </a>
                      </td>



                      <td>
                        {{ activity.status }}</a>
                      </td>
                    </tr>
                    {% endfor %}
                    {% endif %}






                  </tbody>
                </table>


                {% if activities %}
                <a href="/all_activity?user={{ user.username }}" class="btn btn-default btn-block">View All
                  Activity by {{ user.username }}</a>
                {% else %}
                <div class="text-center">No Activity Yet!</div>
                {% endif %}
              </div> <!-- end .table-responsive-->
            </div> <!-- end card-box-->
          </div> <!-- end col -->
          <div class="col-xl-6">
            <div class="card-box">
              <div class="dropdown float-right">
                <a href="#" class="dropdown-toggle arrow-none card-drop" data-toggle="dropdown" aria-expanded="false">
                  <i class="fa fa-ellipsis-v"></i>
                </a>

              </div>

              <h4 class="header-title mb-3"></h4>

              <div class="table-responsive">
                <table class="table table-borderless table-hover table-nowrap table-centered m-0">

                  <thead class="thead-light">
                    <tr>
                      <th>Trading For</th>
                      <th>Corelation With S & P - </th>
                      <th>P/- Ration</th>


                    </tr>
                  </thead>
                  <tbody>

                    <tr>


                      <td>
                        <h5 class="m-0 font-weight-normal">2 Years</h5>

                      </td>

                      <td>
                        0.1
                      </td>

                      <td>
                        2:1
                      </td>




                    </tr>






                  </tbody>
                </table>
              </div>
            </div>
          </div> <!-- end col -->


        </div>
        <!-- end row -->

      </div> <!-- container -->

    </div> <!-- content -->

  </div>
</div>
{% if user == request.user %}
<div id="WithdrawModal" class="modal">

  <!-- Modal content -->
  <div class="wallet-modal-content">
    <div class="wallet-modal-header">
      <span class="close">&times;</span>
      <h2>Withdraw Money</h2>
    </div>
    <form id="withdraw">
      {% csrf_token %}
      <div class="wallet-modal-body">
        <input type="number" name="amount" id="amount" min="1" max="{{wallet.current_balance}}" step="any" />
      </div>
      <div class="wallet-modal-footer">
        <input type="submit" class="btn btn-primary withdraw_button btn_5 btn-lg btn-danger" value="Withdraw" />
      </div>
    </form>
  </div>


</div>
<div id="AddModal" class="modal">

  <!-- Modal content -->
  <div class="wallet-modal-content">
    <div class="wallet-modal-header">
      <span class="close">&times;</span>
      <h2>Add Money</h2>
    </div>
    <script src="https://js.stripe.com/v3/"></script>

    <form class="col-md-6" style="
    left: 50%;
    transform: translateX(-50%);" id="payment-form">
      {% csrf_token %}
      <label for="amount">
        Enter Amount
      </label>
      <input type="number" name="amount" id="amount" min="1" step="any" />
      <div class="">
        <label for="card-element">
          Credit or debit card
        </label>
        <div id="card-element">
          <!-- A Stripe Element will be inserted here. -->
        </div>

        <!-- Used to display form errors. -->
        <div id="card-errors" role="alert"></div>
      </div>

      <button>Submit Payment</button>
    </form>
  </div>


</div>
{% endif %}
</div>
<script type="text/javascript">
  // Create a Stripe client.
  var stripe = Stripe(
    'pk_test_51HFiXMFf0OkkOVnDkNs4opFLqM0Sx5GA6Pedf63uGzG1gHhumFYHEOLfCA7yzZwXUpjaa5j9ZhS1yciNhouYCMh400pSx5ZEx6');

  // Create an instance of Elements.
  var elements = stripe.elements();

  // Custom styling can be passed to options when creating an Element.
  // (Note that this demo uses a wider set of styles than the guide below.)
  var style = {
    base: {
      color: '#32325d',
      fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
      fontSmoothing: 'antialiased',
      fontSize: '16px',
      '::placeholder': {
        color: '#aab7c4'
      }
    },
    invalid: {
      color: '#fa755a',
      iconColor: '#fa755a'
    }
  };

  // Create an instance of the card Element.
  var card = elements.create('card', {
    style: style
  });

  // Add an instance of the card Element into the `card-element` <div>.
  card.mount('#card-element');
  // Handle real-time validation errors from the card Element.
  card.on('change', function (event) {
    var displayError = document.getElementById('card-errors');
    if (event.error) {
      displayError.textContent = event.error.message;
    } else {
      displayError.textContent = '';
    }
  });

  // Handle form submission.
  var form = document.getElementById('payment-form');
  form.addEventListener('submit', function (event) {
    event.preventDefault();
    document.getElementsByClassName("overlay")[0].style.display = "block";
    addmodal.style.display = "none";
    stripe.createToken(card).then(function (result) {
      if (result.error) {
        addmodal.style.display = "block";
        document.getElementsByClassName("overlay")[0].style.display = "none";
        // Inform the user if there was an error.
        var errorElement = document.getElementById('card-errors');
        errorElement.textContent = result.error.message;
      } else {
        // Send the token to your server.
        stripeTokenHandler(result.token);
      }
    });
  });

  // Submit the form with the token ID.
  function stripeTokenHandler(token) {
    // Insert the token ID into the form so it gets submitted to the server
    var form = document.getElementById('payment-form');
    var hiddenInput = document.createElement('input');
    hiddenInput.setAttribute('type', 'hidden');
    hiddenInput.setAttribute('name', 'stripeToken');
    hiddenInput.setAttribute('value', token.id);
    form.appendChild(hiddenInput);

    var serializedData = $("#payment-form").serializeArray()
    $.ajax({
      type: 'POST',
      url: "/dashboard/user/profile/addbalance",
      data: serializedData,
      success: function (response) {
        document.getElementsByClassName("overlay")[0].style.display = "none";
        window.location.reload();
        console.log("SUCCESS")
      },
      error: function (response) {
        // alert the error if any error occured
        alert(response["responseJSON"]["error"]);
      }
    })
    // Submit the form
    // form.submit();
  }
</script>
<script>
  // Get the modal
  var withdrawmodal = document.getElementById("WithdrawModal");
  var addmodal = document.getElementById("AddModal");

  // Get the button that opens the modal
  var withdrawbtn = document.getElementById("withDrawBtn");
  var addbtn = document.getElementById("addBtn");

  // Get the <span> element that closes the modal
  var span = document.getElementsByClassName("close")[0];
  var span1 = document.getElementsByClassName("close")[1];

  // When the user clicks the button, open the modal 
  withdrawbtn.onclick = function () {
    withdrawmodal.style.display = "block";
  }

  addbtn.onclick = function () {
    addmodal.style.display = "block";
  }

  // When the user clicks on <span> (x), close the modal
  span.onclick = function () {
    withdrawmodal.style.display = "none";
    addmodal.style.display = "none";
  }
  span1.onclick = function () {
    withdrawmodal.style.display = "none";
    addmodal.style.display = "none";
  }

  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function (event) {
    if (event.target == withdrawmodal) {
      withdrawmodal.style.display = "none";
    }
    if (event.target == addmodal) {
      addmodal.style.display = "none";
    }
  }
</script>
<script>
  document.getElementsByClassName("star-ratings-rating-average")[0].style.display = "none";
  document.getElementsByClassName("star-ratings-rating-count")[0].style.display = "none";
  document.getElementsByClassName("star-ratings-rating-user")[0].style.display = "none";
</script>
{% endblock %}