{% extends "task_orders/builder_base.html" %}

{% from 'components/icon.html' import Icon %}
{% from "components/clin_fields.html" import CLINFields %}
{% from 'task_orders/form_header.html' import TOFormStepHeader %}

{% set action = url_for("task_orders.submit_form_step_three_add_clins", task_order_id=task_order_id) %}
{% set next_button_text = "task_orders.form.step_3.next_button" | translate %}
{% set previous_button_link = url_for("task_orders.form_step_two_add_number", task_order_id=task_order_id) %}
{% set step = "3" %}
{% set sticky_cta_text = 'task_orders.form.sticky_header_text' | translate %}


{% block to_builder_form_field %}
  <div>
    {{ TOFormStepHeader(
      title='task_orders.form.clin_title' | translate,
      description='task_orders.form.clin_description' | translate,
      to_number=task_order.number,
    ) }}

    {% for clin in form.clins %}
      {{ CLINFields(contract_start, contract_end, clin, index=loop.index - 1) }}
    {% endfor %}

    <div v-for="clin in clins">
      {{ CLINFields(contract_start, contract_end) }}
    </div>

    <button
      id="add-clin"
      class="icon-link icon-link__add-another-clin"
      v-on:click="addClin"
      type="button">
      {{ Icon('plus') }}
      <span>{{ 'task_orders.form.add_clin' | translate }}</span>
    </button>
  </div>
{% endblock %}