{% 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 ViewLink(task_order) %}
  <a href="{{ url_for('task_orders.view_task_order', task_order_id=task_order.id) }}" class="icon-link view-task-order-link">
    <span>View</span>
    {{ Icon("caret_right", classes="icon--tiny") }}
  </a>
{% endmacro %}

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

{% macro TaskOrderDate(task_order) %}
  <span class="datetime">
    {% if task_order.is_active %}
      Began {{ TaskOrderDateTime(task_order.start_date) }} &nbsp;&nbsp;|&nbsp;&nbsp; Ends {{ TaskOrderDateTime(task_order.end_date) }}
    {% elif task_order.is_expired %}
      Started {{ TaskOrderDateTime(task_order.start_date) }} &nbsp;&nbsp;|&nbsp;&nbsp; Ended {{ TaskOrderDateTime(task_order.end_date) }}
    {% else %}
      Started {{ TaskOrderDateTime(task_order.start_date) }}
    {% endif %}
  </span>
{% endmacro %}


{% macro TaskOrderActions(task_order) %}
  <div class="task-order-buttons">
    {% if task_order.is_active %}
    {% elif task_order.is_expired %}
    {% else %}
    {% endif %}
  </div>
{% endmacro %}

{% macro TaskOrderList(task_orders, label='success') %}
  <div>
    {% for task_order in task_orders %}
      <div class="card">
        <div class="card__status">
          <span class='label label--{{ label }}'>{{ task_order.display_status }}</span>
          {{ TaskOrderDate(task_order) }}
          <span class="card__button">
          </span>
        </div>
        <div class="card__header">
          <h3>Task Order {{ task_order.number }}</h3>
        </div>
        <div class="card__body">
          This is a TO description. This is a TO description. This is a TO description. This is a TO description. This is a TO description. This is a TO description.
        </div>
      </div>
    {% endfor %}
  </div>
{% endmacro %}

<div class="portfolio-funding">

  {% call StickyCTA(text="Funding") %}
    <div class='portfolio-funding__header row'>
      <a href="{{ url_for("task_orders.edit", portfolio_id=portfolio.id) }}" class="usa-button">Start a new task order</a>
    </div>
  {% endcall %}

  {% if not active_task_orders and not pending_task_orders %}
    {{ EmptyState(
      'This portfolio doesn’t have any active or pending task orders.',
      action_label='Add a New Task Order',
      action_href=url_for('task_orders.edit', portfolio_id=portfolio.id),
      icon='cloud',
    ) }}
  {% endif %}

  {% if pending_task_orders %}
    {{ TaskOrderList(pending_task_orders, label='warning') }}
  {% endif %}

  {% if active_task_orders %}
    {{ TaskOrderList(active_task_orders, label='success') }}
  {% endif %}

  {% if expired_task_orders %}
    {{ TaskOrderList(expired_task_orders, label='error') }}
  {% endif %}
</div>

{% endblock %}