{% 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 %}

{% set secondary_breadcrumb = 'New Application' %}

{% block application_content %}

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

  <div class="panel">
    <div class="panel__content">

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

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

            <p>
            When you click <em>Create Application</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'>Create Application</button>
              <button type='button' v-on:click="handleCancelSubmit" class='icon-link action-group__action' tabindex='0'>Cancel</button>
            </div>
          {% endcall %}

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

          <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="block-list application-list-item">
            <header class="block-list__header block-list__header--grow">
              <h2 class="block-list__title">Application Environments</h2>
              <p>
                Each environment created within an application is an enclave of cloud resources that is logically separated from each other for increased security.
              </p>
            </header>

            <ul>
              <li v-for="(environment, i) in environments" class="block-list__item 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>
                <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>
              </li>
            </ul>

            <div class="block-list__footer">
              <button v-on:click="addEnvironment" class="icon-link" tabindex="0" type="button">Add another environment</button>
            </div>
          </div>

          <div class="action-group">
            <button class="usa-button usa-button-primary" tabindex="0" type="submit">Create Application</button>
          </div>
        </form>
      </new-application>

    </div>
  </div>

{% endblock %}