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

<div>
  <h2>Funds Expended per Application and Environment</h2>
  {% set current_month_index = current_month.strftime('%m/%Y') %}
  {% set prev_month_index = prev_month.strftime('%m/%Y') %}

  {% if not portfolio.applications %}

    {% set can_create_applications = user_can(permissions.CREATE_APPLICATION) %}
    {% set message = ('portfolios.reports.empty_state.sub_message.can_create_applications' | translate)
      if can_create_applications
      else ('portfolios.reports.empty_state.sub_message.cannot_create_applications' | translate)
    %}

    {{ EmptyState(
      ('portfolios.reports.empty_state.message' | translate),
      action_label= ('portfolios.reports.empty_state.action_label' | translate) if can_create_applications else None,
      action_href=url_for('applications.create_new_application_step_1', portfolio_id=portfolio.id) if can_create_applications else None,
      icon='chart',
      sub_message=message,
      add_perms=can_create_applications
    ) }}
  {% else %}
    <spend-table
      v-bind:applications='{{ monthly_totals['applications'] | tojson }}'
      v-bind:environments='{{ monthly_totals['environments'] | tojson }}'
      current-month-index='{{ current_month_index }}'
      prev-month-index='{{ prev_month_index }}'
      inline-template>
      <div class="responsive-table-wrapper">
        <table class="atat-table">
          <thead>
            <tr>
              <th>Applications and Environments</th>
              <th class="table-cell--align-right">Current Month</th>
              <th class="table-cell--align-right">Last Month</th>
              <th class="table-cell--align-right">Total Spent</th>
            </tr>
          </thead>
          <tbody>
            <template v-for='(application, name) in applicationsState'>
              <tr>              
                <td>
                  <button v-on:click='toggle($event, name)' class='icon-link icon-link--large'>
                    <span v-html='name'></span>
                    <template v-if='application.isVisible'>{{ Icon('caret_down') }}</template>
                    <template v-else>{{ Icon('caret_up') }}</template>
                  </button>
                </td>
                <td class="table-cell--align-right">
                  <span v-html='formatDollars(application[currentMonthIndex] || 0)'></span>
                </td>
                <td class="table-cell--align-right">
                  <span v-html='formatDollars(application[prevMonthIndex] || 0)'></span>
                </td>
                <td class="table-cell--align-right">
                  <span v-html='formatDollars(application["total_spend_to_date"])'></span>
                </td>
              </tr>
              <tr v-for='(environment, envName) in environments[name]' v-show='application.isVisible'>
                <td>
                  <span v-html='envName'></span>
                </td>
                <td class="table-cell--align-right">
                  <span v-html='formatDollars(environment[currentMonthIndex] || 0)'></span>
                </td>
                <td class="table-cell--align-right">
                  <span v-html='formatDollars(environment[prevMonthIndex] || 0)'></span>
                </td>
                <td class="table-cell--align-right">
                  <span v-html='formatDollars(environment["total_spend_to_date"])'></span>
                </td>
              </tr>
            </template>
          </tbody>
        </table>
      </div>
    </spend-table>
  {% endif %}
</div>