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

{% from "components/alert.html" import Alert %}
{% from "components/icon.html" import Icon %}

{% block workspace_content %}

  {{ Alert("Funding Information & Reports for Workspace " + workspace.name,
    message="<p>On this screen you'll find detailed reporting information on this workspace. This message needs to be written better and be dismissable.</p>",
    actions=[
      {"label": "Learn More", "href": "/", "icon": "info"},
      {"label": "Dismiss", "href": "/"}
    ]  ) }}

  <div class='funding-summary-row'>

    <div class='funding-summary-row__col'>
      <div class='panel spend-summary'>
        <div class='row'>
          <h2 class='spend-summary__heading col'>Workspace Total Spend</h2>
          <dl class='spend-summary__budget'>
            {% set budget = workspace_totals['budget'] %}
            {% set spent = workspace_totals['spent'] %}
            {% set remaining = budget - spent %}
            <div>
              <dt>Budget </dt>
              <dd>{{ budget | dollars }}</dd>
            </div>

            <div>
              <dt>Remaining</dt>
              <dd>{{ remaining | dollars }}</dd>
            </div>
          </dl>
        </div>

        <div>
          <meter value='{{ spent }}' min='0' max='{{ budget }}' title='{{ spent | dollars }} Total spend to date'></meter>

          <dl class='spend-summary__spent'>
            <dt>Total spend to date</dt>
            <dd>{{ spent | dollars }}</dd>
          </dl>
        </div>
      </div>
    </div>

    <div class='funding-summary-row__col'>
      <div class='panel to-summary'>
        <div class='to-summary__row'>

          <div class='to-summary__to'>
            <h2 class='to-summary__heading'>Task Order</h2>
            <dl class='to-summary__to-number'>
              <dt class='usa-sr-only'>Task Order Number</dt>
              <dd>1234567890</dd>
            </dl>
          </div>

          <div class='to-summary__expiration'>
            <dl>
              <div>
                <dt>Expires</dt>
                <dd>November 1, 2019</dd>
              </div>

              <div>
                <dt>Remaining</dt>
                <dd>200 days</dd>
              </div>
            </dl>

            <a href='#' class='icon-link'>
              Manage Task Order
            </a>
          </div>
        </div>

        <dl class='to-summary__co'>
          <dt>Contracting Officer</dt>
          <dd>
            Pietro Quirines
            <a class='icon-link' href='mailto:email@email.com'>email@email.com</a>
          </dd>
        </dl>

      </div>
    </div>

  </div>

  {% set workspace_totals = monthly_totals['workspace'] %}
  {% set current_month_index = current_month.strftime('%m/%Y') %}
  {% set prev_month_index = prev_month.strftime('%m/%Y') %}
  {% set two_months_ago_index = two_months_ago.strftime('%m/%Y') %}

  <div class='spend-table responsive-table-wrapper'>
    <div class='spend-table__header'>
      <h2 class='spend-table__title'>Total spend per month</h2>

      <select name='month' id='month' class='spend-table__month-select'>
        <option value='03/2019'>{{ current_month.strftime('%B %Y') }}</option>
      </select>
    </div>

    <table>
      <thead>
        <th scope='col'><span class='usa-sr-only'>Spending scope</span></th>
        <th scope='col' class='table-cell--align-right previous-month'>{{ two_months_ago.strftime('%B %Y') }}</th>
        <th scope='col' class='table-cell--align-right previous-month'>{{ prev_month.strftime('%B %Y') }}</th>
        <th scope='col' class='table-cell--align-right current-month'>{{ current_month.strftime('%B %Y') }}</th>
        <td class='current-month'></td>
      </thead>

      <tbody class='spend-table__workspace'>
        <tr>
          <th scope='row'>Workspace Total</th>
          <td class='table-cell--align-right previous-month'>{{ workspace_totals.get(two_months_ago_index, 0) | dollars }}</td>
          <td class='table-cell--align-right previous-month'>{{ workspace_totals.get(prev_month_index, 0) | dollars }}</td>
          <td class='table-cell--align-right current-month'>{{ workspace_totals.get(current_month_index, 0) | dollars }}</td>
          <td class='table-cell--expand current-month meter-cell'>
            <meter value='{{ workspace_totals.get(current_month_index, 0) }}' min='0' max='{{ workspace_totals.get(current_month_index, 0) }}'></meter>
          </td>
        </tr>
      </tbody>

      {% for project_name, project_totals in monthly_totals['projects'].items() %}
        <tbody is='toggler' class='spend-table__project'>
          <template slot-scope='{ isVisible, toggle }'>
            <tr>
              <th scope='rowgroup'>
                <button v-on:click='toggle' class='icon-link icon-link--large spend-table__project__toggler'>
                  <template v-if='isVisible'>{{ Icon('caret_down') }}</template>
                  <template v-else>{{ Icon('caret_right') }}</template>
                  {{ project_name }}
                </button>
              </th>
              <td class='table-cell--align-right previous-month'>{{ project_totals.get(two_months_ago_index, 0) | dollars }}</td>
              <td class='table-cell--align-right previous-month'>{{ project_totals.get(prev_month_index, 0) | dollars }}</td>
              <td class='table-cell--align-right current-month'>{{ project_totals.get(current_month_index, 0) | dollars }}</td>
              <td class='table-cell--expand current-month meter-cell'>
                <span class='spend-table__meter-value'>{{ (100 * (project_totals.get(current_month_index, 0) / workspace_totals.get(current_month_index, 1))) | round | int }}%</span>
                <meter value='{{ project_totals.get(current_month_index, 0) }}' min='0' max='{{ workspace_totals.get(current_month_index, 0) }}'></meter>
              </td>
            </tr>

            {% for env_name, env_totals in monthly_totals['environments'][project_name].items() %}
              <tr v-show='isVisible'>
                <th scope='rowgroup'><a href='#' class='icon-link spend-table__project__env'>{{ Icon('link') }} {{ env_name }}</a></th>
                <td class='table-cell--align-right previous-month'>{{ env_totals.get(two_months_ago_index, 0) | dollars }}</td>
                <td class='table-cell--align-right previous-month'>{{ env_totals.get(prev_month_index, 0) | dollars }}</td>
                <td class='table-cell--align-right current-month'>{{ env_totals.get(current_month_index, 0) | dollars }}</td>
                <td class='table-cell--expand current-month'></td>
              </tr>
            {% endfor %}
          </template>
        </tbody>
      {% endfor %}
    </table>
  </div>

{% endblock %}