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

{% macro MemberFormTemplate(title=None, next_button=None, previous=True) %}
  <hr>
  {% if title %} <h1>{{ title }}</h1> {% endif %}

  {{ caller() }}

  <div class='action-group'>
    {{ next_button }}
    {% if previous %}
      <input
          type='button'
          v-on:click="previous()"
          class='action-group__action usa-button usa-button-secondary'
          value='{{ "common.previous" | translate }}'>
    {% endif %}
    <a class='action-group__action' v-on:click="closeModal('{{ new_port_mem }}')">{{ "common.cancel" | translate }}</a>
  </div>
{% endmacro %}

{% 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) }}
  {% endcall %}
{% endmacro %}