{% 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(sub_form, member_role_id=None) %}
  {% set role = sub_form.role.data if not sub_form.disabled.data else "Access Suspended" %}
  {% if sub_form.role.data != "No Access" and not sub_form.disabled.data -%}
    <checkboxinput
      name="'{{ sub_form.disabled.name | string }}-{% if member_role_id %}-{{ member_role_id }}{% endif %}'"
      inline-template
      key="'{{ sub_form.disabled.name | string }}-{% if member_role_id %}-{{ member_role_id }}{% endif %}'"
      v-bind:initial-checked='{{ sub_form.disabled.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(sub_form.disabled.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">
              {{ sub_form.environment_name.data }}
            </div>
            <div class="usa-input__help">
              {{ "portfolios.applications.members.roles.{}".format(role) | translate }}
            </div>
          </div>
          <div class="form-col form-col--third">
            {{ sub_form.disabled(id=id, checked=True, **{"v-model": "isChecked"}) }}
            {{ sub_form.disabled.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">
                  {{ sub_form.environment_name.data }}
                </div>
                <p class="usa-input__help">
                  {{ "portfolios.applications.members.form.env_access.revoke_warning" | translate | safe }}
                </p>
              </div>
              <div class="form-col form-col--third">
                {{ sub_form.disabled(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">
      <div class="form-col form-col--two-thirds">
        <div class="usa-input {% if sub_form.disabled.data or sub_form.role.data == 'No Access' %}env-role__no-access{% endif %}">
          <div class='usa-input__title-inline'>
            {{ sub_form.environment_name.data }}
          </div>
          <p class="usa-input__help">
            {{ role }}
          </p>
        </div>
      </div>
      <div class="form-col form-col--third">
        {% if sub_form.role.data == "No Access" and not sub_form.disabled.data -%}
          <optionsinput inline-template
            v-bind:initial-value="'{{ sub_form.role.data | string }}'"
            v-bind:name="'{{ sub_form.name | string }}{% if member_role_id %}-{{ member_role_id }}{% endif %}'"
            v-bind:optional="true">
            <fieldset data-ally-disabled="true" v-on:change="onInput" class="usa-input__choices">
              {{ sub_form.role(**{"v-model": "value", "id": "{}-{}".format(sub_form.role.name, member_role_id)}) }}
            </fieldset>
          </optionsinput>
        {% elif sub_form.disabled.data -%}
          <p class="usa-input__help">
            {{ "portfolios.applications.members.form.env_access.suspended" | translate }}
          </p>
        {%- endif %}
        {{ sub_form.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 class="full-width">
  <div class="environment_roles environment-roles-new">
    <h2>{{ "portfolios.applications.members.form.env_access.title" | translate }}</h2>
    <p class='usa-input__help subtitle'>
      {% if not new -%}
        {{ "portfolios.applications.members.form.env_access.edit_description" | translate }}
      {%- endif %}
      {{ "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="user-info">
    {{ TextInput(member_form.first_name, validation='name', optional=False) }}
    {{ TextInput(member_form.last_name, validation='name', 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="#">{{ "forms.new_member.dod_help" | translate }}</a>
  </div>
{% endmacro %}