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

{% from "components/alert.html" import Alert %}
{% from "components/delete_confirmation.html" import DeleteConfirmation %}
{% from "components/icon.html" import Icon %}
{% from "components/modal.html" import Modal %}
{% from "components/text_input.html" import TextInput %}

{% set secondary_breadcrumb = 'portfolios.applications.existing_application_title' | translate({ "application_name": application.name }) %}

{% block application_content %}

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

  <form method="POST" action="{{ url_for('applications.update', application_id=application.id) }}">
    <div class="panel">
      <div class="panel__content">

        {{ application_form.csrf_token }}
        <p>
          {{ "fragments.edit_application_form.explain" | translate }}
        </p>
        <div class="form-row">
          <div class="form-col form-col--two-thirds">
            {{ TextInput(application_form.name) }}
          </div>
          <div class="form-col form-col--third">
            {% if user_can(permissions.DELETE_APPLICATION) %}
            <div class="usa-input">
              <label for="delete-application">
                <div class="usa-input__title">
                  &nbsp;
                </div>
              </label>
              <input
                id="delete-application"
                type="button"
                v-on:click="openModal('delete-application')"
                class='usa-button button-danger-outline'
                value="{{ "portfolios.applications.delete.button" | translate }}"
              >
            </div>
            {% endif %}
          </div>
        </div>
        <div class="form-row">
          <div class="form-col form-col--two-thirds">
            {{ TextInput(application_form.description, paragraph=True) }}
          </div>
          <div class="form-col form-col--third">
            &nbsp;
          </div>
        </div>
      </div>
      <div class="panel__footer">
        <div class="action-group">
          <button class="usa-button usa-button-primary" tabindex="0" type="submit">{{ 'portfolios.applications.update_button_text' | translate }}</button>
        </div>
      </div>
    </div>
  </form>

  <div id="application-environments">
    <div class="accordion-table responsive-table-wrapper panel">
      {% if g.matchesPath("application-environments") %}
        {% include "fragments/flash.html" %}
      {% endif %}

      {% if user_can(permissions.EDIT_APPLICATION) %}
        {% include "fragments/applications/edit_environments.html" %}

        {% if user_can(permissions.CREATE_ENVIRONMENT) %}
          {% include "fragments/applications/add_new_environment.html" %}
        {% endif %}

      {% elif user_can(permissions.VIEW_ENVIRONMENT) %}
        {% include "fragments/applications/read_only_environments.html" %}
      {% endif %}
    </div>
  </div>

  {% if user_can(permissions.DELETE_APPLICATION) %}
    {% call Modal(name="delete-application") %}
      <h1>{{ "portfolios.applications.delete.header" | translate }}</h1>

      {{
        Alert(
          title=("components.modal.destructive_title" | translate),
          message=("portfolios.applications.delete.alert.message" | translate),
          level="warning"
        )
      }}

      {{
        DeleteConfirmation(
          modal_id="delete_application",
          delete_text=('portfolios.applications.delete.button' | translate),
          delete_action= url_for('applications.delete', application_id=application.id),
          form=application_form
        )
      }}
    {% endcall %}
  {% endif %}

{% endblock %}
