{% extends "base.html" %}

{% from "components/alert.html" import Alert %}
{% from "components/modal.html" import Modal %}
{% from "components/empty_state.html" import EmptyState %}

{% block content %}

  {% call Modal(name='pendingFinancialVerification', dismissable=True) %}
    <h1>Request submitted!</h1>

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

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

{% if not requests %}

  {{ EmptyState(
    'There are currently no active requests for you to see.',
    actionLabel='Create a new JEDI Cloud Request',
    actionHref=url_for('requests.requests_form_new', screen=1),
    icon='document'
  ) }}

{% else %}

  {% if pending_financial_verification %}

    {{ Alert('Pending Financial Verification', fragment="fragments/pending_financial_verification.html") }}

  {% endif %}

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

    <form class='search-bar'>
      <div class='usa-input search-input'>
        <label for='requests-search'>Search requests by Order ID</label>
        <input type='search' id='requests-search' name='requests-search' placeholder="Search by Order ID"/>
        <button type="submit">
          <span class="hide">Search</span>
        </button>
      </div>

      <div class='usa-input'>
        <label for='filter-status'>Filter requests by status</label>
        <select id="filter-status" name="filter-status">
          <option value="" selected disabled>Filter by status</option>
          <option value="">Active</option>
          <option value="">Pending</option>
          <option value="">Denied</option>
        </select>
      </div>
    </form>

    <div class='responsive-table-wrapper'>
      <table>
        <thead>
          <tr>
            <th scope="col">Order ID</th>
            <th scope="col">Request Date</th>
            <th scope="col">Requester</th>
            <th scope="col">Total Apps</th>
            <th scope="col">Status</th>
            <th scope="col" class="table-cell--shrink">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for r in requests %}
          <tr>
            <th scope="row">
              <a class='icon-link icon-link--large' href="{{ r['edit_link'] }}">{{ r['order_id'] }}</a>
              {% if r['is_new'] %}<span class="usa-label">New</span>
            </th>
            {% endif %}
            <td>{{ r['date'] }}</td>
            <td>{{ r['full_name'] }}</td>
            <td>{{ r['app_count'] }}</td>
            <td>{{ r['status'] }}</td>
            <td class="table-cell--shrink">
              <a href="" class='icon-link'>Download</a>
              <a href="/request/approval" class='icon-link'>Approval</a>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

{% endif %}

{% endblock %}