{% from "components/accordion.html" import Accordion %}
{% from "components/accordion_list.html" import AccordionList %}
{% from "components/empty_state.html" import EmptyState %}
{% from "components/icon.html" import Icon %}
{% from "components/sticky_cta.html" import StickyCTA %}

{% extends "portfolios/base.html" %}

{% block portfolio_content %}

{% macro TaskOrderDateTime(dt, className="") %}
  <local-datetime timestamp="{{ dt }}" format="MMMM D, YYYY" class="{{ className }}"></local-datetime>
{% endmacro %}


{% macro TaskOrderList(task_orders, status) %}
  {% set show_task_orders = task_orders|length > 0 %}
  <div class="accordion">
    {% call Accordion(
      title=("task_orders.status_list_title"|translate({'status': status})),
      id=status,
      heading_tag="h4",
      default_visible=show_task_orders
    ) %}
      {% if show_task_orders %}
        {% for task_order in task_orders %}
          {% set to_number %}
            {% if task_order.number != None %}
              Task Order #{{ task_order.number }}
            {% else %}
              New Task Order
            {% endif %}
          {% endset %}
          <div class="accordion__content--list-item">
            <h4><a href="{{ url_for('task_orders.view_task_order', task_order_id=task_order.id) }}">{{ to_number }} {{ Icon("caret_right", classes="icon--tiny icon--primary" ) }}</a></h4>
            {% if status != 'Expired' -%}
              <div class="row">
                <div class="col col--grow">
                  <h5>
                    Current Period of Performance
                  </h5>
                  <p>
                    {{ task_order.start_date | formattedDate(formatter="%b %d, %Y") }}
                    -
                    {{ task_order.end_date | formattedDate(formatter="%b %d, %Y") }}
                  </p>
                </div>
                <div class="col col--grow">
                  <h5>Total Value</h5>
                  <p>{{ task_order.total_contract_amount | dollars }}</p>
                </div>
                <div class="col col--grow">
                  <h5>Total Obligated</h5>
                  <p>{{ task_order.total_obligated_funds | dollars }}</p>
                </div>
                <div class="col col--grow">
                  <h5>Total Expended</h5>
                  <p>{{ task_order.invoiced_funds | dollars }}</p>
                </div>
              </div>
            {%- endif %}
          </div>
        {% endfor %}
      {% else %}
        <div class="accordion__content--empty">
          {{ "task_orders.status_empty_state" | translate({ 'status': status }) }}
        </div>
      {% endif %}
    {% endcall %}
  </div>
{% endmacro %}


{% call StickyCTA(text="common.task_orders"|translate) %}
    {% if user_can(permissions.CREATE_TASK_ORDER) and to_count > 0 %}
      <a href="{{ url_for("task_orders.form_step_one_add_pdf", portfolio_id=portfolio.id) }}" class="usa-button usa-button-primary">
        {{ "task_orders.add_new_button" | translate }}
      </a>
    {% endif %}
{% endcall %}

{% include "fragments/flash.html" %}

<div class="portfolio-funding">

  {% if to_count > 0 %}
    {% call AccordionList() %}
      {% for status, to_list in task_orders.items() %}
        {{ TaskOrderList(to_list, status) }}
      {% endfor %}
    {% endcall %}
  {% else %}
    {{ EmptyState(
      resource="task_orders",
      button_link=url_for('task_orders.form_step_one_add_pdf', portfolio_id=portfolio.id),
      user_can_create=user_can(permissions.CREATE_TASK_ORDER),
    ) }}
  {% endif %}
</div>

{% endblock %}