{% extends "base.html" %}
{% block content %}
<!-- Page Content -->

<div class="container" style="margin-bottom:140px;">
    {% include 'messages.html' %}

    <div class="row">

        <!-- Post Content Column -->
        <div class="col-lg-12">

            <!-- Title -->
            <h1 class="mt-4">{{ proposal.headline }}</h1>

            <p class="lead">
                <p>Posted on {{ proposal.date_added.strftime('%Y-%m-%d') }} by <a href="/user/{{ proposal.user.username }}">{{ proposal.user.username}}</a></p>
            </p>

            <p>
                {% if proposal.user.username == current_user.username or current_user.admin %}
                    <a href="/proposal/{{proposal.id}}/edit">
                        <button type="button" class="btn btn-success btn-sm">Edit</button>
                    </a>
                {% endif %}
            </p>

            <hr>
            <div class="row">
                <div class="col-md-12">
                    <!-- Side Widget -->
                    <div class="card my-4">
                        <h5 class="card-header">Funds</h5>
                        <div class="card-body">
                            <div class="row the-bar">
                                <div class="col-lg-4">
                                    <table class="table proposal-info-table">
                                        <tbody>
                                            <tr>
                                                <td>Target</td>
                                                <td><span class="badge">{{proposal.funds_target|round}} WOW</span></td>
                                            </tr>
                                            <tr>
                                                <td>Progress</td>
                                                <td><span class="badge">{{proposal.balance['pct'] |round}} %</span></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-8">
                                    {{proposal.balance['txs'] | length}} individual contributions
                                    {% if proposal.balance['txs'] %}
                                    <small>
                                        <a style="margin:4px;" href="#incoming_txs">Details...</a>
                                    </small>
                                    {% endif %}
                                    <div class="progress">
                                        <div class="progress-bar progress-monero progress-bar-striped" style="width: 100.0%;">
                                        </div>
                                    </div>
                                    <hr>
                                </div>
                                <div class="col-lg-8">
                                    {{proposal.balance['remaining'] or 0}} WOW available

                                    <div class="progress">
                                        <div class="progress-bar progress-warning progress-bar" style="width: {{proposal.balance['remaining_pct']}}%;">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row" style="margin-top:16px;">
                                <div class="col-lg-12">
                                    Donatation address:
                                    <pre class="proposal_address">{{ proposal.addr_donation }}</pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="proposal_content">
                <!-- Post Content -->
                {{proposal.html | safe}}
            </div>
        </div>
    </div>

    {% include 'comments.html' %}

    <style>
        #incoming_txs li.list-group-item {
            padding-top: 4px;
            padding-bottom: 4px;
        }
    </style>

    {% if proposal.balance['txs'] %}
    <div class="row">
        <div class="col-md-12">
            <div class="card my-6" id="incoming_txs">
                <h5 class="card-header">Incoming transactions <small>({{proposal.balance['txs']|length}})</small></h5>
                <div class="card-body">
                    <ul class="list-group">
                        {% for tx in proposal.balance['txs'] %}
                        <li class="list-group-item">
                            {{tx['datetime'].strftime('%Y-%m-%d %H:%M')}}
                            <span style="float:right"><b>Blockheight</b>: {{tx['height']}}</span>
                            <br>
                            <a target="_blank" href="https://explore.wownero.com/tx/{{tx['txid']}}">{{tx['txid'][:32]}}...</a>
                            <span style="float:right;color:#008926;font-weight:bold;">+ {{tx['amount_human']|round(2)}} WOW</span>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- /.row -->
    {% endif %}

</div>

<!-- /.container -->
{% endblock %}
