{% 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' %}

{% if request.is_pending_financial_verification and not f.errors and not extended %}
  {{ Alert('Pending Financial Verification', fragment="fragments/pending_financial_verification.html") }}
{% endif %}

{% if review_comment %}
  {% include 'requests/comment.html' %}
{% endif %}

<financial inline-template v-bind:initial-data='{{ f.data|mixedContentToJson }}'>
<div class="col">

  {% if extended %}
    {{ Alert('Task Order not found in EDA',
      message="We could not find your Task Order in the EDA, our system of record. Please confirm that you have entered the information correctly and resubmit or click on the button below to enter the TO manually.",
      level='warning'
    ) }}
  {% endif %}

  {% if f.is_missing_task_order_number %}
    {% set extended_url = url_for('requests.financial_verification', request_id=request.id, extended=True) %}
    {% call Alert('Task Order not found in EDA', level='warning') %}
        We could not find your Task Order in our system of record, EDA. Please confirm that you have entered it correctly.<br>
        <a class="usa-button" href="{{ extended_url }}">Enter Task Order information manually</a>
    {% endcall %}
  {% endif %}

  {% block form_action %}
    {% if extended %}
      <form method='POST' action="{{ url_for('requests.financial_verification', request_id=request.id, extended=True) }}" autocomplete="off" enctype="multipart/form-data">
    {% else %}
      <form method='POST' action="{{ url_for('requests.financial_verification', request_id=request.id) }}" autocomplete="off">
    {% endif %}
  {% endblock %}

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

    {% if f.errors %}
      {{ Alert('There were some errors',
        message="<p>Please see below.</p>",
        level='error'
      ) }}
    {% endif %}

  <div class="panel">

    <div class="panel__heading">
      <h1>Financial Verification</h1>
      <div class="subtitle" id="financial-verification"><h2>Request: {{ request.displayname }}</h2></div>
    </div>

    <div class="panel__content">

        <p>In order to get you access to the JEDI Cloud, we will need you to enter the details below that will help us verify and account for your Task Order.</p>

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

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

            {{ DateInput(f.expiration_date, placeholder='MM / DD / YYYY', validation='date', tooltip='Please enter the expiration date for the task order only and do not include options that you may choose to exercise in the future.') }}

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

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

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

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

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

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

            <div class="usa-input usa-input--validation--anything {% if f.task_order.errors %} usa-input--error {% endif %}">
              {{ f.task_order.label }}
              {{ f.task_order }}
              {% for error in f.task_order.errors %}
                <span class="usa-input__message">{{error}}</span>
              {% endfor %}
            </div>
          </fieldset>
        {% endif %}

        {{ TextInput(
          f.task_order_number,
          placeholder="e.g.: 1234567899C0001",
          tooltip="A Contracting Officer will likely be the best source for this number.",
          validation="anything"
          ) }}

        {{ TextInput(f.uii_ids,
          paragraph=True,
          placeholder="examples: \nDI 0CVA5786950 \nUN1945326361234786950",
          tooltip="A Unique Item Identifer is a unique code that helps the Department of Defense track and report on where and how digital assets are stored. <br>Not all applications have an existing UII number assigned."
          ) }}

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

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

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

        <hr />

        <h3>Contracting Officer (KO) Information</h3>

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

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

        <hr />

        <h3>Contracting Officer Representative (COR) Information</h3>
        <div class='form-row'>
          <div class='form-col form-col--half '>{{ TextInput(f.fname_cor) }}</div>
          <div class='form-col form-col--half '>{{ TextInput(f.lname_cor) }}</div>
        </div>

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


      {% endautoescape %}

    </div>
  </div>

  {% endblock form %}
  {% block next %}
  <div class='action-group'>
    <input type='submit' class='usa-button usa-button-primary' value='Save & Continue' />
  </div>
  {% endblock %}
  </form>

</div>
</financial>

{% endblock %}