{% extends "base_dashboard.html" %}
{% load gravatar %}
{% load static %}
{% load ratings %}
{% block style %}
    <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>
    <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 style %}
{% block content %}
    <!-- Begin page -->
    <section>
        {% include "includes/user_sidenav.html" %}
    </section>
    <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" class="mt-[50px]">
                        <ul id="side-menu">
                            <li>
                                <div class="w-[150px] h-[150px] ml-[50px] rounded-xl">
                                    {% if user.userprofile.avatar %}
                                        <img src="{{ user.userprofile.avatar }}"
                                             class="rounded-[80px]"
                                             width="140px"
                                             height="140px"
                                             alt="user avatar">
                                    {% else %}
                                        <img src="https://www.jamf.com/jamf-nation/img/default-avatars/generic-user-purple.png"
                                             class="rounded-[80px]"
                                             width="140px"
                                             height="140px"
                                             alt="user avatar">
                                    {% endif %}
                                </div>
                            </li>
                            <li>
                                <ul class="nav-second-level m-0 p-0 text-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 mt-0">
                <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='{% url "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 }}</td>
                                                </tr>
                                            {% endfor %}
                                        {% endif %}
                                    </tbody>
                                </table>
                                {% if activities %}
                                    <a href='{% url "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>
    {% if user == request.user %}
        <div id="WithdrawModal" class="modal">
            <!-- Modal content -->
            <div class="wallet-modal-content">
                <div class="wallet-modal-header">
                    <span class="close">×</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">×</span>
                    <h2>Add Money</h2>
                </div>
                <script src="https://js.stripe.com/v3/"></script>
                <form class="col-md-6 left-1/2 -translate-x-1/2" id="payment-form">
                    {% csrf_token %}
                    <label for="amount">Enter Amount</label>
                    <input type="number" name="amount" id="amount" min="1" step="any" />
                    <div>
                        <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 %}
    <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 content %}