{% from "components/multi_checkbox_input.html" import MultiCheckboxInput %}
{% from "components/options_input.html" import OptionsInput %}
{% from "components/save_button.html" import SaveButton %}
{% from "components/text_input.html" import TextInput %}

{% extends "base.html" %}

{% block content %}

<main class="usa-section usa-content">
  {% include "fragments/flash.html" %}
  <h1>New Portfolio Form</h1>
  <base-form inline-template>
    <form class="panel__content" id="portfolio-create" action="{{ url_for('portfolios.create_portfolio') }}" method="POST">
      {{ form.csrf_token }}

      {{ TextInput(form.name, optional=False) }}
      {{ OptionsInput(form.defense_component, optional=False) }}
      {{ TextInput(form.description, paragraph=True) }}

      <h3 id="reporting" class="subheading">{{ "task_orders.new.app_info.project_title" | translate }}</h3>

      <hr>

      {{ OptionsInput(form.app_migration) }}

      {{ OptionsInput(form.native_apps) }}
      <p>{{ "forms.task_order.native_apps.not_sure_help" | translate }}</p>
      {{ MultiCheckboxInput(form.complexity, form.complexity_other) }}

      <hr>

      <h3 class="subheading">{{ "task_orders.new.app_info.team_title" | translate }}</h3>
      <p>{{ "task_orders.new.app_info.subtitle" | translate }}</p>
      {{ MultiCheckboxInput(form.dev_team, form.dev_team_other) }}
      {{ OptionsInput(form.team_experience) }}

      <hr>

      <div class='action-group'>
        {{
          SaveButton(
            text=('common.save' | translate),
            form="portfolio-create",
            element="input",
          )
        }}
      </div>
    </form>
  </base-form>
</main>

{% endblock %}

