{% 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 TaskOrderButton(task_order, route, text="Edit", secondary=False) %}
<a href="{{ url_for(route, task_order_id=task_order.id) }}" class="usa-button {{ 'usa-button-secondary' if secondary else '' }}">
  {{ text }}
</a>
{% endmacro %}

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

{% macro TaskOrderDate(task_order) %}
  <span class="datetime">
    <!-- Draft: {Begins, Began} start_date -->
    <!-- Everything else: {Starts, Started} start_date | {Ends, Ended} end_date -->

    {% if task_order.is_draft %}
      {% if task_order.has_begun %}
        Started on
      {% else %}
        Starts on
      {% endif %}
      {{ TaskOrderDateTime(task_order.time_created) }}
    {% else %}
      {% if task_order.has_begun %}
        Began
      {% else %}
        Begins
      {% endif %}
      {{ TaskOrderDateTime(task_order.start_date) }}
    {% endif %}

    {% if not task_order.is_draft %}
      &nbsp;&nbsp;|&nbsp;&nbsp;

      {% if task_order.has_ended %}
        Ended
      {% else %}
        Ends
      {% endif %}

      {{ TaskOrderDateTime(task_order.end_date) }}
    {% endif %}
  </span>
{% endmacro %}

{% macro TaskOrderActions(task_order) %}
  <div class="task-order-card__buttons">
    {% if task_order.is_draft and user_can(permissions.EDIT_TASK_ORDER_DETAILS) %}
      {{ TaskOrderButton(task_order, "task_orders.edit")}}
    {% elif task_order.is_expired %}
      {{ TaskOrderButton(task_order, "task_orders.review_task_order", text="View") }}
    {% elif task_order.is_unsigned %}
      {% if user_can(permissions.EDIT_TASK_ORDER_DETAILS) %}
        {{ TaskOrderButton(task_order, "task_orders.form_step_four_review", text="Sign", secondary=True) }}
      {% endif %}
      {{ TaskOrderButton(task_order, "task_orders.review_task_order", text="View") }}
    {% endif %}
  </div>
{% endmacro %}

{% macro TaskOrderList(task_orders, label='success') %}
  <div class="task-order-list">
    {% for task_order in task_orders %}
      <div class="card task-order-card">
        <div class="card__status">
          <span class='label label--{{ label_colors[task_order.status] }}'>{{ task_order.display_status }}</span>
          {{ TaskOrderDate(task_order) }}
          <span class="card__status-spacer"></span>
          <span class="card__button">
            {{ TaskOrderActions(task_order) }}
          </span>
        </div>
        <div class="card__header">
          <h3>Task Order #{{ task_order.number }}</h3>
        </div>
        <div class="card__body">
          <b>Total amount: </b>{{ task_order.total_contract_amount | dollars }}
        </div>
        <div class="card__body">
          <b>Obligated amount: </b>{{ task_order.total_obligated_funds | dollars }}
        </div>
      </div>
    {% endfor %}
  </div>
{% endmacro %}


{% call StickyCTA(text="Task Orders") %}
    {% if user_can(permissions.CREATE_TASK_ORDER) and task_orders %}
      <a href="{{ url_for("task_orders.form_step_one_add_pdf", portfolio_id=portfolio.id) }}" class="usa-button usa-button-primary">Add New Task Order</a>
    {% endif %}
{% endcall %}

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

<div class="portfolio-funding">

  {% if task_orders  %}
    {{ TaskOrderList(task_orders) }}
  {% else %}
    {{ EmptyState(
      header="Add approved task orders",
      message="Upload your approved Task Order here. You are required to confirm you have the appropriate signature. You will have the ability to add additional approved Task Orders with more funding to this Portfolio in the future.",
      button_link=url_for('task_orders.form_step_one_add_pdf', portfolio_id=portfolio.id),
      button_text="Add Task Order",
      view_only_text="Contact your portfolio administrator to add a Task Order.",
      user_can_create=user_can(permissions.CREATE_TASK_ORDER),
    ) }}
  {% endif %}
</div>

{% endblock %}