{% extends "base.html" %}

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

{% block content %}

  {% call Modal(name='pendingFinancialVerification', dismissable=True) %}
    <h1>{{ "requests.index.request_submitted_title" | translate }}</h1>

    {% include 'fragments/pending_financial_verification.html' %}

    <div class='action-group'>
      <button autofocus type=button v-on:click="closeModal('pendingFinancialVerification')" class='action-group__action usa-button'>Close</button>
    </div>
  {% endcall %}

  {% call Modal(name='pendingCCPOApproval', dismissable=True) %}
    <h1>{{ "requests.index.financial_verification_submitted_title" | translate }}</h1>

    {% include 'fragments/pending_ccpo_approval_modal.html' %}

    <div class='action-group'>
      <button autofocus type='button' v-on:click="closeModal('pendingCCPOApproval')" class='action-group__action usa-button'>Close</button>
    </div>
  {% endcall %}

  {% call Modal(name='pendingCCPOAcceptance', dismissable=True) %}
    <h1>{{ "requests.index.request_submitted_title" | translate }}</h1>

    {% include 'fragments/pending_ccpo_acceptance_alert.html' %}

    <div class='action-group'>
      <button autofocus type='button' v-on:click="closeModal('pendingCCPOAcceptance')" class='action-group__action usa-button'>Close</button>
    </div>
  {% endcall %}

  <requests-list
    inline-template
    v-bind:requests='{{ requests | tojson }}'
    v-bind:is-extended='{{ extended_view | tojson }}'
    v-bind:statuses='{{ possible_statuses | tojson }}'
    v-bind:dod-components='{{ possible_dod_components | tojson }}'
  >
    <div>

{% include "fragments/flash.html" %}

{% if not requests %}

  {{ EmptyState(
    ("requests.index.no_workspaces_label" | translate),
    sub_message=("requests.index.no_workspaces_sub_message" | translate),
    action_label=("requests.index.no_workspaces_action_label" | translate),
    action_href=url_for('requests.requests_form_new', screen=1),
    icon='document'
  ) }}

{% else %}
  {% if extended_view %}
    <div class="row kpi">
      <div class="kpi__item col col--grow">
        <div class="kpi__item__value">{{ kpi_inprogress }}</div>
        <div class="kpi__item__description">{{ "requests.index.requests_in_progress" | translate }}</div>
      </div>
      <div class="kpi__item col col--grow">
        <div class="kpi__item__value">{{ kpi_pending }}</div>
        <div class="kpi__item__description">{{ "requests.index.pending_ccpo_action" | translate }}</div>
      </div>
      <div class="kpi__item col col--grow">
        <div class="kpi__item__value">{{ kpi_completed }}</div>
        <div class="kpi__item__description">{{ "requests.index.approved_requests" | translate }}</div>
      </div>
    </div>
  {% endif %}

  <div v-cloak class="col col--grow">

    {% if extended_view %}
      <form @submit.prevent class='search-bar'>
        <div class='usa-input search-input'>
          <label for='requests-search'>{{ "requests.index.search_by_name" | translate }}</label>
          <input v-model='searchValue' type='search' id='requests-search' name='requests-search' placeholder="Search by name"/>
          <button>
            <span class="hide">{{ "requests.index.search_button_text" | translate }}</span>
          </button>
        </div>

        <div class="search-bar__filters">
          <div class='usa-input'>
            <label for='filter-status'>{{ "requests.index.filter_requests_by_status_label" | translate }}</label>
            <select v-model="statusValue" id="filter-status" name="filter-status">
              <option value="" selected disabled>{{ "requests.index.filter_by_status" | translate }}</option>
              <option value="">{{ "requests.index.all_filter" | translate }}</option>
              <option v-for="status in statuses" :value="status">!{ status }</option>
            </select>
          </div>

          <div class='usa-input'>
            <label for='filter-dod-component'>{{ "requests.index.filter_requests_by_dod_component" | translate }}</label>
            <select v-model="dodComponentValue" id="filter-dod-component" name="filter-dod-component">
              <option value="" selected disabled>{{ "requests.index.filter_by_dod_component" | translate }}</option>
              <option value="">{{ "requests.index.all_filter" | translate }}</option>
              <option v-for="dodComponent in dodComponents" :value="dodComponent">!{ dodComponent }</option>
            </select>
          </div>
        </div>
      </form>
    {% endif %}

    <div v-cloak class='responsive-table-wrapper'>
      <table v-if="filteredRequests.length">
        <thead>
          <tr>
            <th @click.prevent="updateSortValue(column.attr)" v-for="column in getColumns()"scope="col">
              !{ column.displayName }
              <span v-if="column.attr === sort.columnName && sort.isAscending">
                {{ Icon("caret_down") }}
              </span>
              <span v-else-if="column.attr === sort.columnName && !sort.isAscending">
                {{ Icon("caret_up") }}
              </span>
            </th>
          </tr>
        </thead>
        <tbody v-for="r in filteredRequests">
          <tr>
            <th scope="row">
              <a class='icon-link icon-link--large' :href="r.edit_link">!{ r.name }</a>
              <span v-if="r.action_required" class="label label--info">
                {{ "requests.index.action_required" | translate }}
              </span>
            </th>
            <td>
              <local-datetime
                v-if="r.last_submission_timestamp"
                :timestamp="r.last_submission_timestamp"
                format="M/D/YYYY">
              </local-datetime>
              <span v-else>—<span>
            </td>
          {% if extended_view %}
              <td><local-datetime :timestamp="r.last_edited_timestamp" format="M/D/YYYY"></td>
              <td>!{ r.full_name }</td>
            {% endif %}
            <td>!{ dollars(r.annual_usage) }</td>
            <td>
              <a v-if="r.is_approved" class="icon-link icon-link--large" :href="r.workspace_link">
                !{ r.status }
              </a>
              <span v-else>
                !{ r.status }
              </span>
            </td>
            {% if extended_view %}
              <td>!{ r.dod_component }</td>
            {% endif %}
          </tr>
        </tbody>
      </table>
      <div v-else>
        {{ EmptyState(
          ("requests.index.no_requests_found" | translate),
          action_label=None,
          action_href=None,
          sub_message=("requests.index.try_different_search" | translate),
          icon=None
        ) }}
      </div>
    </div>
  </div>
{% endif %}

</div>
</requests-list>

{% endblock %}