{% from "components/icon.html" import Icon %}
{% from "components/empty_state.html" import EmptyState %}

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

{% set can_create_applications = user_can(permissions.CREATE_APPLICATION) %}

{% block portfolio_content %}

<div class='portfolio-applications'>
  {% include "fragments/flash.html" %}
  <div class='portfolio-applications__header row'>
    <div class='portfolio-applications__header--title col col--grow'>Applications</div>
    <div class='portfolio-applications__header--actions col'>
      {% if can_create_applications %}
        <a class='icon-link' href='{{ url_for('applications.view_new_application_step_1', portfolio_id=portfolio.id) }}'>
          {{ 'portfolios.applications.add_application_text' | translate }}
          {{ Icon("plus", classes="sidenav__link-icon") }}
        </a>
      {% endif %}
    </div>
  </div>

  {% if not portfolio.applications %}

    {{ EmptyState(
      header="You don't have any Applications yet",
      message="You can manage multiple Applications within a single Portfolio as long as the funding sources are the same.",
      button_text="Create Your First Application",
      button_link=url_for("applications.view_new_application_step_1", portfolio_id=portfolio.id),
      view_only_text="Contact your portfolio administrator to add an application."
    ) }}

  {% else %}

    <div class='application-list'>
      {% for application in portfolio.applications|sort(attribute='name') %}
        {% set section_name = "application-{}".format(application.id) %}

        <toggler inline-template>
          <div class='accordion application-list-item'>
            <header class='accordion__header row'>
              <div class='col col-grow'>
                <h3 class='icon-link accordion__title' v-on:click="toggleSection('{{ section_name }}')">{{ application.name }}</h3>
                <p class='accordion__description'>
                  {{ application.description }}
                </p>
                <div class='accordion__actions'>
                  <a class='icon-link' href='{{ url_for("applications.settings", application_id=application.id) }}'>
                    <span>{{ "portfolios.applications.app_settings_text" | translate }}</span>
                  </a>
                  <div class='separator'></div>
                  {% set has_environments = 0 < (application.environments|length) %}
                  <a class='icon-link triangle-box' v-on:click="toggleSection('{{ section_name }}')" disabled="{{ not has_environments }}">
                    <span>Environments ({{ application.environments|length }})</span>
                    {% if has_environments %}
                      <span v-if="selectedSection === '{{ section_name }}'">
                        {{ Icon('caret_up') }}
                      </span>
                      <span v-else>
                        {{ Icon('caret_down') }}
                      </span>
                      <div class="triangle-up" v-if="selectedSection === '{{ section_name }}'"></div>
                    {% endif %}
                  </a>
                </div>
              </div>
            </header>
            <ul v-show="selectedSection === '{{ section_name }}'">
              {% for environment in application.environments %}
                <li class='accordion__item application-list-item__environment'>
                  <div class='application-list-item__environment__name'>
                    <span>{{ environment.displayname }}</span>
                  </div>
                  {% if g.current_user in environment.users %}
                    <a href='{{ url_for("applications.access_environment", environment_id=environment.id)}}' target='_blank' rel='noopener noreferrer' class='application-list-item__environment__csp_link icon-link'>
                      <span>{{ "portfolios.applications.csp_console_text" | translate }}</span>
                    </a>
                  {% endif %}
                </li>
              {% endfor %}
            </ul>
          </div>
        </toggler>
      {% endfor %}
    </div>

  {% endif %}

</div>

{% endblock %}