{% extends 'task_orders/_new.html' %}

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

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

{% block heading %}
  {{ "task_orders.new.funding.section_title" | translate }}
{% endblock %}

{% block form %}

<funding
  inline-template
  v-bind:initial-data='{{ form.data|tojson }}'
  v-bind:upload-errors='{{ form.csp_estimate.errors | list }}'
  >
  <div>

    <p>{{ "task_orders.new.funding.subtitle" | translate }}</p>
    <!-- Get Funding Section           -->
    <h3 class="subheading">{{ "task_orders.new.funding.performance_period_title" | translate }}</h3>
    <p>{{ "task_orders.new.funding.performance_period_description" | translate }}</p>
    <p>{{ "task_orders.new.funding.performance_period_paragraph" | translate }}</p>
    {{ OptionsInput(form.performance_length) }}

    <hr>

    <h3 class="subheading">{{ "task_orders.new.funding.estimate_usage_title" | translate }}</h3>
    <p>{{ "task_orders.new.funding.estimate_usage_description" | translate }}</p>
    <p><a class="icon-link" target="_blank" href="{{ url_for('atst.jedi_csp_calculator') }}">
      {{ Icon("link")}} Go to Cloud Service Provider’s estimate calculator
    </a></p>
    <p>{{ "task_orders.new.funding.estimate_usage_paragraph" | translate }}</p>
    {{ UploadInput(form.csp_estimate, show_label=True) }}

    <hr>

    <h3 class="subheading">{{ "task_orders.new.funding.cloud_calculations_title" | translate }}</h3>
    <p>{{ "task_orders.new.funding.cloud_calculations_paragraph" | translate }}</p>

    <h4 class="task-order-form__heading subheading">{{ "task_orders.new.funding.cloud_offerings_title" | translate }}</h4>
    <p>{{ "task_orders.new.funding.cloud_offerings_paragraph" | translate }}</p>
    {{ TextInput(form.clin_01, validation='dollars', placeholder="$0.00") }}
    {{ TextInput(form.clin_02, validation='dollars', placeholder="$0.00", disabled=(not config.CLASSIFIED)) }}

    <h4 class="task-order-form__heading subheading">{{ "task_orders.new.funding.support_assistance_title" | translate }}</h4>
    <p>{{ "task_orders.new.funding.support_assistance_paragraph" | translate }}</p>
    {{ TextInput(form.clin_03, validation='dollars', tooltip='The cloud support and assistance packages cannot be used as a primary development resource.', placeholder="$0.00") }}
    {{ TextInput(form.clin_04, validation='dollars', tooltip='The cloud support and assistance packages cannot be used as a primary development resource.', placeholder="$0.00", disabled=(not config.CLASSIFIED)) }}
  </div>
</funding>

{% endblock %}

{% block next %}
<div class="row">
  <div class="col col--grow">
    <p><strong><span  class="task-order-form__heading subheading">{{ "task_orders.new.funding.total" | translate }}</span><br><span id="to-target"></span></strong></p>
  </div>
  <div class="col col--grow">
    {{ super() }}
  </div>
</div>
{% endblock %}
