{% 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" %}
  <div class="form-row usa-input">
    <div class="form-col form-col--two-thirds">
      <div class="{% if field.deleted.data or field.role.data == 'No Access' %}env-role__no-access{% endif %}">
        <div v-bind:class='["usa-input__title-inline", {"environment-name--gray": value === "None" }]'>
          {{ 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.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 {% if inline %}usa-input__choices--inline{% endif %}">
            <legend>
              {% set id = "{}-{}".format(field.deleted.name, member_role_id) %}
              {{ field.deleted(id=id, checked=True, **{"v-model": "isChecked"}) }}
              {{ field.deleted.label(for=id) | safe }}
            </legend>
          </fieldset>
        </checkboxinput>
      {% elif field.deleted.data -%}
        <p class="usa-input__help">
          Suspended access cannot be modified.
        </p>
      {%- endif %}
      {{ field.environment_id() }}
    </div>
  </div>
{% 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 %}