{% load i18n %}
{% load django_ledger %}

{% if not create_po %}
    {% if style == 'po-detail' %}
        <div class="card">
            <div class="card-header">
                <h2 class="card-header-title has-text-weight-light is-size-3">
            <span class="icon is-large">
                    {% icon 'uil:bill' 36 %}</span>
                    {{ po_model.po_number }}
                </h2>
            </div>
            <div class="card-content">
                <h2 class="is-size-2 has-text-weight-Bold">{% trans 'Status' %}: {{ po_model.get_po_status_display }}</h2>

                {# Display PO Contract Information #}
                {% if po_model.is_contract_bound %}
                    <h3 class="is-size-4 has-text-weight-light is-italic">{% trans 'Contract' %}:
                        {{ po_model.ce_model.estimate_number }}</h3>
                    <a href="{% url 'django_ledger:customer-estimate-detail' entity_slug=view.kwargs.entity_slug ce_pk=po_model.ce_model_id %}"
                       class="button is-small">{% trans 'View' %}</a>
                {% endif %}

                {% if po_model.is_draft %}
                    <h3 class="is-size-4 has-text-weight-light">{% trans 'Draft Date' %}:{{ po_model.date_draft | date }}</h3>
                    <h3 class="is-size-4 has-text-weight-light">{% trans 'Purchase Order Amount' %}:
                        {% currency_symbol %}{{ po_model.po_amount | currency_format }}</h3>
                {% endif %}

                {% if po_model.is_review %}
                    <h3 class="is-size-4 has-text-weight-light">{% trans 'Review Date' %}:{{ po_model.date_in_review | date }}</h3>
                    <h3 class="is-size-4 has-text-weight-light">{% trans 'Purchase Order Amount' %}:
                        {% currency_symbol %}{{ po_model.po_amount | currency_format }}</h3>
                {% endif %}

                {% if po_model.is_approved %}
                    <h3 class="is-size-4 has-text-weight-light">{% trans 'Approved Date' %}:{{ po_model.date_approved | date }}</h3>
                    <h3 class="is-size-5 has-text-weight-light">{% trans 'Purchase Order Amount' %}:
                        {% currency_symbol %}{{ po_model.po_amount | currency_format }}</h3>
                    <h3 class="is-size-5 has-text-weight-light">{% trans 'Received Amount' %}:
                        {% currency_symbol %}{{ po_model.po_amount_received | currency_format }}</h3>
                    <h3 class="is-size-5 has-text-weight-light">{% trans 'Paid Amount' %}:
                        {% currency_symbol %}{{ total_paid | currency_format }}</h3>
                {% endif %}

                {% if po_model.is_fulfilled %}
                    <h3 class="is-size-4 has-text-weight-light">{% trans 'Fulfilled Date' %}:{{ po_model.date_fulfilled | date }}</h3>
                    <h3 class="is-size-5 has-text-weight-light">{% trans 'Approved' %}:
                        {{ po_model.date_approved | date }}</h3>
                    <h3 class="is-size-5 has-text-weight-light">{% trans 'Purchase Order Amount' %}:
                        {% currency_symbol %}{{ po_model.po_amount | currency_format }}</h3>
                    <h3 class="is-size-4 has-text-weight-light">{% trans 'Fulfilled' %}:
                        <span class="icon has-text-success">{% icon 'ant-design:check-circle-filled' 24 %}</span>
                    </h3>
                {% endif %}
            </div>

            <footer class="card-footer">
                <a href="{% url 'django_ledger:po-update' entity_slug=entity_slug po_pk=po_model.uuid %}"
                   class="card-footer-item has-text-primary has-text-centered">{% trans 'Update' %}</a>

                {# MARK DRAFT #}
                {% if po_model.can_draft %}
                    <a onclick="djLedger.toggleModal('{{ po_model.get_mark_as_draft_html_id }}')"
                       id="{{ po_model.get_mark_as_review_html_id }}-button"
                       class="card-footer-item has-text-info has-text-centered">{% trans 'Mark as Draft' %}</a>
                    {# MARK AS DRAFT MODAL #}
                    {% modal_action_v2 bill po_model.get_mark_as_draft_url po_model.get_mark_as_draft_message po_model.get_mark_as_draft_html_id %}
                {% endif %}

                {# MARK REVIEW #}
                {% if po_model.can_review %}
                    <a onclick="djLedger.toggleModal('{{ po_model.get_mark_as_review_html_id }}')"
                       id="{{ po_model.get_mark_as_review_html_id }}-button"
                       class="card-footer-item has-text-info has-text-centered">{% trans 'Mark as Review' %}</a>
                    {# MARK AS REVIEW MODAL #}
                    {% modal_action_v2 bill po_model.get_mark_as_review_url po_model.get_mark_as_review_message po_model.get_mark_as_review_html_id %}
                {% endif %}

                {# MARK APPROVED #}
                {% if po_model.can_approve %}
                    <a onclick="djLedger.toggleModal('{{ po_model.get_mark_as_approved_html_id }}')"
                       id="{{ po_model.get_mark_as_approved_html_id }}-button"
                       class="card-footer-item has-text-success has-text-centered">{% trans 'Mark as Approved' %}</a>
                    {# MARK AS APPROVED MODAL #}
                    {% modal_action_v2 bill po_model.get_mark_as_approved_url po_model.get_mark_as_approved_message po_model.get_mark_as_approved_html_id %}
                {% endif %}

                {# FULFILL BUTTON #}
                {% if po_model.can_fulfill %}
                    <a onclick="djLedger.toggleModal('{{ po_model.get_mark_as_fulfilled_html_id }}')"
                       id="{{ po_model.get_mark_as_fulfilled_html_id }}-button"
                       class="card-footer-item has-text-success has-text-centered">{% trans 'Fulfill' %}</a>
                    {# MARK AS DELETE MODAL #}
                    {% modal_action_v2 bill po_model.get_mark_as_fulfilled_url po_model.get_mark_as_fulfilled_message po_model.get_mark_as_fulfilled_html_id %}
                {% endif %}

                {# DELETE BUTTON #}
                {% if po_model.can_delete %}
                    <a onclick="djLedger.toggleModal('{{ po_model.get_mark_as_delete_html_id }}')"
                       id="{{ po_model.get_mark_as_delete_html_id }}-button"
                       class="card-footer-item has-text-danger has-text-centered">{% trans 'Delete' %}</a>
                    {# MARK AS DELETE MODAL #}
                    {% modal_action_v2 bill po_model.get_mark_as_delete_url po_model.get_mark_as_delete_message po_model.get_mark_as_delete_html_id %}
                {% endif %}

                {# VOID BUTTON #}
                {% if po_model.can_void %}
                    <a onclick="djLedger.toggleModal('{{ po_model.get_mark_as_void_html_id }}')"
                       id="{{ po_model.get_mark_as_void_html_id }}-button"
                       class="card-footer-item has-text-danger has-text-centered">{% trans 'Void' %}</a>
                    {# MARK AS VOID MODAL #}
                    {% modal_action_v2 bill po_model.get_mark_as_void_url po_model.get_mark_as_void_message po_model.get_mark_as_void_html_id %}
                {% endif %}

                {# CANCEL BUTTON #}
                {% if po_model.can_cancel %}
                    <a onclick="djLedger.toggleModal('{{ po_model.get_mark_as_canceled_html_id }}')"
                       id="{{ po_model.get_mark_as_canceled_html_id }}-button"
                       class="card-footer-item has-text-danger has-text-centered">{% trans 'Cancel' %}</a>
                    {# MARK AS CANCELED MODAL #}
                    {% modal_action_v2 bill po_model.get_mark_as_canceled_url po_model.get_mark_as_canceled_message po_model.get_mark_as_canceled_html_id %}
                {% endif %}

            </footer>

        </div>

    {% endif %}
{% else %}
    <div class="box has-text-centered">
        <a href="{% url 'django_ledger:po-create' entity_slug=entity_slug %}">
            <span class="icon is-large has-text-grey">{% icon "ic:baseline-add-circle-outline" 48 %}</span></a>
        <h2 class="is-size-3 has-text-grey">{% trans 'New PO' %}</h2>
    </div>
{% endif %}