{% 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="common.task_orders"|translate) %}
    {% 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">
        {{ "task_orders.add_new_button" | translate }}
      </a>
    {% endif %}
{% endcall %}

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

<div class="portfolio-funding">

  {% if task_orders  %}
    {{ TaskOrderList(task_orders) }}
  {% else %}
    {{ EmptyState(
      header="task_orders.empty_state.header"|translate,
      message="task_orders.empty_state.message"|translate,
      button_link=url_for('task_orders.form_step_one_add_pdf', portfolio_id=portfolio.id),
      button_text="task_orders.empty_state.button_text"|translate,
      view_only_text="task_orders.empty_state.view_only_text"|translate,
      user_can_create=user_can(permissions.CREATE_TASK_ORDER),
    ) }}
  {% endif %}
</div>

{% endblock %}