{% extends "portfolios/base.html" %}

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

{% from "components/checkbox_input.html" import CheckboxInput %}
{% from "components/icon.html" import Icon %}
{% from "components/text_input.html" import TextInput %}
{% from "components/confirmation_button.html" import ConfirmationButton %}
{% from 'components/save_button.html' import SaveButton %}


{% macro Link(text, icon_name, onClick=None, url='#', classes='') %}
<a href="{{ url }}" {% if onClick %}v-on:click="{{ onClick }}"{% endif %} class="icon-link {{ classes }}">
    {{ Icon(icon_name) }}
    <span>{{ text }}</span>
  </a>
{% endmacro %}

{% macro EditOfficerInfo(form, officer_type, invited) -%}
  <form method='POST' action="{{ url_for("task_orders.invitations_edit", task_order_id=task_order.id) }}" autocomplete="off">
    {{ form.csrf_token }}
    <template v-if="editing">
      <div class='officer__form'>
        <div class="edit-officer">
          <h4>{{ ("task_orders.invitations." + officer_type + ".edit_title")  | translate}}</h4>
        </div>
        <div class='form-row'>
          <div class='form-col form-col--half'>
            {{ TextInput(form.first_name) }}
          </div>

          <div class='form-col form-col--half'>
            {{ TextInput(form.last_name) }}
          </div>
        </div>

        <div class='form-row'>
          <div class='form-col form-col--half'>
            {{ TextInput(form.email, placeholder='name@mail.mil', validation='email') }}
          </div>

          <div class='form-col form-col--half'>
            {{ TextInput(form.phone_number, placeholder='(123) 456-7890', validation='usPhone') }}
          </div>
        </div>
        <div class='form-row officer__form--dodId'>
          <div class="form-col">
            {% if not invited %}
              <div class='form-row'>
                {{ CheckboxInput(form.invite, label=(("forms.officers." + officer_type + "_invite") | translate)) }}
              </div>
            {% endif %}
            <div class='form-row'>
              {{ TextInput(form.dod_id, tooltip="task_orders.new.oversight.dod_id_tooltip" | translate, tooltip_title='Why', validation='dodId', disabled=invited)}}
            </div>
          </div>
        </div>
        <div class='alert__actions officer__form--actions'>
          <a href="#{{ officer_type }}" v-on:click="cancel" class="icon-link">
            {{ Icon("x") }}
            <span>Cancel</span>
          </a>
          {{ SaveButton(text='Save Changes', element="input") }}
        </div>
      </div>
    </template>
  </form>
{% endmacro %}

{% macro OfficerInfo(task_order, officer_type, form) %}
  <div class="panel__content officer" id="{{ officer_type }}">
    <h2 class="officer__title">{{ ("task_orders.invitations." + officer_type + ".title") | translate }}</h2>
    <p class="officer__description">{{ ("task_orders.invitations." + officer_type + ".description") | translate }}</p>

    <edit-officer-form v-bind:has-errors='{{ ((form.errors|length) > 0)|tojson }}' v-bind:has-changes='{{ form.has_changes() | tojson }}' inline-template>
      <div>
      {% set prefix = { "contracting_officer": "ko", "contracting_officer_representative": "cor", "security_officer": "so" }[officer_type] %}
      {% set first_name = task_order[prefix + "_first_name"] %}
      {% set last_name = task_order[prefix + "_last_name"] %}
      {% set email = task_order[prefix + "_email"] %}
      {% set phone_number = task_order[prefix + "_phone_number"] %}
      {% set dod_id = task_order[prefix + "_dod_id"] %}
      {% set invited = False %}

      {% if task_order[officer_type] %}
        {% set invited = True %}
        <div class="officer__info">
          <div class="row">
            <div class="officer__info--name">{{ first_name }} {{ last_name }}</div>
            <div class="officer__info--status invited">
              <span>{{ Icon("ok", classes="invited") }}</span>
              <span class="status-text">Invited</span>
            </div>
          </div>
          <p class="officer__info--email">{{ email }}</p>
          <p class="officer__info--phone">{{ phone_number | usPhone }}</p>
          <p class="officer__info--dod_id">{{ "task_orders.invitations.dod_id_label"  | translate}}: {{ dod_id }}</p>
        </div>
        <div class="officer__actions">
          {{ Link("Update", "edit", onClick="edit") }}
          {% set invite_type = [prefix + "_invite"] %}

          {% if not (user == task_order.creator and user == task_order[officer_type]) %}
            {{
              ConfirmationButton(
                btn_text="Resend Invitation",
                confirm_btn=('task_orders.invitations.resend_btn' | translate),
                confirm_msg=('task_orders.invitations.resend_confirmation_message' | translate),
                action=url_for(
                  "task_orders.resend_invite",
                  task_order_id=task_order.id,
                  invite_type=invite_type,
                ),
                btn_icon=Icon('avatar'),
                btn_class="icon-link",
              )
            }}
          {% endif %}

          {{ Link("Remove", "trash", classes="remove") }}
        </div>
      {% elif first_name and last_name %}
        <div class="officer__info">
          <div class="row">
            <div class="officer__info--name">{{ first_name }} {{ last_name }}</div>
            <div class="officer__info--status uninvited">
              <span>{{ Icon("alert", classes="uninvited") }}</span>
              <span class="status-text">Not Invited</span>
            </div>
          </div>
          <p class="officer__info--email">{{ email }}</p>
          <p class="officer__info--phone">{{ phone_number | usPhone }}</p>
        </div>
        <div class="officer__actions">
          {{ Link("Update", "edit", onClick="edit") }}
          {{ Link("Remove", "trash", classes="remove") }}
          <button v-if="!editing" type='button' class='usa-button usa-button-primary' v-on:click="edit">
            {{ ("task_orders.invitations." + officer_type + ".invite_button_text") | translate  }}
          </button>
        </div>
      {% else %}
        <div class="officer__info">
          <div class="officer__info--status uninvited">
            <span>{{ Icon("alert", classes="uninvited") }}</span>
            Not specified
          </div>
        </div>
        <div class="officer__actions">
          <button v-if="!editing" type='button' class='usa-button usa-button-primary' v-on:click="edit">
            {{ ("task_orders.invitations." + officer_type + ".add_button_text") | translate }}
          </button>
        </div>
      {% endif %}

      {{ EditOfficerInfo(form, officer_type, invited) }}
      </div>
    </edit-officer-form>
  </div>
{% endmacro %}

{% block portfolio_content %}

<div class="task-order-invitations">
  {% include "fragments/flash.html" %}

  <div class="panel">
    <div class="panel__heading">
      <h1 class="task-order-invitations__heading subheading">
        <div class="h2">Edit Task Order</div>
        Oversight
      </h1>
    </div>

    {% for officer in ["contracting_officer", "contracting_officer_representative", "security_officer"] %}
      {{ OfficerInfo(task_order, officer, form[officer]) }}
    {% endfor %}
  </div>
</div>
{% endblock %}
