<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Inverno Report</title>


    <!-- Custom fonts for this template-->
    <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <link
        href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
        rel="stylesheet">

    <!-- Custom styles for this template-->
    <link href="css/sb-admin-2.css" rel="stylesheet">

</head>

<body id="page-top">

    <script>CURRENCY_SYM = {{cfg.currency.value | tojson}}</script>

    <!-- Page Wrapper -->
    <div id="wrapper">

        <!-- Content Wrapper -->
        <div id="content-wrapper" class="d-flex flex-column">

            <!-- Main Content -->
            <div id="content">

                <!-- Begin Page Content -->
                <div class="container-fluid">

                    <!-- Page Heading -->
                    <div class="row">
                        <div class="mx-auto text-xs font-weight-bold text-primary text-uppercase mb-1">
                          <h1 style="margin-top: 25px;margin-bottom: 2.5rem;">{{cfg.title}}</h1>
                        </div>
                    </div>

                    <!-- Content Row -->
                    <div class="row">

                        <!-- Balance -->
                        <div class="col-xl-3 col-md-6 mb-4">
                            <div class="card border-left-primary shadow h-100 py-2">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                          <div class="row align-items-center">
                                            <div class="col-auto" style="padding-right: 0">
                                              <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                                Balance
                                              </div>
                                            </div>
                                            <div class="col-auto">
                                              <i class="fas fa-info-circle text-gray-300" 
                                                data-bs-toggle="tooltip" 
                                                data-bs-placement="top" 
                                                title="Current total worth of the portfolio, including cash and any type of asset."></i>
                                            </div>
                                          </div>
                                          <div class="h5 mb-0 font-weight-bold text-gray-800">{{balance}}</div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Earnings -->
                        <div class="col-xl-3 col-md-6 mb-4">
                            <div class="card border-left-success shadow h-100 py-2">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                          <div class="row align-items-center">
                                            <div class="col-auto" style="padding-right: 0">
                                              <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                                Earnings ({{cfg.days}} days)
                                              </div>
                                            </div>
                                            <div class="col-auto">
                                              <i class="fas fa-info-circle text-gray-300" 
                                                data-bs-toggle="tooltip" 
                                                data-bs-placement="top" 
                                                title="Total Return on Investment over a period of {{cfg.days}} days."></i>
                                            </div>
                                          </div>
                                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{earnings_amount}}</div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-hand-holding-usd fa-2x text-gray-300"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Rate of return -->
                        <div class="col-xl-3 col-md-6 mb-4">
                            <div class="card border-left-info shadow h-100 py-2">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                          <div class="row align-items-center">
                                            <div class="col-auto" style="padding-right: 0">
                                              <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                                Rate of return ({{cfg.days}} days)
                                              </div>
                                            </div>
                                            <div class="col-auto">
                                              <i class="fas fa-info-circle text-gray-300" 
                                                data-bs-toggle="tooltip" 
                                                data-bs-placement="top" 
                                                title="
                                                Time-Weighted Rate of Return (TWROR or TWR), also called geometric mean return.
                                                Calculated as a geometric mean of sub-periods of 1-day.
                                                "></i>
                                            </div>
                                          </div>
                                            <div class="row no-gutters align-items-center">
                                                <div class="col-auto">
                                                    <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">
                                                      {{ror}}%
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="progress progress-sm mr-2">
                                                        <div class="progress-bar bg-info" role="progressbar"
                                                            style="width: {{ror}}%" aria-valuenow="{{ror}}" aria-valuemin="0"
                                                            aria-valuemax="100"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-auto">
                                           <i class="fas fa-chart-line fa-2x text-gray-300"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Number of holdings -->
                        <div class="col-xl-3 col-md-6 mb-4">
                            <div class="card border-left-warning shadow h-100 py-2">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                          <div class="row align-items-center">
                                            <div class="col-auto" style="padding-right: 0">
                                              <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                                Number of holdings
                                              </div>
                                            </div>
                                            <div class="col-auto">
                                              <i class="fas fa-info-circle text-gray-300" 
                                                data-bs-toggle="tooltip" 
                                                data-bs-placement="top" 
                                                title="
                                                Number of holding currently held in this portfolio.
                                                "></i>
                                            </div>
                                          </div>
                                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                              {{nb_holdings}}  
                                            </div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-wallet fa-2x text-gray-300"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <!-- Balance Chart -->
                    <div class="card shadow mb-4">
                        <div class="card-header py-3">
                            <div class="row">
                              <div class="col-auto" style="padding-right: 0">
                                <h6 class="m-0 font-weight-bold text-primary">Balance</h6>
                              </div>
                              <div class="col-auto">
                                <i class="fas fa-info-circle text-gray-300" 
                                  data-bs-toggle="tooltip" 
                                  data-bs-placement="top" 
                                  title="Total worth history, including cash and any type on investment."></i>
                              </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="chart-area">
                                <canvas id="balance_chart"></canvas>
                            </div>
                        </div>
                    </div>
                    <script>balances = {{balances | tojson}}</script>

                    <!-- Earnings Chart -->
                    <div class="card shadow mb-4">
                        <div class="card-header py-3">
                            <div class="row">
                              <div class="col-auto" style="padding-right: 0">
                                <h6 class="m-0 font-weight-bold text-primary">Earnings</h6>
                              </div>
                              <div class="col-auto">
                                <i class="fas fa-info-circle text-gray-300" 
                                  data-bs-toggle="tooltip" 
                                  data-bs-placement="top" 
                                  title="
                                  Earnings history. Shows changes in 
                                  the value of the portfolio that are only caused by price fluctuations of the
                                  holdings.
                                  This is similar to a balance graph where cash-flow operations (e.g. 
                                  cash deposits/withdrawals or vesting) have been hidden.
                                  "></i>
                              </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="chart-area">
                                <canvas id="earnings_chart"></canvas>
                            </div>
                        </div>
                    </div>
                    <script>earnings = {{earnings | tojson}}</script>



                    <!-- Transactions -->
                    <div class="card shadow mb-4">
                        <div class="card-header py-3">
                            <div class="row">
                              <div class="col-auto" style="padding-right: 0">
                                <h6 class="m-0 font-weight-bold text-primary">Transactions</h6>
                              </div>
                              <div class="col-auto">
                                <i class="fas fa-info-circle text-gray-300" 
                                  data-bs-toggle="tooltip" 
                                  data-bs-placement="top" 
                                  title="
                                  List of all known transactions. 
                                  "></i>
                              </div>
                            </div>
                        </div>
                        <div class="card-body table-vscroll">
                         <table class="table">
  												<thead>
  												  <tr>
  												    <th scope="col">Date</th>
  												    <th scope="col">Action</th>
  												    <th scope="col">Holding</th>
  												    <th scope="col">Quantity</th>
  												    <th scope="col">Price</th>
  												    <th scope="col">Amount</th>
  												    <th scope="col">Fees</th>
  												  </tr>
  												</thead>
  												<tbody>
                        	{% for tr in transactions %}
    												<tr>
    												  <th scope="row">{{tr.date.strftime("%d %B %Y")}}</th>
    												  <td>{{tr.action.name}}</td>
    												  <td>{{tr.name or tr.ticker or tr.isin or "-"}}</td>
    												  <td>{{tr.quantity or "-"}}</td>
    												  <td>{{tr.price or "-"}}</td>
    												  <td>{{tr.amount or "-"}}</td>
    												  <td>{{tr.fees or "-"}}</td>
    												</tr>
                        	{% endfor %}
													</tbody>
												  </table> 
                        </div>
                    </div>
                    <script>balances = {{balances | tojson}}</script>

                    <!-- Attributes -->
                    <div id="reports"></div>
                    <script>reports_data = {{attrs | tojson}}</script>



                <!-- /.container-fluid -->
            </div>
            <!-- End of Main Content -->
        </div>
        <!-- End of Content Wrapper -->

    </div>
    <!-- End of Page Wrapper -->

    <!-- Scroll to Top Button-->
    <a class="scroll-to-top rounded" href="#page-top">
        <i class="fas fa-angle-up"></i>
    </a>

    <!-- Logout Modal-->
    <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                    <a class="btn btn-primary" href="login.html">Logout</a>
                </div>
            </div>
        </div>
    </div>

    <!-- React -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>  
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

    <!-- Bootstrap core JavaScript-->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Core plugin JavaScript-->
    <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

    <!-- Custom scripts for all pages-->
    <script src="js/sb-admin-2.js"></script>

    <!-- Charts -->
    <script src="vendor/chart.js/Chart.min.js"></script>
    <script src="js/charts.js"></script>
</body>

</html>
