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

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

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

{% block portfolio_content %}

{% macro Step(description="", complete=True, button_text=None, button_url=None) %}
  <div class="task-order-next-steps__step panel__content">
    <div class="row">
      <div class="task-order-next-steps__icon col">
        {% if complete %}
          <span class="label label--success">Completed</span>
        {% else %}
          <span class="label">Not Started</span>
        {% endif %}
      </div>
      <div class="task-order-next-steps__text col col--grow">
        <div class="task-order-next-steps__heading row">
          <span>{{ description }}</span>
        </div>
      </div>
      <div class="task-order-next-steps__action col">
        {% if button_text and button_url %}
          <a
            href="{{ button_url }}"
            class="usa-button usa-button-primary">
            {{ button_text }}
          </a>
        {% endif %}
      </div>
    </div>

    {% if caller %}
      {{ caller() }}
    {% endif %}
  </div>
{% endmacro %}

{% macro DocumentLink(title="", link_url="", description="") %}
  {% set disabled = not link_url %}
  <div class="task-order-document-link">
    <div class="row">
      <a {% if not disabled %}href="{{ link_url }}"{% endif %} class="icon-link {{ 'icon-link--disabled' if disabled }}" aria-disabled="{{ 'true' if disabled else 'false' }}">
        <div class="task-order-document-link__icon col">
          <span>{{ Icon("download") }}</span>
        </div>
        <div class="task-order-document-title col">
          {{ title }}
        </div>
      </a>
    </div>
    {% if description %}
      <div class="task-order-document-description">
        {{ description }}
      </div>
    {% endif %}
  </div>
{% endmacro %}

{% macro InvitationStatus(title, officer) %}
  {% set class = "invited" if officer else "uninvited" %}
  <div class="task-order-invitation-status row">
    <div class="task-order-invitation-status__icon col">
      <span>{{ Icon("ok" if officer else "alert", classes=class) }}</span>
    </div>
    <div class="task-order-invitation-status__title col {{ class }}">
      {{ title }}
    </div>
  </div>
{% endmacro %}


<div class="task-order-summary">
  {% include "fragments/flash.html" %}

  <div class="panel task-order-heading row">
    <div class="panel__content task-order-heading__name row">
      <h2>New Task Order</h2>
      <span class="label label--{{ task_order.status.value.lower() }}">{{ task_order.status.value }}</span>
    </div>
    <div class="task_order-heading__details row">
      <div class="task-order-heading__value col">
        <dt>Started</dt>
        <dd>
          <local-datetime
            timestamp="{{ task_order.time_created }}"
            format="M/D/YYYY">
            </local-datetime>
        </dd>
      </div>
      <div class="task-order-heading__value col">
        <dt>Task Order Value</dt>
        <dd>{{ task_order.budget | dollars }}</dd>
      </div>
    </div>
  </div>

  <div class="task-order-details">
    <div id="next-steps" class="task-order-next-steps">
      <div class="panel">
        <h3 class="task-order-next-steps__panel-head panel__content">{{ "task_orders.view.whats_next" | translate }}</h3>
        {% call Step(
          description="task_orders.view.steps.draft" | translate | safe,
          button_url=url_for("task_orders.new", screen=1, task_order_id=task_order.id),
          button_text='Edit',
          complete=all_sections_complete) %}
        {% endcall %}
        {{ Step(
          description="task_orders.view.steps.security" | translate | safe,
          complete=False) }}
        {% call Step(
          description="task_orders.view.steps.record" | translate | safe,
          complete=False) %}
          <div class='alert alert--warning'>
            <div class='alert__content'>
              <div class='alert__message'>
                {{ "task_orders.view.steps.record_description" | translate | safe }}
              </div>
            </div>
          </div>
        {% endcall %}
        {% set is_ko = user == task_order.contracting_officer %}
        {{ Step(
          description="task_orders.view.steps.sign" | translate | safe,
          button_url=is_ko and url_for("portfolios.ko_review", portfolio_id=portfolio.id, task_order_id=task_order.id),
          button_text=is_ko and 'Sign',
          complete=False) }}
      </div>
    </div>
    <div class="task-order-sidebar col">
      <div class="task-order-documents panel">
        <div class="panel__content">
          <h3>Download documents</h3>
          {% set description -%}
            last updated on <local-datetime
              timestamp="{{ task_order.time_updated }}"
              format="M/D/YYYY">
              </local-datetime>
          {%- endset %}
          {{ DocumentLink(
            title="Task Order Draft",
            link_url=all_sections_complete and url_for('task_orders.download_summary', task_order_id=task_order.id),
            description=description) }}
        </div>
        <hr />
        <div class="panel__content">
          {{ DocumentLink(
            title="Cloud Services Estimate",
            link_url=task_order.csp_estimate and url_for("task_orders.download_csp_estimate", task_order_id=task_order.id) ) }}
          {{ DocumentLink(
            title="Market Research",
            link_url="#") }}
          {{ DocumentLink(
            title="DD 254",
            link_url="") }}
        </div>
      </div>
      <div class="task-order-invitations panel">
        <div class="panel__content">
          <h3>Invitations</h3>
          {{ InvitationStatus('Contracting Officer', task_order.contracting_officer) }}
          {{ InvitationStatus('Contracting Officer Representative', task_order.contracting_officer_representative) }}
          {{ InvitationStatus('IA Security Officer', officer=task_order.security_officer) }}

          <a href="{{ url_for('portfolios.task_order_invitations', portfolio_id=portfolio.id, task_order_id=task_order.id) }}" class="icon-link">
            {{ Icon("edit") }}
            <span>manage invitations</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

{% endblock %}