{% from "components/icon.html" import Icon %}
{% from "components/member_form_template.html" import MemberFormTemplate %}
{% import "applications/fragments/member_form_fields.html" as member_fields %}

{% macro MemberStepOne(member_form) %}
  {% set next_button %}
    <input
        type='button'
        v-on:click="next()"
        v-bind:disabled="!canSave"
        class='action-group__action usa-button'
        value='{{ "portfolios.applications.members.form.next_button" | translate }}'>
  {% endset %}

  {% call MemberFormTemplate(title="portfolios.applications.members.form.add_member"|translate, next_button=next_button, previous=False) %}
    {{ member_fields.InfoFields(member_form.user_data) }}
  {% endcall %}
{% endmacro %}

{% macro MemberStepTwo(member_form, application) %}
  {% set next_button %}
    <input
      type="submit"
      class='action-group__action usa-button'
      form="add-app-mem"
      v-bind:disabled="!canSave"
      value='{{ "portfolios.applications.members.form.add_member" | translate}}'>
  {% endset %}

  {% call MemberFormTemplate(next_button=next_button) %}
    {{ member_fields.PermsFields(form=member_form, new=True) }}
  {% endcall %}
{% endmacro %}