{% set active_page = "Cryptocurrency" -%}

{% extends "layouts/" + layout + ".html" %}

{% block styles %}
<style>
  .portal-table-widget {
    overflow: auto;
  }
</style>
{% endblock %}

{% block content %}
  <div class="portal-marquee__wrapper">
    <div class="portal-marquee marquee3k" data-speed="0.40" data-pausable="true">
      <div class="marquee3k__wrapper">
        <div class="portal-marquee__item">
          <h3 class="portal-marquee__item-logo">
            <!-- Image or SVG here -->
            <svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <defs>
                  <path d="M10.9818767,0 C4.91675771,0 0,4.91675771 0,10.9818767 C0,17.0469956 4.91675771,21.9637533 10.9818767,21.9637533 C17.0469956,21.9637533 21.9637533,17.0469956 21.9637533,10.9818767 C21.9637533,4.91675771 17.0469956,0 10.9818767,0 Z M10.8395066,18.257674 L6.49959471,12.1186079 L10.8395066,14.6595595 L10.8395066,18.257674 Z M10.8395066,13.7597885 L6.47022907,11.2004229 L10.8395066,9.28651982 L10.8395066,13.7597885 Z M10.8395066,8.97900441 L6.61095154,10.8310749 L10.8395066,3.72652863 L10.8395066,8.97900441 Z M11.1211454,3.72439648 L15.4091101,10.8574361 L11.1211454,8.97900441 L11.1211454,3.72439648 Z M11.1211454,18.257674 L11.1211454,14.6595595 L15.4610573,12.1186079 L11.1211454,18.257674 Z M11.1211454,13.7598855 L11.1211454,9.28661674 L15.4936211,11.2018767 L11.1211454,13.7598855 Z" id="path-1"></path>
              </defs>
              <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" class="portal-marquee__item-logo-img">
                  <g id="assets/logos/ethereum">
                      <g id="logo">
                          <mask id="mask-2" fill="white">
                              <use xlink:href="#path-1"></use>
                          </mask>
                          <use id="Shape" fill-rule="nonzero" xlink:href="#path-1"></use>
                      </g>
                  </g>
              </g>
            </svg>
            <span>ETH</span>
          </h3>
          <div class="portal-marquee__item-percentage mdc-tab__portal-stat-caption--trend-down">
            <i class="material-icons">trending_down</i>
            -1.67%
          </div>
          <div class="portal-marquee__item-value">
            <small>$</small> 508.79
          </div>
          <div class="portal-marquee__item-difference mdc-tab__portal-stat-caption--trend-down">-8.48</div>
        </div>
        <div class="portal-marquee__item">
          <h3 class="portal-marquee__item-logo">
            <!-- Image or SVG here -->
            <svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <defs>
                <path d="M10.994903,0 C4.92255998,0 0,4.92237885 0,10.9944758 C0,17.0666696 4.92255998,21.9887577 10.994903,21.9887577 C17.0674398,21.9887577 21.9899998,17.0666696 21.9899998,10.9944758 C21.9900967,4.92237885 17.0675367,0 10.994903,0 Z M15.2629502,16.3557885 L6.671998,16.3557885 L7.39406522,12.9088634 L5.9900564,13.871533 L6.33112412,11.9852511 L7.79958592,10.9744141 L9.24003732,4.09926872 L11.9219597,4.09926872 L10.9302561,8.82006167 L14.42196,6.41711894 L14.0127562,8.37162996 L10.5216339,10.7647841 L9.83096938,14.0531542 L15.7400961,14.0531542 L15.2629502,16.3557885 Z" id="path-2"></path>
              </defs>
              <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" class="portal-marquee__item-logo-img">
                <g id="assets/logos/litecoin">
                  <g id="logo">
                    <mask id="mask-2" fill="white">
                      <use xlink:href="#path-1"></use>
                    </mask>
                    <use id="Shape" fill-rule="nonzero" xlink:href="#path-2"></use>
                  </g>
                </g>
              </g>
            </svg>
            <span>LTC</span>
          </h3>
          <div class="portal-marquee__item-percentage mdc-tab__portal-stat-caption--trend-down">
            <i class="material-icons">trending_down</i>
            -2.00%
          </div>
          <div class="portal-marquee__item-value">
            <small>$</small> 156.46
          </div>
          <div class="portal-marquee__item-difference mdc-tab__portal-stat-caption--trend-down">-25.3</div>
        </div>
        <div class="portal-marquee__item">
          <h3 class="portal-marquee__item-logo">
            <!-- Image or SVG here -->
            <svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <defs>
                <path d="M10.9833304,0 C4.91743612,0 0,4.91743612 0,10.9834273 C0,17.0493216 4.91743612,21.9667577 10.9833304,21.9667577 C17.0492247,21.9667577 21.9666608,17.0493216 21.9666608,10.9834273 C21.9666608,4.91743612 17.0492247,0 10.9833304,0 Z M13.0407665,17.1599031 C11.449207,16.2217533 6.03003524,13.0173128 5.17077533,12.3619648 C4.23010573,11.6450749 4.30870485,9.74735683 4.32372687,9.49169163 L11.6758943,13.8527313 L11.6723084,10.2949339 L13.0407665,9.48229075 L13.0407665,17.1599031 Z M15.7524846,14.4051542 C15.7524846,16.2144846 13.6263348,17.3449163 13.4951101,17.4128546 L13.4951101,8.68389427 L10.5721145,10.4057093 L9.17051101,9.59955947 L15.7524846,5.89667841 L15.7524846,14.4051542 Z M15.7524846,5.37594714 L8.25213216,9.59471366 L11.22,11.3096476 L11.2213568,13.055207 L4.74288987,9.21218502 L11.489815,5.18560352 C14.024467,3.67225551 15.7523877,5.37488106 15.7523877,5.37488106 L15.7523877,5.37594714 L15.7524846,5.37594714 Z" id="path-3"></path>
              </defs>
              <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" class="portal-marquee__item-logo-img">
                <g id="assets/logos/maid">
                  <g id="logo">
                    <mask id="mask-2" fill="white">
                      <use xlink:href="#path-3"></use>
                    </mask>
                    <use id="Shape" fill-rule="nonzero" xlink:href="#path-3"></use>
                  </g>
                </g>
              </g>
            </svg>
            <span>MAID</span>
          </h3>
          <div class="portal-marquee__item-percentage mdc-tab__portal-stat-caption--trend-up">
            <i class="material-icons">trending_up</i>
            12.96%
          </div>
          <div class="portal-marquee__item-value">
            <small>$</small> 245.18
          </div>
          <div class="portal-marquee__item-difference mdc-tab__portal-stat-caption--trend-up">12.8</div>
        </div>
        <div class="portal-marquee__item">
          <h3 class="portal-marquee__item-logo">
            <!-- Image or SVG here -->
            <svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <defs>
                <path d="M10.9671454,0 C4.9101674,0 0,4.9101674 0,10.9671454 C0,17.0241233 4.9101674,21.9342907 10.9671454,21.9342907 C17.0241233,21.9342907 21.9342907,17.0241233 21.9342907,10.9671454 C21.9342907,4.9101674 17.0241233,0 10.9671454,0 Z M7.52070485,13.9220264 L4.02134802,14.6848546 L8.83488987,5.3947489 L10.2290308,8.49820264 C8.47048458,8.85020264 7.14563877,10.4026079 7.14563877,12.2645639 C7.14484,12.838181 7.27302311,13.4046378 7.52070485,13.9220264 Z M10.9871101,14.9475947 C9.50545374,14.9475947 8.3040793,13.7464141 8.3040793,12.2645639 C8.3040793,10.7826167 9.50545374,9.58133921 10.9871101,9.58133921 C12.4690573,9.58133921 13.6704317,10.7826167 13.6704317,12.2645639 C13.6704317,13.746511 12.4690573,14.9475947 10.9871101,14.9475947 Z M14.4501233,13.9299736 C14.7000605,13.4104093 14.8294629,12.8411183 14.8286784,12.2645639 C14.8286784,10.4150132 13.5215683,8.87103965 11.7806608,8.50537445 L13.2432247,5.39465198 L17.9128458,14.6847577 L14.4501233,13.9299736 Z" id="path-4"></path>
                </defs>
                <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" class="portal-marquee__item-logo-img">
                  <g id="assets/logos/msc">
                    <g id="logo">
                      <mask id="mask-2" fill="white">
                        <use xlink:href="#path-4"></use>
                      </mask>
                    <use id="Shape" fill-rule="nonzero" xlink:href="#path-4"></use>
                  </g>
                </g>
              </g>
            </svg>
            <span>MSC</span>
          </h3>
          <div class="portal-marquee__item-percentage mdc-tab__portal-stat-caption--trend-down">
            <i class="material-icons">trending_down</i>
            -1.96%
          </div>
          <div class="portal-marquee__item-value">
            <small>$</small> 1.102.26
          </div>
          <div class="portal-marquee__item-difference mdc-tab__portal-stat-caption--trend-down">2.85</div>
        </div>
        <div class="portal-marquee__item">
          <h3 class="portal-marquee__item-logo">
            <!-- Image or SVG here -->
            <svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <defs>
                <path d="M10.9899513,0 C4.92031677,0 0,4.91985903 0,10.9892423 C0,17.0585286 4.9204137,21.9783877 10.9900482,21.9783877 C17.0595858,21.9783877 21.9799995,17.0584317 21.9799995,10.9892423 C21.9799026,4.91985903 17.0594889,0 10.9899513,0 Z M5.48092176,10.968696 C5.48092176,9.64278414 6.55580235,8.56798238 7.88190841,8.56798238 C9.20782062,8.56798238 10.2827981,9.64278414 10.2827981,10.968696 C10.2827981,12.2947048 9.20782062,13.3694097 7.88190841,13.3694097 C6.55580235,13.3694097 5.48092176,12.2946079 5.48092176,10.968696 Z M15.282689,13.3694097 C13.4099349,13.3694097 11.8917267,14.8875066 11.8917267,16.7602203 C11.8917267,18.0862291 10.8167492,19.1609339 9.49074004,19.1609339 C8.16473091,19.1609339 7.08985032,18.0861322 7.08985032,16.7602203 C7.08985032,15.4343084 8.16473091,14.3595066 9.49074004,14.3595066 C11.3634941,14.3595066 12.8818962,12.8414097 12.8818962,10.968696 C12.8818962,9.09598238 11.3634941,7.57788546 9.49074004,7.57788546 L9.49209697,7.57662555 C9.48327694,7.57672247 9.47465076,7.57788546 9.46592765,7.57788546 C8.13982159,7.57788546 7.06494101,6.50298678 7.06494101,5.17707489 C7.06494101,3.85125991 8.13982159,2.77626432 9.46592765,2.77626432 C10.7918399,2.77626432 11.8668174,3.85125991 11.8668174,5.17707489 L11.8670112,5.17707489 C11.8670112,7.04988546 13.3851226,8.56798238 15.2579736,8.56798238 L15.2566166,8.56933921 C15.2653397,8.56914537 15.2739659,8.56798238 15.282689,8.56798238 C16.6087951,8.56798238 17.6836757,9.64278414 17.6836757,10.968696 C17.6837726,12.2946079 16.6087951,13.3694097 15.282689,13.3694097 Z" id="path-5"></path>
                </defs>
                <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" class="portal-marquee__item-logo-img">
                  <g id="assets/logos/amp">
                    <g id="logo">
                      <mask id="mask-2" fill="white">
                        <use xlink:href="#path-5"></use>
                      </mask>
                    <use id="Shape" fill-rule="nonzero" xlink:href="#path-5"></use>
                  </g>
                </g>
              </g>
            </svg>
            <span>AMP</span>
          </h3>
          <div class="portal-marquee__item-percentage mdc-tab__portal-stat-caption--trend-up">
            <i class="material-icons">trending_up</i>
            6.07%
          </div>
          <div class="portal-marquee__item-value">
            <small>$</small> 56.854
          </div>
          <div class="portal-marquee__item-difference mdc-tab__portal-stat-caption--trend-up">6.47</div>
        </div>
        <div class="portal-marquee__item">
          <h3 class="portal-marquee__item-logo">
            <!-- Image or SVG here -->
            <svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <defs>
                <path d="M13.1529956,11.8474361 C12.8996564,11.7204758 12.3353128,11.5495154 11.6635859,11.5050308 C10.9915683,11.4606432 10.1295947,11.5050308 10.1295947,11.5050308 L10.1295947,14.4144581 C10.1295947,14.4144581 11.0296564,14.4336476 11.6320881,14.3892599 C12.2339383,14.3448722 12.8552687,14.1928106 13.1658855,14.0214626 C13.4763084,13.8503084 13.8504053,13.5840793 13.8504053,12.918652 C13.8504053,12.2529339 13.4066256,11.9742026 13.1529956,11.8474361 Z M11.2577974,10.154793 C11.7524581,10.1357004 12.2785198,10.0217269 12.6585286,9.81248458 C13.0389251,9.60333921 13.25437,9.2739207 13.2419648,8.77935683 C13.228978,8.28488987 12.8996564,7.86659912 12.3419031,7.6952511 C11.7839559,7.52409692 11.4102467,7.51140088 10.9852687,7.50510132 C10.5605815,7.49889868 10.1294978,7.53688987 10.1294978,7.53688987 L10.1294978,10.154793 C10.1295947,10.154793 10.7634273,10.1738855 11.2577974,10.154793 Z M10.9915683,0 C4.92111894,0 0,4.92102203 0,10.9915683 C0,17.0620176 4.92111894,21.9831366 10.9915683,21.9831366 C17.0620176,21.9831366 21.9829427,17.0620176 21.9829427,10.9915683 C21.9829427,4.92102203 17.0620176,0 10.9915683,0 Z M15.4669692,15.1942467 C14.6489956,15.764793 13.774326,15.8663612 13.38763,15.9168546 C13.1968018,15.9419559 12.8699031,15.9684141 12.5193568,15.9889604 L12.5193568,18.1926432 L11.1627225,18.1926432 L11.1627225,16.0246256 L10.1295947,16.0246256 L10.1295947,18.1926432 L8.77305727,18.1926432 L8.77305727,16.0246256 L6.10446696,16.0246256 L6.38329515,14.3952687 L7.1945815,14.3952687 C7.46730396,14.3952687 7.58118062,14.3699736 7.6952511,14.2622996 C7.80932159,14.1544317 7.83471366,13.9897709 7.83471366,13.8564141 L7.83471366,8.24340969 C7.83471366,7.89179736 7.80612335,7.79662555 7.64446696,7.61607048 C7.48281057,7.43512775 7.10260793,7.41138326 6.88851982,7.41138326 L6.10437004,7.41138326 L6.10437004,6.00289868 L8.77296035,6.00289868 L8.77296035,3.82867841 L10.1294009,3.82867841 L10.1294009,6.00289868 L11.1625286,6.00289868 L11.1625286,3.82867841 L12.519163,3.82867841 L12.519163,6.02896916 C13.5304846,6.09167401 14.2833304,6.28434361 14.9404229,6.76989427 C15.7899912,7.39742731 15.7454097,8.48763877 15.7264141,8.74756828 C15.7075154,9.0074978 15.5934449,9.50836123 15.3650132,9.83138326 C15.1370661,10.154793 14.5792159,10.4781057 14.5792159,10.4781057 C14.5792159,10.4781057 15.2383436,10.6174714 15.7013128,10.9661762 C16.1637004,11.3148811 16.5063965,11.9296211 16.4869163,12.8297797 C16.4683084,13.7299383 16.2845551,14.6237974 15.4669692,15.1942467 Z" id="path-6"></path>
              </defs>
              <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" class="portal-marquee__item-logo-img">
                <g id="assets/logos/bitcoin">
                  <g id="logo">
                    <mask id="mask-2" fill="white">
                      <use xlink:href="#path-6"></use>
                    </mask>
                    <use  fill-rule="nonzero" xlink:href="#path-6"></use>
                  </g>
                </g>
              </g>
            </svg>
            <span>BTC</span>
          </h3>
          <div class="portal-marquee__item-percentage mdc-tab__portal-stat-caption--trend-down">
            <i class="material-icons">trending_down</i>
            -1.84%
          </div>
          <div class="portal-marquee__item-value">
            <small>$</small> 8,349.9
          </div>
          <div class="portal-marquee__item-difference mdc-tab__portal-stat-caption--trend-down">-14.52</div>
        </div>
      </div>
    </div>
  </div>
  <div class="mdc-layout-grid portal-dashboard">
    <div class="mdc-layout-grid__inner">
      <div class="mdc-layout-grid__cell--span-8-desktop mdc-layout-grid__cell--span-8-tablet mdc-layout-grid__cell--span-4-phone">
        <div class="portal-widget portal-margin-bottom-none portal-widget--fullheight">
          <div class="mdc-card mdc-card--space-between portal-widget__card portal-widget__card--rounded">
            <div class="portal-widget__card-content portal-widget__card-content--extra portal-display-flex">
              <div class="portal-display-flex__flexed">
                <h2 class="mdc-typography--subheading2 portal-margin-none portal-text-medium">
                  Daily Performance
                </h2>
                <h4 class="mdc-typography--caption portal-margin-none">
                  21 June 2018 - 28 Jun 2018
                </h4>
              </div>
              <div id="menu-01-button" class="mdc-menu-anchor mdc-icon-toggle material-icons portal-widget__menu-icon" aria-label="menu-01">more_vert
                <div class="mdc-menu" id="menu-01">
                  <div class="mdc-menu__items mdc-list" role="menu" aria-hidden="true">
                    <a href="dashboard-crypto.html" class="mdc-list-item" role="menuitem">Month</a>
                    <a href="dashboard-crypto.html" class="mdc-list-item" role="menuitem">Week</a>
                    <a href="dashboard-crypto.html" class="mdc-list-item" role="menuitem">Day</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="portal-widget__canvas">
              <canvas id="dailyPerformanceChart" style="height: 350px;"></canvas>
            </div>
          </div>
        </div>
      </div>
      <div class="mdc-layout-grid__cell--span-4-desktop mdc-layout-grid__cell--span-8-tablet mdc-layout-grid__cell--span-4-phone">
        <div class="portal-widget portal-widget--fullheight portal-margin-bottom-none">
          <div class="mdc-card mdc-card--space-between portal-widget__card portal-widget__card--rounded">
            <div class="portal-widget__card-content portal-widget__card-content--extra portal-display-flex">
              <div class="portal-display-flex__flexed">
                <h2 class="mdc-typography--subheading2 portal-margin-none portal-text-medium">
                  Annual Performance
                </h2>
                <h4 class="mdc-typography--caption portal-margin-none">
                  Order by market share
                </h4>
              </div>
              <div id="menu-02-button" class="mdc-menu-anchor mdc-icon-toggle material-icons portal-widget__menu-icon" aria-label="menu-02">more_vert
                <div class="mdc-menu" id="menu-02">
                  <div class="mdc-menu__items mdc-list" role="menu" aria-hidden="true">
                    <a href="dashboard-crypto.html" class="mdc-list-item" role="menuitem">Month</a>
                    <a href="dashboard-crypto.html" class="mdc-list-item" role="menuitem">Week</a>
                    <a href="dashboard-crypto.html" class="mdc-list-item" role="menuitem">Day</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="portal-widget__canvas">
              <canvas id="annualPerformanceChart" style="height: 350px;"></canvas>
            </div>
          </div>
        </div>
      </div>
      <div class="mdc-layout-grid__cell--span-4-desktop mdc-layout-grid__cell--span-8-tablet mdc-layout-grid__cell--span-4-phone">
        <div class="portal-widget portal-margin-bottom-none">
          <div class="mdc-card portal-widget__card portal-widget__card--rounded">
            <div class="portal-widget__card-content portal-widget__card-content--extra portal-display-flex">
              <div class="portal-display-flex__flexed">
                <h2 class="mdc-typography--subheading2 portal-margin-none portal-text-medium">
                  Most Popular
                </h2>
                <h4 class="mdc-typography--caption portal-margin-none">
                  2nd Semester 2018
                </h4>
              </div>
              <div id="menu-03-button" class="mdc-menu-anchor mdc-icon-toggle material-icons portal-widget__menu-icon" aria-label="menu-03">more_vert
                <div class="mdc-menu" id="menu-03">
                  <div class="mdc-menu__items mdc-list" role="menu" aria-hidden="true">
                    <a href="dashboard-crypto.html" class="mdc-list-item" role="menuitem">Month</a>
                    <a href="dashboard-crypto.html" class="mdc-list-item" role="menuitem">Week</a>
                    <a href="dashboard-crypto.html" class="mdc-list-item" role="menuitem">Day</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="portal-table-widget">
              <table class="mdl-data-table">
                <thead>
                  <tr>
                    <th class="mdl-data-table__cell--non-numeric">Name</th>
                    <th>Symbol</th>
                    <th>Price</th>
                    <th>Supply</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="mdl-data-table__cell--non-numeric">Bitcoin</td>
                    <td>BTC</td>
                    <td>$8,121.70</td>
                    <td>16,940</td>
                  </tr>
                  <tr>
                    <td class="mdl-data-table__cell--non-numeric">Ethereum</td>
                    <td>ETH</td>
                    <td>$484.95</td>
                    <td>98,428</td>
                  </tr>
                  <tr>
                    <td class="mdl-data-table__cell--non-numeric">Ripple</td>
                    <td>XRP</td>
                    <td>$411.95</td>
                    <td>39,094</td>
                  </tr>
                  <tr>
                    <td class="mdl-data-table__cell--non-numeric">Litecoin</td>
                    <td>LTC</td>
                    <td>$147.37</td>
                    <td>55,749</td>
                  </tr>
                  <tr>
                    <td class="mdl-data-table__cell--non-numeric">EOS</td>
                    <td>EOS</td>
                    <td>$5.96</td>
                    <td>52,544</td>
                  </tr>
                  <tr>
                    <td class="mdl-data-table__cell--non-numeric">Cardano</td>
                    <td>ADA</td>
                    <td>$0.166</td>
                    <td>25,927</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="mdc-layout-grid__cell--span-8-desktop mdc-layout-grid__cell--span-8-tablet mdc-layout-grid__cell--span-4-phone">
        <div class="portal-widget portal-margin-bottom-none">
          <div class="mdc-card portal-widget__card portal-widget__card--rounded">
            <div class="portal-widget__card-content portal-widget__card-content--extra portal-display-flex">
              <div class="portal-display-flex__flexed">
                <h2 class="mdc-typography--subheading2 portal-margin-none portal-text-medium">
                  Market Cap
                </h2>
                <h4 class="mdc-typography--caption portal-margin-none">
                  Showing Top 10
                </h4>
              </div>
              <div id="menu-04-button" class="mdc-menu-anchor mdc-icon-toggle material-icons portal-widget__menu-icon" aria-label="menu-04">more_vert
                <div class="mdc-menu" id="menu-04">
                  <div class="mdc-menu__items mdc-list" role="menu" aria-hidden="true">
                    <a href="dashboard-crypto.html" class="mdc-list-item" role="menuitem">Month</a>
                    <a href="dashboard-crypto.html" class="mdc-list-item" role="menuitem">Week</a>
                    <a href="dashboard-crypto.html" class="mdc-list-item" role="menuitem">Day</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="portal-table-widget">
              <table class="mdl-data-table">
                <tbody>
                  <tr>
                    <td class="mdl-data-table__cell--non-numeric">1</td>
                    <td>Bitcoin</td>
                    <td>BTC</td>
                    <td>$137,411,608,131</td>
                    <td>$8,121.70</td>
                    <td>16,940,700</td>
                    <td>-0.25%</td>
                  </tr>
                  <tr>
                    <td class="mdl-data-table__cell--non-numeric">2</td>
                    <td>Ethereum</td>
                    <td>ETH</td>
                    <td>$47,733,845,131</td>
                    <td>$484.95</td>
                    <td>98,428</td>
                    <td>-0.43%</td>
                  </tr>
                  <tr>
                    <td class="mdl-data-table__cell--non-numeric">3</td>
                    <td>Ripple</td>
                    <td>XRP</td>
                    <td>$23,453,455,131</td>
                    <td>$0.4345395</td>
                    <td>39,940,700</td>
                    <td>-0.12%</td>
                  </tr>
                  <tr>
                    <td class="mdl-data-table__cell--non-numeric">4</td>
                    <td>Bitcoin Cash</td>
                    <td>BCH</td>
                    <td>$15,573,674,661</td>
                    <td>$914.00</td>
                    <td>17,039,050</td>
                    <td>-0.31%</td>
                  </tr>
                  <tr>
                    <td class="mdl-data-table__cell--non-numeric">5</td>
                    <td>Litecoin</td>
                    <td>LTC</td>
                    <td>$8,222,510,375</td>
                    <td>$147.37</td>
                    <td>55,749</td>
                    <td>-0.36%</td>
                  </tr>
                  <tr>
                    <td class="mdl-data-table__cell--non-numeric">6</td>
                    <td>EOS</td>
                    <td>EOS</td>
                    <td>$4,468,745,596</td>
                    <td>$5.96</td>
                    <td>752,544,651</td>
                    <td>-0.73%</td>
                  </tr>
                  <tr>
                    <td class="mdl-data-table__cell--non-numeric">7</td>
                    <td>Cardano</td>
                    <td>ADA</td>
                    <td>$4,304,745,416</td>
                    <td>$0.166033</td>
                    <td>25,927,070,538</td>
                    <td>-0.40%</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

