{% 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 %}
{% from "components/sticky_cta.html" import StickyCTA %}

{% extends "base.html" %}

{% block content %}

<main class="usa-section usa-content">
  {% include "fragments/flash.html" %}
  <div class='portfolio-header__name'>
    <p>{{ "portfolios.header" | translate }}</p>
    <h1>{{ "portfolios.new.title" | translate }}</h1>
  </div>
  {{ StickyCTA(text="portfolios.new.cta_step_1"|translate, context=("portfolios.new.sticky_header_context"|translate({"step": "1"}) )) }}
  <base-form inline-template>
    <div class="row">
      <form id="portfolio-create" class="col" action="{{ url_for('portfolios.create_portfolio') }}" method="POST">
        {{ form.csrf_token }}
        <div class="form-row form-row--bordered">
          <div class="form-col">
            {{ TextInput(form.name, validation="name", optional=False, classes="form-col") }}
            {{"forms.portfolio.name.help_text" | translate | safe }}
          </div>
        </div>
        <div class="form-row form-row--bordered">
          <div class="form-col">
            {{ TextInput(form.description, validation="defaultTextAreaField", paragraph=True) }}
            {{"forms.portfolio.description.help_text" | translate | safe }}
          </div>
        </div>
        <div class="form-row">
          <div class="form-col">
            {{ MultiCheckboxInput(form.defense_component, optional=False) }}
            {{ "forms.portfolio.defense_component.help_text" | translate | safe }}
          </div>
        </div>
        <div class='action-group-footer'>
        {% block next_button %}
          {{ SaveButton(text=('portfolios.new.save' | translate), form="portfolio-create", element="input") }}
        {% endblock %}
        <a class="usa-button usa-button-secondary" href="{{ url_for('atst.home') }}">
          Cancel
        </a>
      </form>
    </div>
  </base-form>
</main>
{% endblock %}