{% extends "base.html" %}

{% from "components/icon.html" import Icon %}
{% from "components/sticky_cta.html" import StickyCTA %}

{% block content %}

<main class="home">
  {% if portfolios %}
     {% set sticky_header = "home.new_portfolio" | translate  %}
  {% else %}
     {% set sticky_header = "home.get_started" | translate  %}
  {% endif %}

  <div class="home__content">
    {% include "fragments/flash.html" %}

    <h1>{{ "home.head" | translate }}</h1>
    <h3>Set up a Portfolio</h3>
    <h4>New Portfolios will be visible in the left side bar of this page. </h4>
    <p>All TOs associated to a specific Application or set of related Applications will be entered at the Portfolio level. Funding is applied and managed at the Portfolio level as well.</p>
    <hr>

    <div class="home__content--descriptions">
      <div class="row">
        <div class="col col--half col--pad">
          {{ Icon('funding', classes="icon--home-pg-badge") }}
          <h4>{{ "navigation.portfolio_navigation.breadcrumbs.funding" | translate }}</h4>
          <p>
            {{ "home.funding_descrip" | translate }}
          </p>
        </div>
        <div class="col col--half col--pad">
          {{ Icon('chart-pie', classes="icon--home-pg-badge") }}
          <h4>{{ "navigation.portfolio_navigation.breadcrumbs.reports" | translate }}</h4>
          <p>
            {{ "home.reports_descrip" | translate }}
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col col--half col--pad">
          {{ Icon('applications', classes="icon--home-pg-badge") }}
          <h4>{{ "navigation.portfolio_navigation.breadcrumbs.applications" | translate }}</h4>
          <p>
            {{ "home.applications_descrip" | translate }}
          </p>
        </div>
        <div class="col col--half col--pad">
          {{ Icon('cog', classes="icon--home-pg-badge") }}
          <h4>{{ "navigation.portfolio_navigation.breadcrumbs.admin" | translate }}</h4>
          <p>
            {{ "home.admin_descrip" | translate }}
          </p>
        </div>
      </div>
    </div>
    <div class="empty-state">
      <div class="empty-state__footer">
        <a href="{{ url_for("portfolios.new_portfolio_step_1") }}" class="usa-button usa-button-primary">
          {{ "home.add_portfolio_button_text" | translate }}
        </a>
      </div>
    </div>
  </div>
</main>

{% endblock %}