{% 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" style="margin-bottom: 0.1rem;">
                {{ proposal.headline }}
            </h1>

            <p>
                <span style="color:grey;">
                Posted on {{ proposal.date_added.strftime('%Y-%m-%d') }} by <a href="/user/{{ proposal.user.username }}">{{ proposal.user.username}}</a>
                </span>
                <br>
                <span>
                Status:
                {% if proposal.status == 0 %}
                    <span style="color:red;">Disabled</span>
                {% elif proposal.status == 1 %}
                    Seeking community approval
                {% elif proposal.status == 2 %}
                    Seeking funding
                {% elif proposal.status == 3 %}
                    WIP / Help needed
                {% elif proposal.status == 4 %}
                    Completed
                {% endif %}
                </span>
                {% if proposal.status <= 1 %}
                <br>
                <span>
                    Target: <b>{{proposal.funds_target|round}}</b> WOW
                     {% if proposal.funds_target_usd %}
                    <small>➞ {{proposal.funds_target_usd}} USD</small>
                    {% endif %}
                </span>
                {% endif %}
            </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>
            {% if proposal.status >= 2 %}
            <div class="row">
                <div class="col-md-12">
                    <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
                                                     {% if proposal.funds_target_usd %}
                                                    <small>➞ {{proposal.funds_target_usd}} USD</small>
                                                    {% endif %}
                                                    </span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>Funded</td>
                                                <td><span class="badge">{{proposal.balance['pct'] | round or 0}} %</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['available']|round(3) or 0 }} WOW Raised
                                    {% if (proposal.funds_target-proposal.balance['available']|float|round(3)) > 0 %}
                                        ({{ (proposal.funds_target-proposal.balance['available']|float|round(3)|int) }} WOW until goal)
                                        {% else %}
                                        ({{ (proposal.balance['available']-proposal.funds_target|float|round(3)|int) }} WOW past goal!)
                                    {% endif %}
                                    <div class="progress">
                                        <div class="progress-bar progress-warning progress-bar" style="width: {{proposal.balance['pct']}}%;">
                                        </div>
                                    </div>
                                    <hr>
                                </div>
                                <br/>

                                <br/>
                                <div class="col-lg-8">
                                    {{proposal.spends['spent']|round(3) or 0}} WOW Paid out
                                    <div class="progress">
                                        <div class="progress-bar progress-warning progress-bar" style="width: {{proposal.spends['spent_remaining_pct']}}%;">
                                        </div>
                                    </div>
                                    <hr>
                                </div>
                                <div class="col-lg-8">
                                    {{(proposal.balance['available']-proposal.spends['spent']) |round(3) or 0}} WOW Available to Payout
                                    <div class="progress">
                                        <div class="progress-bar progress-warning progress-bar" style="width: {{proposal.balance['remaining_pct']}}%;">
                                        </div>
                                    </div>
                                    <hr>
                                </div>

                                <br/>
                            </div>
                            <div class="row" style="margin-top:16px;">
                                <div class="col-lg-12">
                                    Donation address:
                                    <pre class="proposal_address">{% if proposal.addr_donation %}{{ proposal.addr_donation }}{% else %}<small>None generated yet</small>{% endif %}</pre>
                                </div>

                                {% if proposal.addr_donation %}
                                <div class="col-lg-12">
                                    <img class="proposal_qr" src="/api/1/qr?address={{ proposal.addr_donation }}">
                                </div>
                                {%  endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% elif proposal.status == 0 %}
                <div class="row">
                    <div class="col-lg-12">
                        <div class="alert alert-danger">
                            This proposal is disabled.
                        </div>
                    </div>
                </div>
            {% endif %}

            <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(3)}} WOW
                                {% if 'amount_usd' in tx %}
                                <small style="color: black">
                                    ➞ $ {{tx['amount_usd']}}
                                </small>
                                {% endif %}
                            </span>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- /.row -->
    {% endif %}


{% if proposal.spends['txs'] %}
    <div class="row">
        <div class="col-md-12">
            <div class="card my-6" id="incoming_txs">
                <h5 class="card-header">Outgoing transactions <small>({{proposal.spends['txs']|length}})</small></h5>
                <div class="card-body">
                    <ul class="list-group">
                        {% for tx in proposal.spends['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:#890000;font-weight:bold;">
                                - {{tx['amount_human']|round(3)}} WOW
                                {% if 'amount_usd' in tx %}
                                <small style="color: black">
                                    ➞ $ {{tx['amount_usd']}}
                                </small>
                                {% endif %}
                            </span>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- /.row -->
    {% endif %}
</div>

<script>
    $(document).ready(function(){
        let regexp_xss = /^[a-zA-Z0-9.:\/]+$/;
        let regexp_address = /(W[o|W][a-zA-Z0-9]{95})/g;
        let regexp_imgur = /(https:\/\/i.imgur.com\/[a-zA-Z0-9]{0,7}.[jpg|png|gif|webm]+)/g;
        let regexp_imgflip = /(https:\/\/i.imgflip.com\/[a-zA-Z0-9]{0,7}.[jpg|png|gif|webm]+)/g;
        let truncated_addy = function(obj){ return `<span data-addy="${obj}" class="wow_addy">${obj.substring(0, 4)}...${obj.slice(-4)}</span>`; }

        function rich_addy(obj) {
            // richtext addy's
            let html = obj.html();
            var matches = html.match(regexp_address);
            if(matches) {
                matches.filter(function(value, index,self){ return self.indexOf(value) === index; }).forEach(function (obj) {
                    html = html.replace(new RegExp(obj, 'g'), truncated_addy(obj));
                });
            }
            obj.html(html);
        }

        function rich_img(obj) {
            // convert images to <img>
            let html = obj.html();
            let uid = obj.attr('data-id');
            if(uid == 30){
                debugger;
            }

            var matches = html.match(regexp_imgur) || [];
            matches = matches.concat(html.match(regexp_imgflip));
            if(matches) {
                matches.filter(function (value, index, self) {
                    return self.indexOf(value) === index && typeof value === 'string';
                }).forEach(function (obj) {
                    html = html.replace(new RegExp(obj, 'g'), `<br><img src="${obj}"/></a><br>`)
                });
            }
            obj.html(html);
        }

        $(document).on('click', '.wow_addy', function(event){
            let obj = $(this);
            if(obj.attr('data-active') === "true"){
                //obj.attr('data-active', 'false');
                //obj.html(truncated_addy(obj.attr('data-addy')));
            } else {
                obj.attr('data-active', 'true');
                obj.html(obj.attr('data-addy'));
            }
        });

        $('.comments-panel .comment-container .media-body span.body').each(function (i, obj){
            obj = $(obj);

            // convert images to <img>
            rich_img(obj);

            // truncate addys
            let html = rich_addy(obj);
        });
    });
</script>

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