{% extends "./common/layout.html" %}

{% block title %}Simple Layout / Universe Admin{% endblock %}

{% block page_content %}
<div class="page__header">
  <div class="page__header-heading">
    <div class="page__header-heading-text">Dashboard</div>
    <a href="#" class="btn btn-info icon-left page__header-btn-link">
      Add widget <span class="mdi mdi-plus-circle btn__icon"></span>
    </a>
  </div>
  <div>
    <div class="input-group input-group-icon icon-right page__header-search">
      <input class="form-control page__header-search-input" type="text" placeholder="Search...">
      <span class="input-icon ua-icon-search page__header-search-icon"></span>
    </div>
  </div>
</div>
<div class="page__body">
  <div class="row">
    <div class="col-lg-12">
      <div class="widget widget-welcome">
        <div class="widget-welcome__message">
          <h4 class="widget-welcome__message-l1">Welcome back!</h4>
          <h6 class="widget-welcome__message-l2">Your portfolio has a 5% growth for the last mounth</h6>
        </div>
        <div class="widget-welcome__stats">
          <div class="widget-welcome__stats-item early-growth">
            <span class="widget-welcome__stats-item-value">-$1,530</span>
            <span class="widget-welcome__stats-item-desc">Yearly Growth</span>
          </div>
          <div class="widget-welcome__stats-item monthly-growth">
            <span class="widget-welcome__stats-item-value">+$550</span>
            <span class="widget-welcome__stats-item-desc">Monthly Growth</span>
          </div>
          <div class="widget-welcome__stats-item daily-growth">
            <span class="widget-welcome__stats-item-value">96%</span>
            <span class="widget-welcome__stats-item-desc">Daily Growth</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xl-3 col-lg-3 col-md-6">
      <div class="widget widget-alpha widget-alpha--color-amaranth">
        <div>
          <div class="widget-alpha__amount">278</div>
          <div class="widget-alpha__description">New Projects</div>
        </div>
        <span class="widget-alpha__icon ua-icon-suitcase"></span>
      </div>
    </div>
    <div class="col-xl-3 col-lg-3 col-md-6">
      <div class="widget widget-alpha widget-alpha--color-green-jungle">
        <div>
          <div class="widget-alpha__amount">156</div>
          <div class="widget-alpha__description">New Clients</div>
        </div>
        <span class="widget-alpha__icon ua-icon-user-outline"></span>
      </div>
    </div>
    <div class="col-xl-3 col-lg-3 col-md-6">
      <div class="widget widget-alpha widget-alpha--color-orange widget-alpha--donut">
        <div>
          <div class="widget-alpha__amount">64,87%</div>
          <div class="widget-alpha__description">Conversion Rate</div>
        </div>
        <span class="widget-alpha__icon ua-icon-conversion-rate"></span>
      </div>
    </div>
    <div class="col-xl-3 col-lg-3 col-md-6">
      <div class="widget widget-alpha widget-alpha--color-java widget-alpha--help">
        <div>
          <div class="widget-alpha__amount">425</div>
          <div class="widget-alpha__description">Support Tickets</div>
        </div>
        <span class="widget-alpha__icon ua-icon-ticket"></span>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-4">
      <div class="ecommerce-widget ecommerce-widget-f ecommerce-widget-f--purple">
        <div class="ecommerce-widget-f__info">
          <div class="ecommerce-widget-f__title">Total Views</div>
          <div class="ecommerce-widget-f__value">645,948</div>
        </div>
        <div class="ecommerce-widget-f__label">
          <div class="ua-icon-widget-binoculars ecommerce-widget-f__icon"></div>
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="ecommerce-widget ecommerce-widget-f ecommerce-widget-f--orange">
        <div class="ecommerce-widget-f__info">
          <div class="ecommerce-widget-f__title">Total Orders</div>
          <div class="ecommerce-widget-f__value">403</div>
        </div>
        <div class="ecommerce-widget-f__label">
          <div class="ua-icon-widget-cart ecommerce-widget-f__icon"></div>
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="ecommerce-widget ecommerce-widget-f ecommerce-widget-f--orange">
        <div class="ecommerce-widget-f__info">
          <div class="ecommerce-widget-f__title">Total Orders</div>
          <div class="ecommerce-widget-f__value">$12,875</div>
        </div>
        <div class="ecommerce-widget-f__label">
          <div class="ua-icon-widget-coins ecommerce-widget-f__icon"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xl-6 col-lg-12">
      <div class="widget widget-tabs widget-index-chart">
        <div class="widget-tabs__header">
          <div>
            Weight vs weather
          </div>
          <ul class="nav nav-tabs widget-tabs__tabs">
            <li class="nav-item">
              <a class="nav-link active" data-toggle="tab" href="#widget-ww-all-accounts">All Accounts</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#widget-ww-all-account2">Account 2</a>
            </li>
          </ul>
        </div>
        <div class="widget-tabs__content">
          <div class="tab-content">
            <div class="tab-pane show active" id="widget-ww-all-accounts">
              <div class="dropdown widget-index-chart__select-date">
                <button class="btn btn-select btn-rounded dropdown-toggle" type="button" data-toggle="dropdown">Jan-Feb 2017</button>
                <div class="dropdown-menu">
                  <a class="dropdown-item" href="#">Jan-Feb 2017</a>
                  <a class="dropdown-item" href="#">Feb-Apr 2017</a>
                  <a class="dropdown-item" href="#">Apr-Dec 2017</a>
                </div>
              </div>
              <div id="widget-index-chart-container" class="widget-index-chart__container"></div>
              <div class="widget-index-chart__items">
                <div class="widget-index-chart__item widget-index-chart__item--yellow">
                  <span>Your index</span>
                  <span>17%</span>
                </div>
                <div class="widget-index-chart__item widget-index-chart__item--green">
                  <span>Another index</span>
                  <span>25%</span>
                </div>
                <div class="widget-index-chart__item widget-index-chart__item--grey">
                  <span>Foreign</span>
                  <span>10%</span>
                </div>
                <div class="widget-index-chart__item widget-index-chart__item--orange">
                  <span>US Bond</span>
                  <span>7%</span>
                </div>
              </div>
            </div>
            <div class="tab-pane" id="widget-ww-all-account2">Widget tab content</div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xl-6 col-lg-12">
      <div class="widget widget-controls widget-table widget-summary">
        <div class="widget-controls__header">
          <div>
            Portfolio Summary
          </div>
          <div class="widget-controls__header-controls">
            <span class="widget-controls__header-control ua-icon-settings"></span>
          </div>
        </div>
        <div class="progress progress-lg">
          <div class="progress-bar bg-emerland" role="progressbar" style="width: 55%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">55%</div>
          <div class="progress-bar bg-kournikova" role="progressbar" style="width: 35%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">35%</div>
          <div class="progress-bar bg-coral-light" role="progressbar" style="width: 10%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">10%</div>
        </div>
        <div class="widget-controls__content js-scrollable">
          <table class="table table-no-border table-striped">
            <thead>
            <tr>
              <th>Assets class</th>
              <th>Goals</th>
              <th>Amount</th>
              <th>Balance</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td><span class="table__tag table__tag--green">Cash</span></td>
              <td>17%</td>
              <td>23%</td>
              <td>$12,423</td>
            </tr>
            <tr>
              <td><span class="table__tag table__tag--orange">International Bonds</span></td>
              <td>17%</td>
              <td>23%</td>
              <td>$12,423</td>
            </tr>
            <tr>
              <td><span class="table__tag table__tag--orange">US Bonds</span></td>
              <td>17%</td>
              <td>23%</td>
              <td>$12,423</td>
            </tr>
            <tr>
              <td><span class="table__tag table__tag--yellow">International Stocks</span></td>
              <td>17%</td>
              <td>23%</td>
              <td>$12,423</td>
            </tr>
            <tr>
              <td><span class="table__tag table__tag--blue">International Stocks</span></td>
              <td>17%</td>
              <td>23%</td>
              <td>$12,423</td>
            </tr>
            <tr>
              <td><span class="table__tag table__tag--green">Cash</span></td>
              <td>17%</td>
              <td>23%</td>
              <td>$12,423</td>
            </tr>
            <tr>
              <td><span class="table__tag table__tag--orange">International Bonds</span></td>
              <td>17%</td>
              <td>23%</td>
              <td>$12,423</td>
            </tr>
            <tr>
              <td><span class="table__tag table__tag--orange">US Bonds</span></td>
              <td>17%</td>
              <td>23%</td>
              <td>$12,423</td>
            </tr>
            <tr>
              <td><span class="table__tag table__tag--yellow">International Stocks</span></td>
              <td>17%</td>
              <td>23%</td>
              <td>$12,423</td>
            </tr>
            <tr>
              <td><span class="table__tag table__tag--blue">International Stocks</span></td>
              <td>17%</td>
              <td>23%</td>
              <td>$12,423</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-4">
      <div class="widget widget-controls widget-table widget-billing">
        <div class="widget-controls__header">
          <div>
            Billing Notice
          </div>
          <div class="widget-controls__header-controls">
            <a href="#" class="widget-controls__header-control">Learn More</a>
          </div>
        </div>
        <div class="widget-billing__header">
          <span class="widget-billing__card-number">
            <img src="img/flags/de.png" alt="" width="24" height="24" class="widget-billing__card-country rounded-circle">
            <span>Ending **** 5896</span>
          </span>
          <span class="widget-billing__card-expired">05/19</span>
          <span class="widget-billing__card-type">Visa</span>
        </div>
        <div class="widget-controls__content js-scrollable">
          <table class="table table-no-border">
            <tbody>
            <tr>
              <td>PRO Package</td>
              <td class="table__cell-text-light">Standart Payment</td>
              <td class="table__cell-text-light text-right">19 Jan 2017</td>
              <td class="table__cell-compact">
                <a href="#" class="ua-icon-download-outline table__cell-actions-icon"></a>
              </td>
            </tr>
            <tr>
              <td>Job Posted</td>
              <td class="table__cell-text-light">30-Days Recuring</td>
              <td class="table__cell-text-light text-right">24 Nov 2016</td>
              <td class="table__cell-compact">
                <a href="#" class="ua-icon-download-outline table__cell-actions-icon"></a>
              </td>
            </tr>
            <tr>
              <td>PRO Package</td>
              <td class="table__cell-text-light">Gift</td>
              <td class="table__cell-text-light text-right">7 Mar 2016</td>
              <td class="table__cell-compact">
                <a href="#" class="ua-icon-download-outline table__cell-actions-icon"></a>
              </td>
            </tr>
            <tr>
              <td>PRO Package</td>
              <td class="table__cell-text-light">Standart Payment</td>
              <td class="table__cell-text-light text-right">19 Jan 2017</td>
              <td class="table__cell-compact">
                <a href="#" class="ua-icon-download-outline table__cell-actions-icon"></a>
              </td>
            </tr>
            <tr>
              <td>Job Posted</td>
              <td class="table__cell-text-light">30-Days Recuring</td>
              <td class="table__cell-text-light text-right">24 Nov 2016</td>
              <td class="table__cell-compact">
                <a href="#" class="ua-icon-download-outline table__cell-actions-icon"></a>
              </td>
            </tr>
            <tr>
              <td>PRO Package</td>
              <td class="table__cell-text-light">Gift</td>
              <td class="table__cell-text-light text-right">7 Mar 2016</td>
              <td class="table__cell-compact">
                <a href="#" class="ua-icon-download-outline table__cell-actions-icon"></a>
              </td>
            </tr>
            <tr>
              <td>PRO Package</td>
              <td class="table__cell-text-light">Standart Payment</td>
              <td class="table__cell-text-light text-right">19 Jan 2017</td>
              <td class="table__cell-compact">
                <a href="#" class="ua-icon-download-outline table__cell-actions-icon"></a>
              </td>
            </tr>
            <tr>
              <td>Job Posted</td>
              <td class="table__cell-text-light">30-Days Recuring</td>
              <td class="table__cell-text-light text-right">24 Nov 2016</td>
              <td class="table__cell-compact">
                <a href="#" class="ua-icon-download-outline table__cell-actions-icon"></a>
              </td>
            </tr>
            <tr>
              <td>PRO Package</td>
              <td class="table__cell-text-light">Gift</td>
              <td class="table__cell-text-light text-right">7 Mar 2016</td>
              <td class="table__cell-compact">
                <a href="#" class="ua-icon-download-outline table__cell-actions-icon"></a>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="widget widget-controls widget-content-tabs widget-activity">
        <div class="widget-controls__header">
          <div>
            Activity
          </div>
          <div class="widget-controls__header-controls">
            <a href="#" class="widget-controls__header-control">Learn More</a>
          </div>
        </div>
        <div class="widget-controls__content widget-content-tabs__tabs">
          <nav class="nav nav-tabs">
            <a class="nav-item nav-link active" data-toggle="tab" href="#widget-activity-tab">Activity</a>
            <a class="nav-item nav-link" data-toggle="tab" href="#widget-blocked-users-tab">Blocked Users</a>
            <a class="nav-item nav-link" data-toggle="tab" href="#widget-nda-tab">NDAs</a>
            <a class="nav-item nav-link" data-toggle="tab" href="#widget-customer-invoices-tab">Customers Invoices</a>
          </nav>
          <div class="tab-content">
            <div class="tab-pane show active" id="widget-activity-tab">
              <div class="tab-pane__content js-scrollable">
                <div class="widget-activity__items">
                  <span class="widget-activity__date">Today</span>
                  <div class="widget-activity__item widget-activity__item--green">
                    <div class="widget-activity__item-text">
                      Prepared all declared documents for invoice confirmation
                    </div>
                    <span class="widget-activity__item-date">Johny Marquez - 9:24 PM</span>
                  </div>
                  <div class="widget-activity__item widget-activity__item--orange">
                    <div class="widget-activity__item-text">
                      Fulfill the necessary action plan for current deadlines
                    </div>
                    <span class="widget-activity__item-date">Johny Marquez - 9:24 PM</span>
                  </div>
                  <div class="widget-activity__item widget-activity__item--blue">
                    <div class="widget-activity__item-text">
                      Prepared all declared documents for invoice confirmation
                    </div>
                    <span class="widget-activity__item-date">Johny Marquez - 9:24 PM</span>
                  </div>
                  <div class="widget-activity__item widget-activity__item--green">
                    <div class="widget-activity__item-text">
                      Prepared all declared documents for invoice confirmation
                    </div>
                    <span class="widget-activity__item-date">Johny Marquez - 9:24 PM</span>
                  </div>
                  <span class="widget-activity__date">Yesterday</span>
                  <div class="widget-activity__item widget-activity__item--green">
                    <div class="widget-activity__item-text">
                      Prepared all declared documents for invoice confirmation
                    </div>
                    <span class="widget-activity__item-date">Johny Marquez - 9:24 PM</span>
                  </div>
                  <div class="widget-activity__item widget-activity__item--green">
                    <div class="widget-activity__item-text">
                      Prepared all declared documents for invoice confirmation
                    </div>
                    <span class="widget-activity__item-date">Johny Marquez - 9:24 PM</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="tab-pane" id="widget-blocked-users-tab">
              <div class="widget-activity__blocked-users">Blocked Users</div>
            </div>
            <div class="tab-pane" id="widget-nda-tab">
              <div class="widget-activity__nda">NDA</div>
            </div>
            <div class="tab-pane" id="widget-customer-invoices-tab">
              <div class="widget-activity__customer-invoices">Customer Invoices</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="widget widget-controls widget-contacts widget-todo widget-controls--dark">
        <div class="widget-controls__header">
          <div>
            <span class="widget-controls__header-icon ua-icon-todo"></span> Todo Lists
          </div>
        </div>
        <div class="widget-controls__content js-scrollable">
          <div class="widget-controls__content-wrap">
            <span class="widget-todo__date">Today</span>
            <div class="widget-todo__item is-completed">
              <span class="widget-todo__item-icon">
                <span class="ua-icon-check"></span>
              </span>
              <div class="widget-todo__item-info">
                <span class="widget-todo__item-name">Consectetur Sem Sollicitudin</span>
                <span class="widget-todo__item-date">08:22 AM</span>
              </div>
            </div>
            <div class="widget-todo__item is-completed">
              <span class="widget-todo__item-icon">
                <span class="ua-icon-check"></span>
              </span>
              <div class="widget-todo__item-info">
                <span class="widget-todo__item-name">Consectetur Sem Sollicitudin</span>
                <span class="widget-todo__item-date">08:22 AM</span>
              </div>
            </div>
            <span class="widget-todo__date">Tomorrow</span>
            <div class="widget-todo__item">
              <span class="textavatar widget-todo__item-avatar widget-todo__item-avatar--orange" data-width="40" data-height="40" data-name="Richard Hendrick" data-toggle="textavatar"></span>
              <div class="widget-todo__item-info">
                <span class="widget-todo__item-name">Porta Vevenatis Quam</span>
                <span class="widget-todo__item-date">10:30 PM</span>
              </div>
            </div>
            <div class="widget-todo__item">
              <span class="textavatar widget-todo__item-avatar widget-todo__item-avatar--green" data-width="40" data-height="40" data-name="Deborah Allen" data-toggle="textavatar"></span>
              <div class="widget-todo__item-info">
                <span class="widget-todo__item-name">Nullam quis risus eget urna mollis ornare leo</span>
                <span class="widget-todo__item-date">rebecca@masterskin.ru</span>
              </div>
            </div>
          </div>
        </div>
        <div class="widget-controls__footer">
          <a href="#" class="widget-controls__footer-add-control">
            <span class="icon ua-icon-plus-circle"></span>
          </a>
          <a href="#" class="widget-controls__footer-view-all">
            <span class="widget-controls__footer-view-all-icon iconfont-arrow-circle-right"></span><span>View more</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script src="../../admin/vendor/echarts/echarts.min.js"></script>
{{ super() }}
<script src="../../admin/vendor/sparkline/jquery.sparkline.min.js"></script>
<script src="../../admin/js/preview/default-dashboard.min.js"></script>
{% endblock %}