{% endblock %}

{% block scripts %}
  <script>
    (function() {

      function setupDashboardCharts() {
        const dailyPerformanceCtx = document.getElementById('dailyPerformanceChart') ? document.getElementById('dailyPerformanceChart').getContext('2d') : '';
        const annualPerformanceCtx = document.getElementById('annualPerformanceChart') ? document.getElementById('annualPerformanceChart').getContext('2d') : '';

        let primaryColor = window.getComputedStyle(document.documentElement).getPropertyValue('--mdc-theme-primary');
        let primaryDarkColor = ColorLuminance(primaryColor, -0.2);
        let primaryLightColor = ColorLuminance(primaryColor, 0.2);

        let secondaryColor = window.getComputedStyle(document.documentElement).getPropertyValue('--mdc-theme-secondary');

        // Fallback for IE11, whereby getPropertyValue returns an empty string.
        primaryColor = '' === primaryColor ? '#03A9F4' : primaryColor;
        primaryLightColor = '' === primaryLightColor ? '#19cbff' : primaryLightColor;
        primaryDarkColor = '' === primaryDarkColor ? '#0d87c3' : primaryDarkColor;
        secondaryColor = '' === secondaryColor ? '#FF4081' : secondaryColor;

        const lineChartConfig = {
          type: 'line',
          data: {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
            datasets: [{
              label: 'ETH',
              data: [
                0,
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor()
              ],
              backgroundColor: primaryLightColor,
              borderColor: primaryLightColor,
              borderWidth: 2,
              lineTension: 0.45,
              fill: 'origin',
              pointRadius: 0
            }, {
              label: 'MSC',
              data: [
                0,
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor()
              ],
              backgroundColor: primaryColor,
              borderColor: primaryColor,
              borderWidth: 1,
              lineTension: 0.45,
              fill: 'origin',
              pointBorderWidth: 1,
              pointBackgroundColor: primaryColor,
              pointBorderColor: primaryLightColor,
              pointHoverBackgroundColor: primaryColor,
              pointHoverBorderColor: primaryLightColor,
              pointRadius: [0, 0, 0, 4, 0, 0, 0]
            }, {
              label: 'BTC',
              data: [
                0,
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor()
              ],
              backgroundColor: primaryDarkColor,
              borderColor: primaryDarkColor,
              borderWidth: 1,
              lineTension: 0.45,
              fill: 'origin',
              pointRadius: 0
            }]
          },
          options: {
            legend: {
              display: true,
              position: 'top',
              labels: {
                boxWidth: 10
              }
            },
            tooltips: {
              enabled: true,
              xPadding: 20,
              yPadding: 10,
              displayColors: false,
              backgroundColor: primaryColor
            },
            scales: {
              xAxes: [{
                display: false
              }]
            },
            responsive: true,
            maintainAspectRatio: false
          }
        };

        let dailyPerformanceChart;
        // Recent Sales Chart
        if (dailyPerformanceCtx) {
          dailyPerformanceChart = new Chart(dailyPerformanceCtx, lineChartConfig);
        }


        const usersBarChartConfig = {
          type: 'horizontalBar',
          data: {
            labels: ['BTC', 'ETH', 'MAT', 'ATN', 'JLG', 'AFT', 'KOL', 'JNH', 'AAG', 'JSG', 'LLK', 'GRE', 'SMG', 'LLM'],
            datasets: [{
              label: 'Price',
              data: [
                8349,
                7508.79,
                6450.6,
                6001.23,
                5502.14,
                5203.55,
                4846.25,
                4479.22,
                3826.88,
                3546,
                2234.78,
                2145.18,
                2069.854,
                1956.18
              ],
              backgroundColor: [ColorLuminance(primaryColor, -0.3), ColorLuminance(primaryColor, -0.2), ColorLuminance(primaryColor, -0.1), primaryColor, ColorLuminance(primaryColor, 0.1), ColorLuminance(primaryColor, 0.2), ColorLuminance(primaryColor, 0.3), ColorLuminance(primaryColor, 0.4), ColorLuminance(primaryColor, 0.5), ColorLuminance(primaryColor, 0.6), ColorLuminance(primaryColor, 0.7), ColorLuminance(primaryColor, 0.8), ColorLuminance(primaryColor, 0.9), ColorLuminance(primaryColor, 0.95)],
              borderColor: primaryColor,
              hoverBackgroundColor: secondaryColor,

            }]
          },
          options: {
            legend: {
              display: false
            },
            responsive: true,
            maintainAspectRatio: false,
            tooltips: {
              enabled: true,
              xPadding: 5,
              yPadding: 5,
              displayColors: false
            },
            scales: {
              xAxes: [{
                display: false
              }],
              yAxes: [{
                display: false
              }]
            }
          }
        };

        // Users bar chart.
        let annualPerformanceChart;
        if (annualPerformanceCtx) {
          annualPerformanceChart = new Chart(annualPerformanceCtx, usersBarChartConfig);
        }

        const body = document.getElementsByTagName('body').item(0);
        body.addEventListener('portalThemeChanged', () =>
          {
            // Clean up any references stored to the chart object.
            annualPerformanceChart.destroy();
            dailyPerformanceChart.destroy();
            setupDashboardCharts();
          }
        );
      }
      const randomScalingFactor = function() {
        return Math.round(Math.random() * 100);
      };
      // Wait 1sec before initializing the charts so the switcher CSS works.
      setTimeout(setupDashboardCharts, 1000);




      // Menu 01
      const menu01 = document.querySelector('#menu-01');
      if (menu01 !== null) {
        // Create layout menu.
        const dailySalesMenu = new mdc.menu.MDCMenu(menu01);
        dailySalesMenu.setAnchorCorner(mdc.menu.MDCMenuFoundation.Corner.BOTTOM_START);
        // Set listener for opening menu.
        document.querySelector('#menu-01-button').addEventListener('click', function() {
          dailySalesMenu.open = !dailySalesMenu.open;
        });
      }
      // Menu 02
      const menu02 = document.querySelector('#menu-02');
      if (menu02 !== null) {
        // Create layout menu.
        const dailySalesMenu = new mdc.menu.MDCMenu(menu02);
        dailySalesMenu.setAnchorCorner(mdc.menu.MDCMenuFoundation.Corner.BOTTOM_START);
        // Set listener for opening menu.
        document.querySelector('#menu-02-button').addEventListener('click', function() {
          dailySalesMenu.open = !dailySalesMenu.open;
        });
      }
      // Menu 03
      const menu03 = document.querySelector('#menu-03');
      if (menu03 !== null) {
        // Create layout menu.
        const dailySalesMenu = new mdc.menu.MDCMenu(menu03);
        dailySalesMenu.setAnchorCorner(mdc.menu.MDCMenuFoundation.Corner.BOTTOM_START);
        // Set listener for opening menu.
        document.querySelector('#menu-03-button').addEventListener('click', function() {
          dailySalesMenu.open = !dailySalesMenu.open;
        });
      }
      // Menu 04
      const menu04 = document.querySelector('#menu-04');
      if (menu04 !== null) {
        // Create layout menu.
        const dailySalesMenu = new mdc.menu.MDCMenu(menu04);
        dailySalesMenu.setAnchorCorner(mdc.menu.MDCMenuFoundation.Corner.BOTTOM_START);
        // Set listener for opening menu.
        document.querySelector('#menu-04-button').addEventListener('click', function() {
          dailySalesMenu.open = !dailySalesMenu.open;
        });
      }

    })();

    // Changes the opacity of a hex colour.
    function ColorLuminance(hex, lum) {
      // validate hex string
      hex = String(hex).replace(/[^0-9a-f]/gi, '');
      if (hex.length < 6) {
        hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
      }
      lum = lum || 0;
      // convert to decimal and change luminosity
      var rgb = "#", c, i;
      for (i = 0; i < 3; i++) {
        c = parseInt(hex.substr(i*2,2), 16);
        c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
        rgb += ("00"+c).substr(c.length);
      }
      return rgb;
    }
  </script>
{% endblock %}