{% from "components/alert.html" import Alert %}
{% from "components/checkbox_input.html" import CheckboxInput %}
{% from "components/text_input.html" import TextInput %}
{% from "components/phone_input.html" import PhoneInput %}

{% macro EnvRoleInput(field, member_role_id=None) %}
  {% set role = field.role.data if not field.deleted.data else "Access Suspended" %}
  {% if field.role.data != "No Access" and not field.deleted.data -%}
    <checkboxinput
      name="'{{ field.deleted.name | string }}-{% if member_role_id %}-{{ member_role_id }}{% endif %}'"
      inline-template
      key="'{{ field.deleted.name | string }}-{% if member_role_id %}-{{ member_role_id }}{% endif %}'"
      v-bind:initial-checked='{{ field.deleted.data|string|lower }}'
      v-bind:optional="true"
      >
      <fieldset data-ally-disabled="true" v-on:change="onInput" class="usa-input__choices revoke-button">
        {% set id = "{}-{}".format(field.deleted.name, member_role_id) %}
        <div class="form-row" v-if="!isChecked">
          <div class="form-col form-col--two-thirds">
            <div class="usa-input__title-inline">
              {{ field.environment_name.data }}
            </div>
            <p class="usa-input__help">
              {{ role }}
            </p>
          </div>
          <div class="form-col form-col--third">
            {{ field.deleted(id=id, checked=True, **{"v-model": "isChecked"}) }}
            {{ field.deleted.label(for=id, class="usa-button button-danger-outline") | safe }}
          </div>
        </div>
        <div v-else>
          {% call Alert(level='warning') %}
            <div class="form-row">
              <div class="form-col form-col--two-thirds">
                <div class="usa-input__title-inline">
                  {{ field.environment_name.data }}
                </div>
                <p class="usa-input__help">
                  Save changes to revoke access, <strong>this can not be undone.</strong>
                </p>
              </div>
              <div class="form-col form-col--third">
                {{ field.deleted(id=id, checked=True, **{"v-model": "isChecked"}) }}
                <label for="{{ id }}" class="link">Undo</label>
              </div>
            </div>
          {% endcall %}
        </div>
      </fieldset>
    </checkboxinput>
  {% else %}
    <div class="form-row">
      <!-- refactor this into its own macro? -->
      <div class="form-col form-col--two-thirds">
        <div class="usa-input {% if field.deleted.data or field.role.data == 'No Access' %}env-role__no-access{% endif %}">
          <div class='usa-input__title-inline'>
            {{ field.environment_name.data }}
          </div>
          <p class="usa-input__help">
            {{ role }}
          </p>
        </div>
      </div>
      <div class="form-col form-col--third">
        {% if field.role.data == "No Access" and not field.deleted.data -%}
          <optionsinput inline-template
            v-bind:initial-value="'{{ field.role.data | string }}'"
            v-bind:name="'{{ field.name | string }}{% if member_role_id %}-{{ member_role_id }}{% endif %}'"
            v-bind:optional="true"
            v-bind:watch="true">
            <fieldset data-ally-disabled="true" v-on:change="onInput" class="usa-input__choices">
              {{ field.role(**{"v-model": "value", "id": "{}-{}".format(field.role.name, member_role_id)}) }}
            </fieldset>
          </optionsinput>
        {% elif field.deleted.data -%}
          <p class="usa-input__help">
            Suspended access cannot be modified.
          </p>
        {%- endif %}
        {{ field.environment_id() }}
      </div>
    </div>
  {% endif %}
{% endmacro %}

{% macro PermsFields(form, new=False, member_role_id=None) %}
  <h2>{{ "portfolios.applications.members.form.app_perms.title" | translate }}</h2>
  <p class='usa-input__help subtitle'>{{ "portfolios.applications.members.form.app_perms.description" | translate | safe}}</p>
  <div class="application-perms">
    {% if new %}
      {% set team_mgmt = form.perms_team_mgmt.name %}
      {% set env_mgmt = form.perms_env_mgmt.name %}
      {% set del_env = form.perms_del_env.name %}
    {% else %}
      {% set team_mgmt = "perms_team_mgmt-{}".format(member_role_id) %}
      {% set env_mgmt = "perms_env_mgmt-{}".format(member_role_id) %}
      {% set del_env = "perms_del_env-{}".format(member_role_id) %}
    {% endif %}

    {{ CheckboxInput(form.perms_team_mgmt, classes="input__inline-fields", key=team_mgmt, id=team_mgmt, optional=True) }}
    {{ CheckboxInput(form.perms_env_mgmt, classes="input__inline-fields", key=env_mgmt, id=env_mgmt, optional=True) }}
    {{ CheckboxInput(form.perms_del_env, classes="input__inline-fields", key=del_env, id=del_env, optional=True) }}
  </div>
  <hr>
  <div class="environment_roles environment-roles-new">
    <h2>{{ "portfolios.applications.members.form.env_access.title" | translate }}</h2>
    <p class='usa-input__help subtitle'>{{ "portfolios.applications.members.form.env_access.description" | translate | safe }}</p>
    <hr>
    {% for environment_data in form.environment_roles %}
      {{ EnvRoleInput(environment_data, member_role_id) }}
      <hr>
    {% endfor %}
  </div>
{% endmacro %}

{% macro InfoFields(member_form) %}
  <div class="application-member__user-info">
    {{ TextInput(member_form.first_name, validation='requiredField', optional=False) }}
    {{ TextInput(member_form.last_name, validation='requiredField', optional=False) }}
    {{ TextInput(member_form.email, validation='email', optional=False) }}
    {{ PhoneInput(member_form.phone_number, member_form.phone_ext)}}
    {{ TextInput(member_form.dod_id, validation='dodId', optional=False) }}
    <a href="#">How do I find the DoD ID?</a>
  </div>
{% endmacro %}