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

{% macro PermsFields(form, member_role_id=None) %}
  <h2>Set Portfolio Permissions</h2>
  <div class="portfolio-perms">
    {% if new %}
      {% set app_mgmt = form.perms_app_mgmt.name %}
      {% set funding = form.perms_funding.name %}
      {% set reporting = form.perms_reporting.name %}
      {% set portfolio_mgmt = form.perms_portfolio_mgmt.name %}
    {% else %}
      {% set app_mgmt = "perms_app_mgmt-{}".format(member_role_id) %}
      {% set funding = "perms_funding-{}".format(member_role_id) %}
      {% set reporting = "perms_reporting-{}".format(member_role_id) %}
      {% set portfolio_mgmt = "perms_portfolio_mgmt-{}".format(member_role_id) %}
    {% endif %}

    {{ CheckboxInput(form.perms_app_mgmt, classes="input__inline-fields", key=app_mgmt, id=app_mgmt, optional=True) }}
    {{ CheckboxInput(form.perms_funding, classes="input__inline-fields", key=funding, id=funding, optional=True) }}
    {{ CheckboxInput(form.perms_reporting, classes="input__inline-fields", key=reporting, id=reporting, optional=True) }}
    {{ CheckboxInput(form.perms_portfolio_mgmt, classes="input__inline-fields", key=portfolio_mgmt, id=portfolio_mgmt, optional=True) }}
  </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 %}