{% extends "applications/base.html" %}

{% from "components/alert.html" import Alert %}
{% from "components/text_input.html" import TextInput %}
{% from 'components/save_button.html' import SaveButton %}

{% set secondary_breadcrumb = 'portfolios.applications.new_application_title' | translate %}

  {% if application_id %}
    {% set action = url_for('applications.update_new_application_step_1', application_id=application_id) %}
  {% else %}
    {% set action = url_for('applications.create_new_application_step_1', portfolio_id=portfolio.id, application_id=application_id) %}
  {% endif %}

{% block portfolio_header %}
  {% include "portfolios/header.html" %}
  {{ StickyCTA(text=('portfolios.applications.new.step_1_header' | translate | safe), context="Step 1 of 3") }}
{% endblock %}

{% block application_content %}

  {% include "fragments/flash.html" %}

  <base-form inline-template :enable-save="true">
    <form method="POST" action="{{ action }}" v-on:submit="handleSubmit">
      {{ form.csrf_token }}
      <div class="form-row">
        <div class="form-col">
          {{ TextInput(form.name, optional=False) }}
          {{ ('portfolios.applications.new.step_1_form_help_text.name' | translate | safe) }}
        </div>
      </div>
      <hr class="panel__break">
      <div class="form-row">
        <div class="form-col form-col--two-thirds">
          {{ TextInput(form.description, paragraph=True, optional=True) }}
          {{ ('portfolios.applications.new.step_1_form_help_text.description' | translate | safe) }}
        </div>
      </div>


      <span class="action-group-footer">
        {% block next_button %}
          {{ SaveButton(text=('portfolios.applications.new.step_1_button_text' | translate)) }}
        {% endblock %}
        <a href="{{ url_for('applications.portfolio_applications', portfolio_id=portfolio.id) }}">
          Cancel
        </a>
      </span>
    </form>
  </base-form>

{% endblock %}
