{% extends "warden/warden_layout.html" %}
{% block content %}

<!--  High Charts -->
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="{{url_for('warden.static', filename='js/portfolio.js')}}"></script>
<script src="{{url_for('warden.static', filename='js/utils.js')}}"></script>
<script src="{{url_for('warden.static', filename='js/highcharts.js')}}"></script>

<div class="row">

    <!-- Start of left side column with positions, etc -->
    <div class="col-sm-8">
        <table id="portfoliosummary" class="table-condensed">

            <tbody>
                <tr>
                    <td class="border-bottom hinumber" data-toggle="tooltip" data-placement="top"
                        title="Market Value in {{current_app.fx['symbol']}}">
                        <span id="pvalue">
                            <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}' width="30"
                                height="30"></img>
                        </span>
                    </td>
                    <td></td>
                    <td class="border-bottom hinumber" data-toggle="tooltip" data-placement="top"
                        title="Market Value in BTC">
                        <span id="pvaluebtc">
                            &#8383 {{(portfolio_data['BTC']['trade_quantity'] | jformat(4))}}
                        </span>
                    </td>
                    <td class="border-bottom hinumber" data-toggle="tooltip" data-placement="top"
                        title="Market Value in Sats">
                        <span id="pvaluesats">
                            {{(portfolio_data['BTC']['trade_quantity'] * 100000000) | jformat(0)}} sats
                        </span>
                    </td>
                    <td></td>
                    <td id="chg1" class="redgreen border-bottom hinumber text-right">
                        <span id="">
                            <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}' width="30"
                                height="30"></img>
                        </span>
                    </td>
                    <td></td>
                    <td id="chg2" class="redgreen border-bottom hinumber text-right">
                        <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}' width="30"
                            height="30"></img>
                    </td>
                </tr>
                <tr>
                    <td class="small">
                        portfolio value
                    </td>
                    <td></td>
                    <td class="small">
                        portfolio value
                    </td>
                    <td class="small">
                        portfolio value
                    </td>
                    <td></td>
                    <td class="small text-right">
                        24hr change
                    </td>
                    <td></td>
                    <td class="small text-right">
                        24hr change

                    </td>

                </tr>
            </tbody>
        </table>
    </div>

    <!-- Portfolio Summary Bar at top -->
    <div class="col-sm-4 align-right">
        <table id="time" class="table-condensed table-right text-right">
            <tbody>
                <tr>

                    <td id='latest_btc_price' class="text-center border-bottom hinumbersmall" data-toggle="tooltip"
                        data-placement="top" title="Bitcoin's Latest Price">
                        <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}' width="30"
                            height="30"></img>
                    </td>

                    <td id='latest_btc_block' class="text-center border-bottom hinumbersmall small"
                        data-toggle="tooltip" data-placement="top" title="Bitcoin's Latest Block">
                        <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}' width="30"
                            height="30"></img>
                    </td>

                    <td class="border-bottom hinumbersmall text-right small">
                        <span id="lstupd">
                            <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}' width="30"
                                height="30"></img>
                        </span>

                    </td>


                </tr>
                <tr>
                    <td class="small text-center">
                        &#8383 Price
                    </td>

                    <td class="small text-center">
                        &#8383 Block Height
                    </td>

                    <td class="small text-right">
                        last update
                    </td>

                </tr>
            </tbody>
        </table>
    </div>

</div>
</br>


