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

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

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

{% block application_content %}

  {% set modalName = "newApplicationConfirmation" %}
  {% include "fragments/flash.html" %}

  <div class='subheading'>{{ 'portfolios.applications.settings_heading' | translate }}</div>

  <new-application inline-template v-bind:initial-data='{{ form.data|tojson }}' modal-name='{{ modalName }}'>
    <form method="POST" action="{{ url_for('applications.create', portfolio_id=portfolio.id) }}" v-on:submit="handleSubmit">
      <div class="panel">
        <div class="panel__content">

          {% call Modal(name=modalName, dismissable=False) %}
            <h1>Create application !{ name }</h1>

            <p>
            When you click <em>{{ 'portfolios.applications.create_button_text' | translate }}</em>, the environments
            <span v-for="(environment, index) in environments">
              <strong>!{environment.name}</strong><template v-if="index < (environments.length - 1)">, </template>
            </span>
            will be created as individual cloud resource groups under <strong>!{ name }</strong> application.
            </p>

            <div class='action-group'>
              <button autofocus type='submit' class='action-group__action usa-button' tabindex='0'>{{ 'portfolios.applications.create_button_text' | translate }}</button>
              <button type='button' v-on:click="handleCancelSubmit" class='icon-link action-group__action' tabindex='0'>Cancel</button>
            </div>
          {% endcall %}

          {{ form.csrf_token }}
          <p>
            {{ "fragments.edit_application_form.explain" | translate }}
          </p>
          <div class="form-row">
            <div class="form-col form-col--two-thirds">
              {{ TextInput(form.name) }}
            </div>
            <div class="form-col form-col--third">
              &nbsp;
            </div>
          </div>
          <div class="form-row">
            <div class="form-col form-col--two-thirds">
              {{ TextInput(form.description, paragraph=True) }}
            </div>
            <div class="form-col form-col--third">
              &nbsp;
            </div>
          </div>

          <div> {# this extra div prevents this bug: https://www.pivotaltracker.com/story/show/160768940 #}
            <div v-cloak v-for="title in errors" :key="title">
              {{ Alert(message=None, level="error", vue_template=True) }}
            </div>
          </div>

          <div class="application-list-item">
            <header>
              <h2 class="block-list__title">{{ 'portfolios.applications.environments_heading' | translate }}</h2>
              <p>
                {{ 'portfolios.applications.environments_description' | translate }}
              </p>
            </header>

            <ul>
              <li v-for="(environment, i) in environments" class="application-edit__env-list-item">
                <div class="usa-input">
                  <label :for="'environment_names-' + i">Environment Name</label>
                  <input type="text" :id="'environment_names-' + i" v-model="environment.name" placeholder="e.g. Development, Staging, Production"/> <input type="hidden" :name="'environment_names-' + i" v-model="environment.name"/>
                </div>
                <div class="application-edit__env-list-item-block">
                  <button v-on:click="removeEnvironment(i)" v-if="environments.length > 1" type="button" class="application-edit__env-list-item__remover">
                    {{ Icon('trash') }}
                    <span>Remove</span>
                  </button>
                </div>
              </li>
            </ul>

            <div class="block-list__footer">
              <button
                v-on:click="addEnvironment"
                class="icon-link"
                tabindex="0"
                type="button">
                {{ 'portfolios.applications.add_another_environment' | translate }}
                {{ Icon("plus") }}
              </button>
            </div>
          </div>

        </div>
      </div>

      <div class="action-group">
        {{ SaveButton(text=('portfolios.applications.create_button_text' | translate)) }}
      </div>
    </form>
  </new-application>

{% endblock %}
