{% 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" class="form">
      {{ form.csrf_token }}
      <div class="form-row">
        <div class="form-col">
          {{ TextInput(form.name, validation="applicationName", optional=False) }}
          {{ ('portfolios.applications.new.step_1_form_help_text.name' | translate | safe) }}
        </div>
      </div>
      <hr>
      <div class="form-row">
        <div class="form-col form-col--two-thirds">
          {{ TextInput(form.description, validation="defaultTextAreaField", paragraph=True, optional=True) }}
          {{ ('portfolios.applications.new.step_1_form_help_text.description' | translate | safe) }}
        </div>
      </div>


      <div
        class="action-group-footer"
        v-bind:class="{'action-group-footer--expand-offset': this.$root.sidenavExpanded, 'action-group-footer--collapse-offset': !this.$root.sidenavExpanded}">
        <div class="action-group-footer--container">
          {% 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>
        </div>
      </div>
    </form>
  </base-form>

{% endblock %}