{% extends "base.html" %}

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

{% from "components/edit_link.html" import EditLink %}
{% from "components/required_label.html" import RequiredLabel %}
{% from "components/icon.html" import Icon %}
{% from "components/date_picker.html" import DatePicker %}
{% from "components/text_input.html" import TextInput %}
{% from "components/alert.html" import Alert %}
{% from "components/review_field.html" import ReviewField %}
{% from "components/upload_input.html" import UploadInput %}


{% block content %}
<ko-review inline-template v-bind:initial-data='{{ form.data|tojson }}'>
  <div class="col task-order-form">

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

    {% block form_action %}
    <form method='POST' action="{{ url_for('portfolios.submit_ko_review', portfolio_id=portfolio.id, task_order_id=task_order.id, form=form) }}" autocomplete="off" enctype="multipart/form-data">
    {% endblock %}

    {{ form.csrf_token }}

    {% block form %}

      <div class="top-message panel">
        <h1 class="subheading title">
          {{ "task_orders.ko_review.title" | translate }}
        </h1>
        {% include "fragments/ko_review_message.html" %}
      </div>

      <div class="panel">
        <div class="panel__content">

          <div class="h2">
            {{ "task_orders.new.review.app_info"| translate }}
          </div>
          {% include "fragments/task_order_review/app_info.html" %}
          <hr>

          <div class="h2">
            {{ "task_orders.new.review.reporting"| translate }}
            {{ EditLink(url_for("task_orders.new", screen=1, task_order_id=task_order.id,  _anchor="reporting", ko_edit=True)) }}
          </div>
          {% include "fragments/task_order_review/reporting.html" %}
          <hr>

          <div class="h2">
            {{ "task_orders.new.review.funding"| translate }}
            {{ EditLink(url_for("task_orders.new", screen=2, task_order_id=task_order.id, ko_edit=True)) }}
          </div>
          {% include "fragments/task_order_review/funding.html" %}

          <div class="form__sub-fields">
            {{ DatePicker(form.start_date) }}
            {{ DatePicker(form.end_date) }}
          </div>
          <hr>

          <div class="h2">
            {{ "task_orders.new.review.oversight"| translate }}
            {{ EditLink(url_for("task_orders.new", screen=3, task_order_id=task_order.id, ko_edit=True)) }}
          </div>
          {% include "fragments/task_order_review/oversight.html" %}
          <hr>

          <div class="h2">{{ "task_orders.ko_review.task_order_information"| translate }}</div>

          <div class="form__sub-fields">
            {{ UploadInput(form.pdf, show_label=True) }}
            {{ TextInput(form.number, placeholder='1234567890') }}

            <div class="task-order__loa-list">
              <ul>
                <li v-for="(loa, i) in loas" class="task-order__loa-list-item">
                  <div class="usa-input usa-input--validation--anything">
                    <label :for="'loas-' + i">
                      <div class="usa-input__title" v-html="'Line of Accounting (LOA) #' + (i + 1)"></div>
                    </label>
                    <input type="text" v-model='loa.number' :id="'loas-' + i" placeholder="1234567890"/>
                    <input type="hidden" :name="'loas-' + i" v-model='loa.number'/>
                  </div>
                  <button v-on:click="removeLOA(i)" v-if="loas.length > 1" type="button" class='loa-list-item__remover'>
                    {{ Icon('trash') }}
                    <span>Remove</span>
                  </button>
                </li>
              </ul>
              <div class="task-order__loa-add-item">
                <button v-on:click="addLOA" class="icon-link" tabindex="0" type="button">{{ Icon('plus') }} Add another LOA</button>
              </div>
            </div>

            {{ TextInput(form.custom_clauses, paragraph=True) }}
          </div>

        </div>
      </div>
      {% endblock %}

      <div class='action-group'>
        <input type='submit' class='usa-button usa-button-primary' value='Continue' />
      </div>

    </form>

  </div>
</ko-review>
{% endblock %}