{% from "components/accordion.html" import Accordion %}
{% from "components/accordion_list.html" import AccordionList %}
{% from "components/empty_state.html" import EmptyState %}
{% from "components/sticky_cta.html" import StickyCTA %}
{% from "components/icon.html" import Icon %}

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

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

{% block portfolio_content %}

{% call StickyCTA(text="common.applications"|translate) %}
    {% if can_create_applications and portfolio.applications %}
      <a href="{{ url_for("applications.view_new_application_step_1", portfolio_id=portfolio.id) }}" class="usa-button usa-button-primary">
        {{ "portfolios.applications.create_button"|translate }}
      </a>
    {% endif %}
{% endcall %}

<div class='portfolio-applications'>
  {% include "fragments/flash.html" %}

  {% if not portfolio.applications %}

    {{ EmptyState(
      header="portfolios.applications.empty_state.header"|translate,
      message="portfolios.applications.empty_state.message"|translate,
      button_text="portfolios.applications.empty_state.button_text"|translate,
      button_link=url_for("applications.view_new_application_step_1", portfolio_id=portfolio.id),
      view_only_text="portfolios.applications.empty_state.view_only_text"|translate,
      user_can_create=can_create_applications,
    ) }}

  {% else %}
    {% call AccordionList() %}
      {% for application in portfolio.applications|sort(attribute='name') %}
        {% set section_name = "application-{}".format(application.id) %}
        {% set title = "Environments ({})".format(application.environments|length) %}
          <div class="accordion">
            <div class="accordion__header">
              <h3 class="accordion__header-text">
                <a href='{{ url_for("applications.settings", application_id=application.id) }}'>
                  {{ application.name }} {{ Icon("caret_right", classes="icon--tiny icon--primary") }}
                </a>
              </h3>
              <p class="accordion__header-text">
                {{ application.description }}
              </p>
            </div>
            {% call Accordion(
              title=title,
              id=section_name,
              heading_tag="h4"
            ) %}
            {% for environment in application.environments %}
              {% set env_access = environment_access[environment.id] %}
              <div class="accordion__content--list-item">
                <div class="row">
                  <div class="col col--grow">
                    {% if env_access %}
                      <a href='{{ url_for("applications.access_environment", environment_id=environment.id)}}' target='_blank' rel='noopener noreferrer'>
                        {{ environment.displayname }} {{ Icon('link', classes='icon--medium icon--primary') }}
                      </a>
                    {% else %}
                      {{ environment.displayname }}
                    {% endif %}
                  </div>
                  {% if env_access %}
                    <div class="col">
                      {{ env_access }}
                    </div>
                  {% endif %}
                </div>
              </div>
            {% endfor %}
          {% endcall %}
        </div>
      {% endfor %}
    {% endcall %}
  {% endif %}

</div>

{% endblock %}