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

{% from "components/user_info.html" import UserInfo %}
{% from "components/checkbox_input.html" import CheckboxInput %}
{% from "components/text_input.html" import TextInput %}

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

{% block form %}

<!-- Oversight Section					 -->
<h3 class="subheading">{{ "task_orders.new.oversight.ko_info_title" | translate }}</h3>
<p>{{ "task_orders.new.oversight.ko_info_paragraph" | translate }}</p>
<oversight inline-template v-bind:initial-data='{{ form.data|tojson }}'>
    <div class='usa-input'>
        {{ UserInfo(form.ko_first_name, form.ko_last_name, form.ko_email, form.ko_phone_number) }}
        {{ CheckboxInput(form.ko_invite) }}
        <keep-alive>
            <dodid v-bind:initial-invite="ko_invite" inline-template v-if="ko_invite">
                {{ TextInput(form.ko_dod_id, placeholder="1234567890", tooltip="task_orders.new.oversight.dod_id_tooltip" | translate, tooltip_title='Why', validation='dodId', classes="task-order__invite-officer")}}
            </dodid>
        </keep-alive>

        <hr />

        <h3 class="subheading">{{ "task_orders.new.oversight.cor_info_title" | translate }}</h3>
        <p>{{ "task_orders.new.oversight.cor_info_paragraph" | translate }}</p>
        {{ CheckboxInput(form.am_cor, classes="normal") }}

        <keep-alive>
            <cordata v-bind:initial-cor-invite="cor_invite" inline-template v-if="!am_cor">
                <div>
                {{ UserInfo(form.cor_first_name, form.cor_last_name, form.cor_email, form.cor_phone_number) }}
                {{ CheckboxInput(form.cor_invite) }}
                <template v-if="cor_invite">
                    {{ TextInput(form.cor_dod_id, placeholder="1234567890", tooltip="task_orders.new.oversight.dod_id_tooltip" | translate, tooltip_title='Why', validation='dodId', classes="task-order__invite-officer")}}
                </template>
                </div>
            </cordata>
        </keep-alive>

        <hr />

        <h3 class="subheading">{{ "task_orders.new.oversight.so_info_title" | translate }}</h3>
        <p>{{ "task_orders.new.oversight.so_info_paragraph" | translate }}</p>
        {{ UserInfo(form.so_first_name, form.so_last_name, form.so_email, form.so_phone_number) }}
        {{ CheckboxInput(form.so_invite) }}
        <keep-alive>
            <dodid v-bind:initial-invite="so_invite" inline-template v-if="so_invite">
                {{ TextInput(form.so_dod_id, placeholder="1234567890", tooltip="task_orders.new.oversight.dod_id_tooltip" | translate, tooltip_title='Why', validation='dodId', classes="task-order__invite-officer")}}
            </dodid>
        </keep-alive>
    </div>
</oversight>


{% endblock %}
