{% extends 'django_ledger/layouts/base.html' %}
{% load i18n %}
{% load static %}
{% load django_ledger %}

{% block content %}
    <section class="section">
        <div class="container is-fluid p-0">
            <div class="columns">
                <div class="column is-2 is-hidden-mobile is-hidden-tablet-only">

                    <div class="columns is-multiline">
                        <div class="column is-12">
                            {% if view.kwargs.unit_slug or request.GET.unit %}
                                {% period_navigation 'unit-dashboard' %}
                            {% else %}
                                {% period_navigation 'entity-dashboard' %}
                            {% endif %}
                        </div>
                        <div class="column is-12">
                            {% navigation_menu 'desktop' %}
                        </div>
                    </div>

                </div>
                <div class="column">
                    <div class="columns is-multiline is-centered">
                        <div class="column is-half">
                            {% include 'django_ledger/includes/widget_bs.html' with tx_digest=tx_digest %}
                        </div>
                        <div class="column is-half">
                            {% include 'django_ledger/includes/widget_ic.html' with tx_digest=equity_digest %}
                        </div>
                        <div class="column is-three-fifths">
                            <div class="box">{% chart_container pnl_chart_id pnl_chart_endpoint %}</div>
                        </div>
                        <div class="column is-two-fifths">
                            {% include 'django_ledger/includes/widget_ratios.html' with tx_digest=tx_digest %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {# RECEIVABLES SECTION START #}
    <section class="section pt-0">
        <div class="container is-fluid px-0">
            <div class="box has-background-light">
                <h2 class="title is-4">
                    <span class="icon mr-2">{% icon "bi:arrow-down-circle" 24 %}</span>
                    {% trans 'Receivables' %}
                </h2>
            </div>
            <div class="columns is-multiline is-centered">
                {% if invoices %}
                    <div class="column is-6-tablet is-4-desktop">
                        <div class="box">
                            {% chart_container receivables_chart_id receivables_chart_endpoint %}
                        </div>
                    </div>
                {% endif %}
                {% for invoice in invoices %}
                    <div class="column is-6-tablet is-4-desktop">
                        {% include 'django_ledger/invoice/includes/card_invoice.html' with invoice=invoice entity_slug=entity.slug style='dashboard' %}
                    </div>
                {% endfor %}
                <div class="column is-6-tablet is-4-desktop">
                    {% include 'django_ledger/invoice/includes/card_invoice.html' with create_invoice=True entity_slug=entity.slug %}
                </div>
            </div>
        </div>
    </section>
    {# RECEIVABLES SECTION END #}

    {# PAYABLES SECTION START #}
    <section class="section pt-0">
        <div class="container is-fluid px-0">
            <div class="box has-background-light">
                <h2 class="title is-4">
                    <span class="icon mr-2">{% icon "bi:arrow-up-circle" 24 %}</span>
                    {% trans 'Payables' %}
                </h2>
            </div>
            <div class="columns is-multiline is-centered">
                {% if bills %}
                    <div class="column is-6-tablet is-4-desktop">
                        <div class="box">
                            {% chart_container payables_chart_id payables_chart_endpoint %}
                        </div>
                    </div>
                {% endif %}
                {% for bill in bills %}
                    <div class="column is-6-tablet is-4-desktop">
                        {% include 'django_ledger/includes/../bills/includes/card_bill.html' with bill=bill entity_slug=entity.slug style='dashboard' %}
                    </div>
                {% endfor %}
                <div class="column is-6-tablet is-4-desktop">
                    {% include 'django_ledger/includes/../bills/includes/card_bill.html' with create_bill=True entity_slug=entity.slug style='dashboard' %}
                </div>
            </div>
        </div>
    </section>
    {# PAYABLES SECTION END #}

{% endblock %}

{% block script_bottom %}
    {{ block.super }}
    <script>
        djLedger.renderPnLChart("{{ pnl_chart_id }}", "{{ view.kwargs.entity_slug }}", fromDate, toDate)
        djLedger.renderNetReceivablesChart("{{ receivables_chart_id }}", "{{ view.kwargs.entity_slug }}", fromDate, toDate)
        djLedger.renderNetPayablesChart("{{ payables_chart_id }}", "{{ view.kwargs.entity_slug }}", fromDate, toDate)
    </script>
{% endblock %}