{% extends "./layout/default.twig" %}

{% block breadcrumbs %}
    {{ Breadcrumbs.renderIfExists(Route.getCurrentRoute.getName, piggyBank) }}
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-8 col-md-8 col-sm-6">
        <div class="box">
            <div class="box-header with-border">
                <i class="fa fa-fw fa-clock-o"></i> {{ 'events'|_ }}
            </div>
            <div class="box-body">
                <div id="piggy-bank-history"></div>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-6">
            <div class="box">
                <div class="box-header with-border">
                    <i class="fa fa-fw fa-info-circle"></i> {{ 'details'|_ }}

                    <!-- ACTIONS MENU -->
                    <div class="pull-right">
                        <div class="btn-group">
                            <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
                                {{ 'actions'|_ }}
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu pull-right" role="menu">
                                <li><a href="{{ route('piggy-banks.edit', piggyBank.id) }}"><i class="fa fa-pencil fa-fw"></i> {{ 'edit'|_ }}</a></li>
                                <li><a href="{{ route('piggy-banks.delete', piggyBank.id) }}"><i class="fa fa-trash fa-fw"></i> {{ 'delete'|_ }}</a></li>
                            </ul>
                        </div>
                    </div>

                </div>
                    <table class="table table-bordered table-striped">
                        <tr>
                            <td>{{ 'account'|_ }}</td>
                            <td><a href="{{ route('accounts.show', piggyBank.account_id) }}">{{ piggyBank.account.name }}</a></td>
                        </tr>
                        <tr>
                            <td>{{ 'target_amount'|_ }}</td>
                            <td>{{ piggyBank.targetAmount|formatAmount }}</td>
                        </tr>
                        <tr>
                            <td>{{ 'saved_so_far'|_ }}</td>
                            <td>{{ currentRelevantRepAmount(piggyBank)|formatAmount }}</td>
                        </tr>
                        <tr>
                            <td>{{ 'left_to_save'|_ }}</td>
                            <td>{{ piggyBank.targetamount - currentRelevantRepAmount(piggyBank)|formatAmount }}</td>
                        </tr>
                        <tr>
                            <td>{{ 'start_date'|_ }}</td>
                            <td>
                                {% if piggyBank.startdate %}
                                    {{ piggyBank.startdate.format('jS F Y')}}
                                {% else %}
                                    <em>{{ 'no_start_date'|_ }}</em>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <td>{{ 'target_date'|_ }}</td>
                            <td>
                                {% if piggyBank.targetdate %}
                                    {{ piggyBank.targetdate.format('jS F Y') }}
                                {% else %}
                                    <em>{{ 'no_target_date'|_ }}</em>
                                {% endif %}
                            </td>
                        </tr>
                        {% if piggyBank.reminder %}
                        <tr>
                            <td>{{ 'reminder'|_ }}</td>
                            <td>
                                {% if piggyBank.remind_me == 0 %}
                                    <em>{{ 'no_reminder'|_ }}</em>
                                {% else %}
                                    {{ 'every'|_ }}
                                    {% if piggyBank.reminder_skip != 0 %}
                                        {{ piggyBank.reminder_skip }}
                                    {% else %}
                                        {{ piggyBank.reminder }}(s)
                                    {% endif %}
                                {% endif %}
                            </td>
                        </tr>
                        {% endif %}
                            <tr>
                                <td>{{ 'reminders_left'|_ }}</td>
                                <td>{{ 'todo'|_ }}</td>
                            </tr>
                            <tr>
                                <td>{{ 'expected_amount_per_reminder'|_ }}</td>
                                <td>{{ 'todo'|_ }}</td>
                            </tr>
                    </table>
            </div>
            <div class="box">
                <div class="box-header with-border">
                    <i class="fa fa-fw fa-clock-o"></i> {{ 'table'|_ }}
                </div>
                {% include 'list/piggy-bank-events' %}
            </div>
    </div>

</div>
{% endblock %}

{% block scripts %}
<script type="text/javascript">
    var piggyBankID = {{ piggyBank.id }};
</script>

<!-- load the libraries and scripts necessary for Google Charts: -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/gcharts.options.js"></script>
<script type="text/javascript" src="js/gcharts.js"></script>
<script type="text/javascript" src="js/piggy-banks.js"></script>
{% endblock %}