{% extends "base.html" %}

{% from "components/alert.html" import Alert %}
{% from "components/text_input.html" import TextInput %}
{% from "components/options_input.html" import OptionsInput %}
{% from "components/date_input.html" import DateInput %}

{% block content %}

{% include 'requests/review_menu.html' %}

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

{% if saved_draft %}
  {% call Alert(("requests.financial_verification.draft_saved" | translate), level='success') %}
  {% endcall %}
{% endif %}


{% if jedi_request.is_pending_financial_verification and not f.errors and not extended %}
  {{ Alert(("requests.financial_verification.pending_financial_verification" | translate), fragment="fragments/pending_financial_verification.html") }}
{% endif %}

<financial inline-template v-bind:initial-data='{{ f.data|mixedContentToJson }}'>
<div class="col">
  {% if extended %}
    {{ Alert(("requests.financial_verification.manually_enter_task_information_label" | translate),
      message=("requests.financial_verification.manually_enter_task_information_description" | translate),
      level='warning',
      actions=[
        {
          'href': url_for('atst.helpdocs'),
          'label': ("requests.financial_verification.manually_enter_task_information_help_label" | translate),
          'icon': 'help'
        }
      ]
    ) }}
  {% endif %}

  {% if f.is_missing_task_order_number %}
    {% set extended_url = url_for('requests.financial_verification', request_id=jedi_request.id, extended=True) %}
    {% call Alert(("requests.financial_verification.task_order_not_found_eda_label"), level='warning') %}
        {{ "requsts.financial_verification.task_order_not_found_eda_description" | translate }}
        <br>
        <a class="usa-button" href="{{ extended_url }}">
          {{ "requests.financial_verification.enter_task_order_manually_link_text" | translate }}
        </a>
    {% endcall %}
  {% endif %}

  <form autocomplete="off" enctype="multipart/form-data">

  {{ f.csrf_token }}
  {% block form %}
    {% autoescape false %}

    {% if f.errors and not f.is_only_missing_task_order_number %}
      {{ Alert(("requests.financial_verification.some_errors_label" | translate),
        message="<p>Please see below.</p>",
        level='error'
      ) }}
    {% endif %}

  <div class="panel">

    <div class="panel__heading">
      <h1>{{ "requests.financial_verification.financial_verification_title" | translate }}</h1>
      <div class="subtitle" id="financial-verification">
        <h2>
          {{ "requests.financial_verification.request_title" | translate({ "displayname" : jedi_request.displayname }) }}
        </h2>
      </div>
    </div>

    <div class="panel__content">

        <p>
          {{ "requests.financial_verification.permissions_paragraph" | translate }}
        </p>

        {% if extended %}
          <fieldset class="form__sub-fields form__sub-fields--warning">
            {{ OptionsInput(f.legacy_task_order.funding_type) }}

            <template v-if="funding_type == 'OTHER'" v-cloak>
              {{ TextInput(f.legacy_task_order.funding_type_other) }}
            </template>

            {{
              DateInput(
                f.legacy_task_order.expiration_date,
                placeholder='MM / DD / YYYY',
                validation='date',
                tooltip=("requests.financial_verification.expiration_date_placeholder" | translate)
              )
            }}

            {{ TextInput(
              f.legacy_task_order.clin_0001,
              validation='dollars'
            ) }}

            {{ TextInput(
              f.legacy_task_order.clin_0003,
              validation='dollars'
            ) }}

            {{ TextInput(
              f.legacy_task_order.clin_1001,
              validation='dollars'
            ) }}

            {{ TextInput(
              f.legacy_task_order.clin_1003,
              validation='dollars'
            ) }}

            {{ TextInput(
              f.legacy_task_order.clin_2001,
              validation='dollars'
            ) }}

            {{ TextInput(
              f.legacy_task_order.clin_2003,
              validation='dollars'
            ) }}

            <template v-if="showTaskOrderUpload">
              <div class="usa-input {% if f.legacy_task_order.pdf.errors %} usa-input--error {% endif %}">
                {{ f.legacy_task_order.pdf.label }}
                {{ f.legacy_task_order.pdf }}
                {% for error in f.legacy_task_order.pdf.errors %}
                  <span class="usa-input__message">{{error}}</span>
                {% endfor %}
              </div>
            </template>
            <template v-else>
              <p>Uploaded {{ f.legacy_task_order.pdf.data }}.</p>
              <div>
                <button v-on:click="forceShowTaskOrderUpload($event)">Change</button>
              </div>
            </template>
          </fieldset>
        {% endif %}

        {{ TextInput(
          f.legacy_task_order.number,
          placeholder="e.g.: 1234567899C0001",
          tooltip=("requests.financial_verification.number_placeholder" | translate),
          validation="requiredField"
          ) }}

        {{ TextInput(f.request.uii_ids,
          paragraph=True,
          placeholder="examples: \nDI 0CVA5786950 \nUN1945326361234786950",
          tooltip=("requests.financial_verification.uui_ids_placeholder" | translate)
          ) }}

        {{ TextInput(f.request.pe_id,
          placeholder="e.g.: 0105688F",
          validation="peNumber"
          ) }}

        {{ TextInput(f.request.treasury_code,placeholder="e.g.: 00123456",validation="treasuryCode") }}

        {{ TextInput(f.request.ba_code,placeholder="e.g.: 02A",validation="baCode") }}

        <hr />

        <h3>
          {{ "requests.financial_verification.contracting_officer_information_title" | translate }}
        </h3>

        <div class='form-row'>
          <div class='form-col form-col--half '>{{ TextInput(f.request.fname_co, validation="requiredField") }}</div>
          <div class='form-col form-col--half '>{{ TextInput(f.request.lname_co, validation="requiredField") }}</div>
        </div>

        <div class='form-row'>
          <div class='form-col form-col--half'>{{ TextInput(f.request.email_co,validation='email', placeholder='e.g. jane@mail.mil') }}</div>
          <div class='form-col form-col--half'>{{ TextInput(f.request.office_co, validation="requiredField", placeholder="e.g.: WHS") }}</div>
        </div>

        <hr />

        <h3>
          {{ "requests.financial_verification.contracting_officer_representative_information_title" | translate }}
        </h3>
        <div class='form-row'>
          <div class='form-col form-col--half '>{{ TextInput(f.request.fname_cor, validation="requiredField") }}</div>
          <div class='form-col form-col--half '>{{ TextInput(f.request.lname_cor, validation="requiredField") }}</div>
        </div>

        <div class='form-row'>
          <div class='form-col form-col--half'>{{ TextInput(f.request.email_cor,validation='email', placeholder='e.g. jane@mail.mil') }}</div>
          <div class='form-col form-col--half'>{{ TextInput(f.request.office_cor, validation="requiredField", placeholder="e.g.: WHS") }}</div>
        </div>


      {% endautoescape %}

    </div>
  </div>

  {% endblock form %}
  {% block next %}
  <div class='action-group'>
    <input formmethod="post" formaction="{{ url_for('requests.financial_verification', request_id=jedi_request.id, extended=extended) }}" type='submit' class='usa-button usa-button-primary' value='Save & Continue' />
    <input formmethod="post" formaction="{{ url_for('requests.save_financial_verification_draft', request_id=jedi_request.id, extended=extended) }}" type='submit' class='usa-button usa-button-primary' value='Save Draft' />
  {% if jedi_request.last_finver_draft_saved_at %}
    <em>Draft saved at <localdatetime :timestamp="'{{ jedi_request.last_finver_draft_saved_at.isoformat() }}'"></localdatetime></em>
  {% endif %}
  </div>
  {% endblock %}
  </form>

</div>
</financial>

{% endblock %}