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

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

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

{% block portfolio_content %}

{% set show_dd_254_button = is_so and to_form_complete %}
{% set show_to_info_button = (is_cor or is_ko) and to_form_complete %}
{% set show_sign_to_button = is_ko and dd_254_complete and not is_to_signed %}

{% macro officer_name(officer) -%}
  {%- if not officer -%}
    not yet invited
  {%- elif officer == g.current_user -%}
    you
  {%- else -%}
    {{ officer.full_name }}
  {%- endif -%}
{%- endmacro -%}

{% 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 not task_order.is_active and 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, officer_info) %}
  {% set class = "invited" if officer else "uninvited" %}
  <div class="task-order-invitation-status row">
    <div class="task-order-invitation-status__icon col">
      <span>{{ Icon("avatar" if officer else "alert", classes=class) }}</span>
    </div>
    <div class="col">
      <div class="task-order-invitation-status__title {{ class }}">
        {{ title }}
      </div>
      <div class="task-order-invitation-details">
        {% if officer_info %}
          <div class="col">
            <div>{{ officer_info.first_name }} {{ officer_info.last_name }}</div>
            <div>{{ officer_info.email }}</div>
            <div>{{ officer_info.phone_number | usPhone }}</div>
          </div>
        {% else %}
          <span>not yet invited</span>
        {% endif %}
      </div>
    </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>
        {{
          Step(
            button_text='Edit',
            button_url=url_for("task_orders.new", screen=1, task_order_id=task_order.id),
            complete=to_form_complete,
            description="task_orders.view.steps.draft" | translate({
              "contact": officer_name(task_order.creator)
            })| safe,
          )
        }}
        {{
          Step(
            button_text=show_dd_254_button and ("common.edit" | translate),
            button_url=show_dd_254_button and url_for("task_orders.so_review", task_order_id=task_order.id),
            complete=dd_254_complete,
            description="task_orders.view.steps.security" | translate({
              "security_officer": officer_name(task_order.security_officer)
            }) | safe,
          )
        }}
        {% call Step(
          description="task_orders.view.steps.record" | translate({
            "contracting_officer": officer_name(task_order.contracting_officer),
            "contracting_officer_representative": officer_name(task_order.contracting_officer_representative)
          }) | safe,
          button_url=show_to_info_button and url_for(
            "task_orders.ko_review",
            task_order_id=task_order.id,
          ),
          button_text=show_to_info_button and ("common.edit" | translate),
          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 %}
        {{
          Step(
            button_text=show_sign_to_button and ("common.sign" | translate),
            button_url=show_sign_to_button and url_for(
              "task_orders.ko_review",
              task_order_id=task_order.id,
            ),
            complete=is_to_signed,
            description="task_orders.view.steps.sign" | translate({
              "contracting_officer": officer_name(task_order.contracting_officer)
            }) | safe,
          )
        }}
      </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 %}
          {% if task_order.pdf %}
            {{ DocumentLink(
              title="Task Order",
              link_url=url_for('task_orders.download_task_order_pdf', task_order_id=task_order.id),
              description=description) }}
          {% else %}
            {{ DocumentLink(
              title="Task Order Draft",
              link_url=to_form_complete and url_for('task_orders.download_summary', task_order_id=task_order.id),
              description=description) }}
          {% endif %}
        </div>
        <hr />
        <div class="panel__content">
          {{ DocumentLink(
            title="Instruction Sheet",
            link_url="#") }}
          {{ 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">
          <div class="task-order-invitations__heading row">
            <h3>Invitations</h3>
            {% if to_form_complete %}
              <a href="{{ url_for('task_orders.invitations', task_order_id=task_order.id) }}" class="icon-link">
                <span>{{ "common.manage" | translate }}</span>
                {{ Icon("edit") }}
              </a>
            {% endif %}
          </div>
          {{ InvitationStatus('Contracting Officer', task_order.contracting_officer, officer_info=task_order.officer_dictionary('contracting_officer')) }}
          {{ InvitationStatus('Contracting Officer Representative', task_order.contracting_officer_representative, officer_info=task_order.officer_dictionary('contracting_officer_representative')) }}
          {{ InvitationStatus('IA Security Officer', officer=task_order.security_officer, officer_info=task_order.officer_dictionary('security_officer')) }}
        </div>
      </div>
    </div>
  </div>
</div>

{% endblock %}
