{% from "components/empty_state.html" import EmptyState %}
{% from "components/icon.html" import Icon %}

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

{% set secondary_breadcrumb = "navigation.portfolio_navigation.breadcrumbs.funding" | translate %}

{% block portfolio_content %}

{% macro ViewLink(task_order) %}
  <a href="{{ url_for('portfolios.view_task_order', portfolio_id=portfolio.id, 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 TaskOrderList(task_orders, label='success', expired=False, funded=False) %}
  <task-order-list
    inline-template
    v-bind:data='{{ task_orders | tojson }}'
    v-bind:expired='{{ 'true' if expired else 'false' }}'
    v-bind:funded='{{'true' if funded else 'false' }}'
    v-cloak
    >
    <div class='responsive-table-wrapper'>
      <table v-cloak>
        <thead>
          <tr>
            <th v-for="col in getColumns()" @click="updateSort(col.displayName)" :width="col.width" :class="col.class" scope="col">
              !{ col.displayName }
              <template v-if="col.sortFunc">
                <span class="sorting-direction" v-if="col.displayName === sortInfo.columnName && sortInfo.isAscending">
                  {{ Icon("caret_down", classes="icon--tiny") }}
                </span>
                <span class="sorting-direction" v-if="col.displayName === sortInfo.columnName && !sortInfo.isAscending">
                  {{ Icon("caret_up", classes="icon--tiny") }}
                </span>
              </template>
            </th>
          </tr>
        </thead>

        <tbody>
          <tr v-for='taskOrder in taskOrders' :key="taskOrder.id">
            <td>
              <span class='label label--{{ label }}'>!{ taskOrder.display_status }</span>
            </td>
            <td>
              <span :class="{ 'to-performance-period': true, 'to-expiring-soon': (taskOrder.days_to_expiration > 0 && taskOrder.days_to_expiration <= days_to_exp_alert_limit), 'funded': funded && taskOrder.display_status === 'Active', 'unfunded': !funded && taskOrder.display_status === 'Active' }">
                <local-datetime
                  v-bind:timestamp="taskOrder.start_date"
                  format="M/D/YYYY">
                  </local-datetime>
                  -
                <local-datetime
                  v-bind:timestamp="taskOrder.end_date"
                  format="M/D/YYYY"
                  class="to-end-date"
                  >
                </local-datetime>
                <span
                  v-if="taskOrder.days_to_expiration > 0 && taskOrder.days_to_expiration <= days_to_exp_alert_limit && funded"
                  class="to-expiration-alert">
                    {{ Icon('ok') }} Period ending in !{ taskOrder.days_to_expiration } days, but new period funded
                </span>
                <span
                  v-if="taskOrder.days_to_expiration > 0 && taskOrder.days_to_expiration <= days_to_exp_alert_limit && !funded"
                  class="to-expiration-alert">
                  {{ Icon('alert') }} Period ends in !{ taskOrder.days_to_expiration } days, submit a new task order
                </span>
              </span>
            </td>
            <td class="table-cell--align-right">
              <span v-html='formatDollars(taskOrder.budget)'></span>
            </td>
            <td v-bind:class="{ 'table-cell--align-right': true, 'unused-balance': expired && taskOrder.balance > 0 }">
              <span v-html='formatDollars(taskOrder.balance)'></span>
            </td>
            <td>
              <a v-bind:href="taskOrder.url" class="icon-link view-task-order-link">
                <span>View</span>
                {{ Icon("caret_right", classes="icon--tiny") }}
              </a>
            </td>
          </tr>
          {{ caller and caller() }}
        </tbody>
      </table>
    </div>
  </task-order-list>
{% endmacro %}

<div class="portfolio-funding">

  <div class='portfolio-funding__header row'>
    <a href="{{ url_for("task_orders.new", screen=1, portfolio_id=portfolio.id) }}" class="usa-button">Start a new task order</a>
  </div>

  {% for task_order in pending_task_orders %}
    <div class='subheading'>
      Pending
    </div>
    <div class='panel pending-task-order row'>
      <span class='label label--warning'>Pending</span>
      <div class="pending-task-order__started col">
        <dt>Started</dt>
        <dd>
          <local-datetime
            timestamp="{{ task_order.time_created }}"
            format="M/D/YYYY">
            </local-datetime>
        </dd>
      </div>
      <div class="pending-task-order__value col">
        <dt>Value</dt>
        <dd>{{ task_order.budget | dollars }}</dd>
      </div>
      {{ ViewLink(task_order) }}
    </div>
  {% endfor %}


  {% 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.new', screen=1, portfolio_id=portfolio.id),
      icon='cloud',
    ) }}
  {% endif %}

  {% if active_task_orders %}
    <div class='subheading'>Active</div>
    {% call TaskOrderList(active_task_orders, label='success', funded=funded) %}
      <tr class='total-balance'>
        <td colspan='4'>
          <span class='label label--success'>Total Active Balance</span>
          <span>{{ total_balance | dollars }}</span>
        </td>
        <td>&nbsp;</td>
      </tr>
    {% endcall %}
  {% endif %}

  {% if expired_task_orders %}
    <div class='subheading'>Expired</div>
    {{ TaskOrderList(expired_task_orders, label='expired', expired=True) }}
  {% endif %}
</div>

{% endblock %}