<div class="row">

    <div class="col-sm-8">

        <!-- START Portfolio Snapshot section  -->
        <div class="content-section table-responsive">
            <div class="row">
                <div class="col-sm-6">
                    <div class="lead">Portfolio Snapshot</div>
                </div>
            </div>

            <table id="positionstable" class="table table-sm small-text">
                <thead class="thead-light">
                    <tr>
                        <th scope="col">
                            Ticker
                        </th>

                        <th class="text-right" data-toggle="tooltip" data-placement="top" title="in number of coins">
                            Quantity
                        </th>

                        <th class="text-right">
                            Latest Price ({{current_app.fx['symbol']}})
                        </th>

                        <th class="text-right small">
                            24hr Chg
                        </th>
                        <th>

                        </th>
                        <th class="text-right">
                            Balance ({{current_app.fx['symbol']}})
                        </th>
                        <th class="text-right small">
                            % of total
                        </th>


                    </tr>
                </thead>
                <tbody id="portfolio">
                    {% for position in portfolio_data %}

                    <tr id="ticker{{position}}">

                        <th class="align-middle" scope="row">

                            {{position}}

                        </th>

                        <td class="text-right align-middle">
                            {{(portfolio_data[position]['trade_quantity'] | jformat(4))}}

                        </td>

                        <td class="text-right align-middle hinumbersmall">
                            <strong>
                                <span id="{{position}}_price">
                                    <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                        width="30" height="30"></img>
                                </span>
                            </strong>
                        </td>

                        <td class="text-right small align-middle redgreen">
                            <span id="{{position}}_24hchg">
                                <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}' width="30"
                                    height="30"></img>
                            </span>

                        </td>

                        <td class="text-center align-middle">


                        </td>

                        <td class="text-right align-middle">
                            <span id="{{position}}_position">
                                <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}' width="30"
                                    height="30"></img>
                            </span>
                        </td>

                        <td class="text-right small align-middle">
                            <span id="{{position}}_allocation">
                                <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}' width="30"
                                    height="30"></img>
                            </span>

                        </td>




                    </tr>

                    {% endfor %}


                </tbody>
            </table>
        </div>
        <!-- END Portfolio Snapshot section  -->

        <!-- START Address activity ALERTS -->
        {%if alerts%}
        {%set changes_detected = true%}
        <div class="content-section table-responsive">
            <div class="row" style='padding-bottom: 10px;'>
                <div class="col-sm-12">
                    <div class="lead">Address Activity Alerts</div>
                </div>
            </div>

            <div class="row" style='padding-bottom: 10px; display: flex;'>
                <div class="col-sm-8">
                    <div class="alert alert-warning" role="alert"><i
                            class="fas fa-exclamation-triangle"></i>&nbsp;&nbsp;Changes
                        Detected to one or more addresses</div>
                </div>

                <div class="col-sm-4">
                    <button id="dismiss_balances" type="button" class="btn btn-warning btn-block alert">Dismiss
                        Notification</button>
                </div>
            </div>



            {%if (not warden_metadata['old_new_df_old'].empty)%}

            <h6 class='text-danger'>Some Addresses have zero balance or are missing since the previous checkpoint</h6>
            <table class="table table-sm small-text">
                <thead class="thead-light">
                    <tr class='text-left'>
                        <th>
                            Wallet
                        </th>
                        <th class='text-right'>
                            TxID
                        </th>
                        <th class='text-right'>
                            Previous Balance
                        </th>
                    </tr>
                </thead>
                <tbody>
                    {%for element in warden_metadata['old_new_df_old'].iterrows()%}
                    <tr>
                        <td class='text-left'>
                            {{element[1]['trade_account']}}
                        </td>
                        <td class='text-right'>
                            {{element[1]['trade_blockchain_id'][0:3]}}..{{element[1]['trade_blockchain_id'][-4:-1]}}
                        </td>
                        <td class='text-right'>
                            {{element[1]['amount'] | jformat(4)}}
                        </td>
                    </tr>
                    {%endfor%}
                </tbody>
            </table>

            {%endif%}

            {%if (not warden_metadata['old_new_df_new'].empty)%}

            <h6 class='text-success'>New Addresses were found since the previous checkpoint</h6>
            <table class="table table-sm small-text">
                <thead class="thead-light">
                    <tr class='text-left'>
                        <th>
                            Wallet
                        </th>
                        <th class='text-right'>
                            TxID
                        </th>
                        <th class='text-right'>
                            Confirmations
                        </th>
                        <th class='text-right'>
                            New Balance
                        </th>
                    </tr>
                </thead>
                <tbody>
                    {%for element in warden_metadata['old_new_df_new'].iterrows()%}
                    <tr>
                        <td class='text-left'>
                            {{element[1]['trade_account']}}
                        </td>
                        <td class='text-right'>

                            {{element[1]['trade_blockchain_id'][0:3]}}..{{element[1]['trade_blockchain_id'][-4:-1]}}

                        </td>
                        <td class='text-right'>
                            {{element[1]['confirmations'] | jformat(0)}}
                        </td>
                        <td class='text-right'>
                            {{element[1]['amount'] | jformat(4)}}
                        </td>

                    </tr>
                    {%endfor%}
                </tbody>
            </table>

            {%endif%}

        </div>
        {%endif%}
        <!-- END ALERTS -->


        <!-- START SPECTER Wallet List + Transactions  -->
        <div class="content-section table-responsive">
            <div class="row" style='padding-bottom: 20px;'>
                <div class="col-sm-12">
                    <div class="lead">&#8383 Wallets</div>
                </div>
            </div>


            <table id="positionstable" class="table table-sm small-text" style="border-collapse:collapse;">
                <thead class="thead-light">
                    <tr class='text-right'>
                        <th></th>
                        <th class='text-left'> Name </th>
                        <th> Device(s) </th>
                        <th> Balance </th>
                        <th> # </th>
                        <th> Sigs Required </th>
                        <th> Last Activity </th>
                        <th> </th>
                    </tr>
                </thead>
                <tbody>

                    {%for wallet in sorted_wallet_list%}
                    {% set wallet_df = warden_metadata['full_df'].loc[warden_metadata['full_df']['wallet_alias'] == wallet] %}

                    {%if current_app.specter.rescan_progress(wallet)['active']%}
                    <div class="alert alert-dark" role="alert"><i class="fab fa-searchengin fa-lg"></i>&nbsp;&nbsp;
                        Wallet <span style='color: darkslategray; font-weight: bold;'>{{wallet}}</span> is scanning for
                        transactions
                        <span class='float-right' style="color: darkgreen"><strong>
                                {{(warden_metadata['scan'][wallet_alias] * 100) | jformat(2)}}%
                                complete
                            </strong>
                        </span>
                    </div>

                    {%endif%}

                    {%if not wallet_df.empty%}
                    <tr class='text-right' data-toggle="collapse" data-target="#txs_{{wallet}}"
                        class="accordion-toggle">
                        <td>
                            <i class="far fa-plus-square"></i>
                        </td>
                        <td class='text-left'>
                            {{current_app.specter.home_parser()['wallet_dict'][wallet]['name']}}
                        </td>
                        <td>

                            {%for device in current_app.specter.wallet_info(wallet)['devices'].keys()%}
                            {{current_app.specter.home_parser()['device_dict'][device]['name']}}
                            {%endfor%}

                        </td>
                        <td class='text-right'>
                            {{wallet_df['amount'].sum() | jformat(4)}}
                        </td>
                        <td class='text-right'>
                            {{wallet_df['amount'].count() | jformat(0)}}
                        </td>
                        <td>
                            {{current_app.specter.wallet_info(wallet)['subtitle']}}
                        </td>

                        <td>
                            {{(wallet_df.time.max() | epoch) | time_ago}}
                        </td>
                        {%if current_app.specter.rescan_progress(wallet)['active']%}
                        <td class='td-part-fill'
                            style="background-size: {{(current_app.specter.rescan_progress(wallet)['progress'] * 100)}}% 100%">
                            Scanning... (
                            {{(current_app.specter.rescan_progress(wallet)['progress'] * 100) | jformat(2)}}%)
                        </td>
                        {%else%}
                        <td>
                        </td>
                        {%endif%}
                    </tr>

                    <tr data-toggle="collapse" data-target="#txs_{{wallet}}" class="accordion-toggle">
                        <td colspan="10" class="hiddenRow">
                            <div id="txs_{{wallet}}" class="accordian-body collapse" style='padding-top: 15px;'>
                                <div class="alert alert-secondary" role="alert">Transactions&nbsp;<i
                                        class="fas fa-exchange-alt"></i></div>


                                <table id="positionstable" class="table table-sm small-text"
                                    style="border-collapse:collapse;">
                                    <thead class="thead-light">
                                        <tr class='text-right'>
                                            <th></th>
                                            <th class='text-left'>Date</th>
                                            <th class='text-left'> Label </th>
                                            <th> Address </th>
                                            <th> TX id </th>
                                            <th> Confirmations </th>
                                            <th> Amount (&#8383)</th>
                                            <th> ₿ ({{current_app.fx['symbol']}})</th>
                                            <th> Cash ({{current_app.fx['symbol']}})</th>
                                            <th> Fees ({{current_app.fx['symbol']}})</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {%for tx in wallet_df.iterrows()%}
                                        {%set color=''%}
                                        {%set message=''%}
                                        {%if tx[1]['txid'] in warden_metadata['old_new_df_old']['TXID']%}
                                        {%set color='lightred'%}
                                        {%set message='Balance Changed'%}
                                        {%elif tx[1]['txid'] in warden_metadata['old_new_df_new']['TXID']%}
                                        {%set color='lightgreen'%}
                                        {%set message='New Address'%}
                                        {%endif%}
                                        <tr style='background-color: {{color}};'>
                                            <td>
                                                {%if tx[1]['category'] == 'receive'%}
                                                <span class='text-success'>
                                                    <i class="far fa-arrow-alt-circle-down"></i>
                                                </span>
                                                {%elif tx[1]['category'] == 'send'%}
                                                <span class='text-danger'>
                                                    <i class="far fa-arrow-alt-circle-up"></i>
                                                </span>
                                                {%endif%}
                                            </td>
                                            <td class='text-left'>
                                                {% if message == ''%}
                                                {{tx[1]['trade_date']}}
                                                {%else%}
                                                {{message}}
                                                {%endif%}
                                            </td>
                                            <td class='text-left'>
                                                {{tx[1]['label']}}
                                            </td>
                                            <td class='text-right'>

                                                {{tx[1]['address'][0:3]}}...{{tx[1]['address'][-4:-1]}}
                                            </td>
                                            <td class='text-right'>
                                                {{tx[1]['txid'][0:3]}}...{{tx[1]['txid'][-4:-1]}}
                                            </td>
                                            <td class='text-right'>
                                                {{tx[1]['confirmations'] | jformat(0)}}
                                            </td>
                                            <td class='text-right'>
                                                {{tx[1]['amount'] | jformat(4)}}
                                            </td>
                                            <td class='text-right'>
                                                {{tx[1]['trade_price'] | jformat(2)}}
                                            </td>
                                            <td class='text-right'>
                                                {{tx[1]['cash_value'] | jformat(2)}}
                                            </td>
                                            <td class='text-right'>
                                                {{tx[1]['trade_fees'] | jformat(2)}}
                                            </td>
                                        </tr>
                                        {%endfor%}
                                    </tbody>
                                </table>


                            </div>

                        </td>
                    </tr>
                    {%else%}
                    <tr class='text-right' data-toggle="collapse" data-target="#txs_{{wallet}}"
                        class="accordion-toggle">
                        <td data-toggle="tooltip" data-placement="right" title="No Transactions Found for this Wallet">
                            <i class="fas fa-exclamation-circle"></i>
                        </td>
                        <td class='text-left'>
                            {{current_app.specter.home_parser()['wallet_dict'][wallet]['name']}}
                        </td>
                        <td>
                            {%for device in current_app.specter.wallet_info(wallet)['devices'].keys()%}
                            {{current_app.specter.home_parser()['device_dict'][device]['name']}}
                            {%endfor%}

                        </td>
                        <td class='text-right'>
                            --
                        </td>
                        <td class='text-right'>
                            --
                        </td>
                        <td>
                            {{current_app.specter.wallet_info(wallet)['subtitle']}}
                        </td>
                        <td>
                            Never
                        </td>
                        {%if current_app.specter.rescan_progress(wallet)['active']%}
                        <td class='td-part-fill'
                            style="background-size: {{(current_app.specter.rescan_progress(wallet)['progress'] * 100)}}% 100%">
                            Scanning... (
                            {{(current_app.specter.rescan_progress(wallet)['progress'] * 100) |
                            jformat(2)}}%)
                        </td>
                        {%else%}
                        <td>

                        </td>
                        {%endif%}
                    </tr>
                    {%endif%}
                    {%endfor%}
                </tbody>

            </table>
        </div>



        <!-- START Cost Analysis section -->
        <div class="content-section table-responsive">
            <div class="row">
                <div class="col-sm-6">
                    <div id="cost_title" class="lead">Cost Analysis</div>
                </div>
            </div>

            <span class="fifo_costtable">
                <table id="fifo_costtable" class="table table-sm small-text">
                    <thead class="thead-light">
                        <tr>
                            <th scope="col">
                                Ticker
                            </th>

                            <th class="text-right">
                                Balance
                            </th>

                            <th class="text-right">
                                Fees
                            </th>
                            <th class="text-right">
                                Total PnL
                            </th>
                            <th class="text-right">
                                Breakeven
                            </th>
                            <th class="text-right">
                                change from Breakeven
                            </th>
                            <th>
                            </th>


                        </tr>
                    </thead>

                    <tbody id="portfolio">
                        {% for position in portfolio_data %}
                        {% if position != "TOTAL" %}
                        <tr id="tickerfifo_{{position}}">

                            <th class="align-middle">{{position}}</th>

                            <td class="text-right align-middle">
                                <span id="{{position}}_F_position">
                                    <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                        width="30" height="30"></img>
                                </span>

                            </td>


                            <td class="text-right align-middle">
                                <span id="{{position}}_F_trade_fees_fx">
                                    <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                        width="30" height="30"></img>
                                </span>

                            </td>

                            <td class="text-right align-middle redgreen">
                                <span id="{{position}}_F_pnl_net">
                                    <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                        width="30" height="30"></img>
                                </span>

                            </td>
                            <td class="text-right align-middle">
                                <span id="{{position}}_F_breakeven">
                                    <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                        width="30" height="30"></img>
                                </span>
                            </td>
                            <td class="text-right align-middle">
                                <span id="{{position}}_perc_breakeven">
                                    <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                        width="30" height="30"></img>
                                </span>
                            </td>
                            <td class="text-right align-middle">
                                <span id="{{position}}_be_calculator_FIFO">
                                    <a style="color: lightslategray; position: relative; cursor: pointer;" tabindex="0"
                                        data-toggle="popover" class="cost_popover" data-trigger="focus"
                                        data-accounting='LIFO' title="Cost calculations for {{position}}"
                                        data-placement="bottom" data-content="<span class='text-center'><img src='{{url_for('warden.static', filename='images/loading_small.gif')}}' width='30'
                                    height='30'></img></span>" data-html="true" data-ticker={{position}}>
                                        <i class="fas fa-calculator"></i>
                                    </a>
                                </span>
                            </td>
                        </tr>
                        {% endif %}
                        {% endfor %}

                        <tr id="tickerTOTAL" class="table-dark">
                            <th class="align-middle" scope="row">TOTAL</th>

                            <td class="text-right align-middle">
                                <span id="F_total">
                                    <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                        width="30" height="30"></img>
                                </span>

                            </td>

                            <td class="text-right align-middle">
                                <span id="F_fees">
                                    <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                        width="30" height="30"></img>
                                </span>
                            </td>

                            <td class="text-right align-middle">
                                <span id="F_pnl">
                                    <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                        width="30" height="30"></img>
                                </span>
                            </td>
                            <td class="text-right small align-middle">
                            </td>
                            <td class="text-right small align-middle">
                            </td>
                            <td class="text-right small align-middle">
                            </td>
                        </tr>

                    </tbody>
                </table>
            </span>
        </div>
        <!-- END Cost Analysis Section -->

        <!-- START Market Data Section -->
        <div class="content-section table-responsive">
            <div class="lead">Market Data</div>
            <table id="marketdatatable" class="table table-sm small-text">
                <thead class="thead-light">
                    <tr>
                        <th scope="col">
                            Ticker
                        </th>

                        <th class="text-right">
                            Price ({{current_app.fx['symbol']}})
                        </th>

                        <th class="text-right small">
                            24hr Chg
                        </th>
                        <th class="text-center small">
                            24hr Price Range
                        </th>
                        <th class="text-right small">
                            24hr Volume
                        </th>
                        <th class="text-right small">
                            Mkt Cap
                        </th>

                        <th class="text-right small">
                            Last Update
                        </th>

                        <th class="text-right small">
                            Source
                        </th>

                    </tr>
                </thead>

                <tbody id="portfolio">
                    {% for position in portfolio_data %}

                    {% if position != "TOTAL" %}


                    <tr id="tickerdata_{{position}}">


                        <th class="align-middle" scope="row">
                            {{position}}
                        </th>

                        <td class="text-right align-middle hinumbersmall">
                            <strong>
                                <span id="{{position}}_mkt_price">
                                    <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                        width="30" height="30"></img>
                                </span>


                            </strong>
                        </td>

                        <td class="text-right align-middle small redgreen">
                            <span id="{{position}}_24h_change">
                                <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}' width="30"
                                    height="30"></img>
                            </span>
                        </td>

                        <td class="text-center small">
                            <span id="{{position}}_24h_range">
                                <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}' width="30"
                                    height="30"></img>
                            </span>

                        </td>


                        <td class="text-right align-middle small">
                            <span id="{{position}}_volume">
                                <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}' width="30"
                                    height="30"></img>
                            </span>
                        </td>


                        <td class="text-right align-middle small">
                            <span id="{{position}}_mktcap">
                                <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}' width="30"
                                    height="30"></img>
                            </span>

                        </td>

                        <td class="text-right align-middle small">
                            <span id="{{position}}_lastupdate">
                                <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}' width="30"
                                    height="30"></img>
                            </span>
                        </td>


                        <td class="text-right align-middle small">
                            <span id="{{position}}_source">
                                <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}' width="30"
                                    height="30"></img>
                            </span>

                        </td>
                        {%endif%}

                    </tr>

                    {% endfor %}


                </tbody>
            </table>
        </div>
        <!-- END Market Data Section -->


        <!-- START Bitcoin Address Summary -->
        <div>
            <div class='row'>
                <div class='col-6'>
                    <div class="content-section table-responsive">
                        <span class="lead">Specter Server Status</span>
                        <span class="float-right">
                            <a href="{{current_app.specter.base_url}}" target="_blank"
                                style="text-decoration: none; color:gray;">
                                <i class="fas fa-external-link-square-alt fa-lg"></i>
                            </a>
                        </span>
                        </br>
                        <table id="btctable" class="table table-sm small-text">
                            <tbody>
                                <tr>
                                    <td>Last Data Refresh</td>
                                    <td id='specter_refresh' class="text-right"> <img src='{{url_for('warden.static',
                                        filename='images/loading_small.gif' )}}' width="30" height="30"></img> </td>
                                </tr>

                            </tbody>
                        </table>
                    </div>
                    <div class="content-section table-responsive">

                        <span class="lead">Bitcoin Node Status</span>
                        <span class="float-right">

                        </span>
                        </br>

                        <table id="btctable" class="table table-sm small-text">
                            <tbody>

                                <tr>
                                    <td>Latest Block</td>
                                    <td id='current_block' class="text-right"> <img src='{{url_for('warden.static',
                                        filename='images/loading_small.gif' )}}' width="30" height="30"></img> </td>
                                </tr>


                                <tr>
                                    <td>Size on Disk</td>
                                    <td id='size_on_disk' class="text-right">
                                        <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                            width="30" height="30"></img>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Difficulty</td>
                                    <td id='difficulty' class="text-right">
                                        <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                            width="30" height="30"></img>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Bitcoin Core Version</td>
                                    <td id='core_version' class="text-right">
                                        <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                            width="30" height="30"></img>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Connection Count</td>
                                    <td id='connection_count' class="text-right">
                                        <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                            width="30" height="30"></img>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Mempool Size</td>
                                    <td id='mempool_size' class="text-right">
                                        <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                            width="30" height="30"></img>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Node Uptime</td>
                                    <td id='uptime' class="text-right">
                                        <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                            width="30" height="30"></img>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                    </td>
                                    <td>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class='col-6'>
                    <!-- START Mempool  Section -->
                    <div class="content-section table-responsive">
                        <span class="lead">Mempool Data</span>
                        <span class='float-right small' id='mempool_source'>
                        </span>

                        <h6 style='padding-top: 10px;'>Fee Estimates</h6>

                        <table id="time" class="table-condensed table-right text-right">
                            <tbody>
                                <tr>

                                    <td id='fastest_fee' class="text-left border-bottom hinumbersmall"
                                        data-toggle="tooltip" data-placement="top"
                                        title="If you are in a rush, this is how much you need to pay in fees to have fast confirmation time">
                                        <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                            width="30" height="30"></img>
                                    </td>

                                    <td id='30min_fee' class="text-center border-bottom hinumbersmall"
                                        data-toggle="tooltip" data-placement="top"
                                        title="This is how much you need to pay to get your transaction confirmed in 30 min (estimate)">
                                        <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                            width="30" height="30"></img>
                                    </td>

                                    <td id='1hr_fee' class="text-right border-bottom hinumbersmall"
                                        data-toggle="tooltip" data-placement="top"
                                        title="This is how much you need to pay to get your transaction confirmed in 60 min (estimate)">
                                        <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                            width="30" height="30"></img>
                                    </td>


                                </tr>
                                <tr>
                                    <td class="small text-left">
                                        Fastest Fee
                                    </td>

                                    <td class="small text-center">
                                        30 min Fee
                                    </td>

                                    <td class="small text-right">
                                        1 hour Fee
                                    </td>

                                </tr>
                            </tbody>
                        </table>
                        <br>
                        <h6>Latest Blocks</h6>
                        <table id="mempooltable" class="table table-sm small-text">
                            <thead class="thead-light">
                                <tr>
                                    <th class='text-center'>
                                        Time
                                    </th>
                                    <td class='text-right'>
                                        Block Height
                                    </td>
                                    <td class='text-right'>
                                        # Transactions
                                    </td>
                                    <td class='text-right'>
                                        Size
                                    </td>

                                </tr>
                                <tr>
                                    <th class='text-center' id='time_0'>
                                        <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                            width="30" height="30"></img>
                                    </th>
                                    <td class='text-right' id='height_0'>
                                        <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                            width="30" height="30"></img>
                                    </td>
                                    <td class='text-right' id='txs_0'>
                                        <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                            width="30" height="30"></img>
                                    </td>
                                    <td class='text-right' id='size_0'>
                                        <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                            width="30" height="30"></img>
                                    </td>

                                </tr>
                                <tr>
                                    <th class='text-center' id='time_1'>
                                        <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                            width="30" height="30"></img>
                                    </th>
                                    <td class='text-right' id='height_1'>
                                        <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                            width="30" height="30"></img>
                                    </td>
                                    <td class='text-right' id='txs_1'>
                                        <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                            width="30" height="30"></img>
                                    </td>
                                    <td class='text-right' id='size_1'>
                                        <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                            width="30" height="30"></img>
                                    </td>
                                </tr>
                                <tr>
                                    <th class='text-center' id='time_2'>
                                        <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                            width="30" height="30"></img>
                                    </th>
                                    <td class='text-right' id='height_2'>
                                        <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                            width="30" height="30"></img>
                                    </td>
                                    <td class='text-right' id='txs_2'>
                                        <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                            width="30" height="30"></img>
                                    </td>
                                    <td class='text-right' id='size_2'>
                                        <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                            width="30" height="30"></img>
                                    </td>
                                </tr>
                                <tr>
                                    <th class='text-center' id='time_3'>
                                        <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                            width="30" height="30"></img>
                                    </th>
                                    <td class='text-right' id='height_3'>
                                        <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                            width="30" height="30"></img>
                                    </td>
                                    <td class='text-right' id='txs_3'>
                                        <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                            width="30" height="30"></img>
                                    </td>
                                    <td class='text-right' id='size_3'>
                                        <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                            width="30" height="30"></img>
                                    </td>
                                </tr>
                                <tr>
                                    <th class='text-center' id='time_4'>
                                        <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                            width="30" height="30"></img>
                                    </th>
                                    <td class='text-right' id='height_4'>
                                        <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                            width="30" height="30"></img>
                                    </td>
                                    <td class='text-right' id='txs_4'>
                                        <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                            width="30" height="30"></img>
                                    </td>
                                    <td class='text-right' id='size_4'>
                                        <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                            width="30" height="30"></img>
                                    </td>
                                </tr>
                                <tr>
                                    <th class='text-center' id='time_5'>
                                        <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                            width="30" height="30"></img>
                                    </th>
                                    <td class='text-right' id='height_5'>
                                        <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                            width="30" height="30"></img>
                                    </td>
                                    <td class='text-right' id='txs_5'>
                                        <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                            width="30" height="30"></img>
                                    </td>
                                    <td class='text-right' id='size_5'>
                                        <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}'
                                            width="30" height="30"></img>
                                    </td>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <!-- END Mempool Data Section -->

                </div>
            </div>
            <!-- END Bitcoin Address Summary -->
        </div>

        <!-- Notes -->
        <div class='row'>
            <div class="container-fluid small">
                <i>
                    <sup>1</sup> All returns in this page are in {{current_app.fx['name_plural'].title()}}.
                    <br>
                    {%if current_app.fx['symbol'] != 'USD'%}
                    This means that the returns include the asset returns plus the currency return in the period.
                    <br>For example, if Bitcoin in USD is up 5% and the {{current_app.fx['name']}} is
                    up
                    1%, the
                    return will be 6.05% in {{FX}}.
                    {%endif%}
                </i>
            </div>
        </div>


    </div>
    <div class="col-sm-4">

        <!-- START Portfolio Statistics section -->
        <div class="content-section">

            <span class="lead">Portfolio Performance </span></br>
            <span id='stats_dates_txt' class="small text-muted"></span>

            <table id="positionstable" class="table table-sm small-text">
                <tbody>
                    <tr>
                        <td>Current NAV</td>
                        <td id='end_nav' class="text-right"> <img src='{{url_for('warden.static',
                                filename='images/loading_small.gif' )}}' width="30" height="30"></img> </td>
                    </tr>
                    <tr>
                        <td>Highest NAV</td>
                        <td id='max_nav' class="text-right"> <img src='{{url_for('warden.static',
                                filename='images/loading_small.gif' )}}' width="30" height="30"></img> </td>
                    </tr>
                    <tr>
                        <td>Lowest NAV</td>
                        <td id='min_nav' class="text-right"> <img src='{{url_for('warden.static',
                                filename='images/loading_small.gif' )}}' width="30" height="30"></img> </td>
                    </tr>
                    <tr>
                        <td>Portfolio Value</td>
                        <td class="text-right">
                            {{current_app.fx['symbol']}}
                            <span id='end_portvalue'> <img src='{{url_for('warden.static',
                                    filename='images/loading_small.gif' )}}' width="30" height="30"></img>
                            </span>
                        </td>
                    </tr>

                    <tr>
                        <td>Highest Value</td>
                        <td class="text-right">
                            {{current_app.fx['symbol']}}
                            <span id='max_portvalue'>
                                <img src='{{url_for('warden.static', filename='images/loading_small.gif' )}}' width="30"
                                    height="30"></img>
                            </span>
                        </td>
                    </tr>


                    <tr>
                        <th colspan="2">NAV Returns</th>
                    </tr>

                    <tr>
                        <td>Since last 'close'</td>
                        <td id='return_1d' class="text-right redgreen"> <img src='{{url_for('warden.static',
                                filename='images/loading_small.gif' )}}' width="30" height="30">
                            </img> </td>
                    </tr>
                    <tr>
                        <td>1 week</td>
                        <td id='return_1wk' class="text-right redgreen"> <img src='{{url_for('warden.static',
                                filename='images/loading_small.gif' )}}' width="30" height="30"></img> </td>
                    </tr>
                    <tr>
                        <td>30 days</td>
                        <td id='return_30d' class="text-right redgreen"> <img src='{{url_for('warden.static',
                                filename='images/loading_small.gif' )}}' width="30" height="30"></img> </td>
                    </tr>
                    <tr>
                        <td>90 days</td>
                        <td id='return_90d' class="text-right redgreen"> <img src='{{url_for('warden.static',
                                filename='images/loading_small.gif' )}}' width="30" height="30"></img> </td>
                    </tr>
                    <tr>
                        <td>Since ATH</td>
                        <td id='return_ATH' class="text-right redgreen"> <img src='{{url_for('warden.static',
                                filename='images/loading_small.gif' )}}' width="30" height="30"></img> </td>
                    </tr>
                    <tr>
                        <td>Since inception</td>
                        <td id='return_SI' class="text-right redgreen"> <img src='{{url_for('warden.static',
                                filename='images/loading_small.gif' )}}' width="30" height="30"></img> </td>
                    </tr>

                </tbody>

            </table>

        </div>
        <!-- END Portfolio Statistics section -->

        <!-- START stackcharts -->
        <div class="row">
            <div class='col-sm-12'>
                <div>
                    <!-- NAV Chart -->
                    <div id="stackchart" style="height: 350px; margin: 0 auto">
                        <span class="loadanim">&nbsp;Loading Stack Chart</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- END Charts -->

        <!-- START charts -->
        <div class="row">
            <div class='col-sm-12'>
                <div>
                    <!-- NAV Chart -->
                    <div id="navchart" style="height: 350px; margin: 0 auto">
                        <span class="loadanim">&nbsp;Loading NAV Chart</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- END Charts -->


    </div>

</div>

</br>

{% endblock content %}


{%block modals%}
<!-- Modal for FIFO Transactions -->
<div class="modal fade" id="FIFOLIFOModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" style="min-width:65%;" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Cost basis calculation for open positions</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id='accounting_transactions'>
                <p><strong>Below is a list of transactions being used to calculate your unrealized PnL</strong></p>


                <div class='row' id='accounting_table' style='justify-content: center;'>
                    <div class="spinner-grow spinner-grow-sm" role="status">
                        <span class="sr-only">Loading...</span>
                    </div></img>
                </div>

                <div>
                    <h5 class='border-bottom'>Calculation of unrealized PnL</h5>
                    <p>The <strong>Unrealized Breakeven price</strong> is calculated as a weighted average of all
                        the
                        transactions above.
                    </p>
                    <p>These transactions are the ones associated with your current open position. The
                        (<code>Q(acum)</code>)
                        column shows the cumulative quantity until it totals the current position.</p>
                    <p>For FIFO, these are the newest transactions. Old ones are considered realized PnL.</p>

                    <p>For LIFO, these are the oldest transactions.</p>
                </div>


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>



{% endblock modals %}