{% include 'header.html' %}

{# Module-specific dependencies... #}

<link rel="stylesheet" href="{{ url_for('static', filename='css/processes-list.css') }}">

<script src="{{ url_for('static', filename='js/ProcessesList/ProcessesListConstants.js') }}"></script>
<script src="{{ url_for('static', filename='js/ProcessesList/ProcessesListData.js') }}"></script>
<script src="{{ url_for('static', filename='js/ProcessesList/ProcessesListDataLoad.js') }}"></script>
<script src="{{ url_for('static', filename='js/ProcessesList/ProcessesListDataRender.js') }}"></script>
<script src="{{ url_for('static', filename='js/ProcessesList/ProcessesListNodes.js') }}"></script>
<script src="{{ url_for('static', filename='js/ProcessesList/ProcessesListSearch.js') }}"></script>
<script src="{{ url_for('static', filename='js/ProcessesList/ProcessesListStates.js') }}"></script>
<script src="{{ url_for('static', filename='js/ProcessesList/ProcessesList.js') }}"></script>
{# UNUSED ProcessesListPagination -- Using incremental data loading
<script src="{{ url_for('static', filename='js/ProcessesList/ProcessesListPagination.js') }}"></script>
#}

{# Core module:
  - `ProcessesList` (from `bw_matchbox/assets/js/ProcessesList/ProcessesList.js`)
#}

<div id="processes-list-root" class="container processes-list empty loading">
  {% include 'navigation.html' %}
  <div class="page-search">
    <p><input type="text" class="u-full-width" placeholder="Enter value to search" value="{{ query_string }}" id="query_string" /></p>
  </div>
  <div class="page-filters">
    <span class="radio-group order-by">
      {# Controls for `order_by` parameter (name, location, product;
      default is (empty) i.e. random (see `order-random` for
      `.processes-list` root node. #}
      <span class="radio-group-title-wrapper">
        <label class="radio-group-title">Order by:</label>
      </span>
      <span class="radio-group-item">
        <input type="radio" name="order_by" id="order_by_random" value="random" onChange="ProcessesList.onOrderByChange(this)">
        <label for="order_by_random">Random</label>
      </span>
      <span class="radio-group-item">
        <input type="radio" name="order_by" id="order_by_name" value="name" onChange="ProcessesList.onOrderByChange(this)">
        <label for="order_by_name">Name</label>
      </span>
      <span class="radio-group-item">
        <input type="radio" name="order_by" id="order_by_location" value="location" onChange="ProcessesList.onOrderByChange(this)">
        <label for="order_by_location">Location</label>
      </span>
      <span class="radio-group-item">
        <input type="radio" name="order_by" id="order_by_product" value="product" onChange="ProcessesList.onOrderByChange(this)">
        <label for="order_by_product">Product</label>
      </span>
    </span>
    <span class="radio-group filter-by">
      {# Controls for `filter` parameter: `matched`, `unmatched`, or `waitlist`. #}
      <span class="radio-group-title-wrapper">
        <label class="radio-group-title">Filter by:</label>
      </span>
      <span class="radio-group-item">
        <input type="radio" name="filter_by" id="filter_by_none" value="none" onChange="ProcessesList.onFilterByChange(this)">
        <label for="filter_by_none">None</label>
      </span>
      <span class="radio-group-item">
        <input type="radio" name="filter_by" id="filter_by_matched" value="matched" onChange="ProcessesList.onFilterByChange(this)">
        <label for="filter_by_matched">Matched</label>
      </span>
      <span class="radio-group-item">
        <input type="radio" name="filter_by" id="filter_by_unmatched" value="unmatched" onChange="ProcessesList.onFilterByChange(this)">
        <label for="filter_by_unmatched">Unmatched</label>
      </span>
      <span class="radio-group-item">
        <input type="radio" name="filter_by" id="filter_by_waitlist" value="waitlist" onChange="ProcessesList.onFilterByChange(this)">
        <label for="filter_by_waitlist">Waitlist</label>
      </span>
    </span>
    <span class="radio-group user-db">
      {# Controls for `database` parameter: `Source`, `Target`, `Proxy`. #}
      <span class="radio-group-title-wrapper">
        <label class="radio-group-title">Database:</label>
      </span>
      <span class="radio-group-item">
        <input type="radio" name="user-db" id="user-db-source" value="source" onChange="ProcessesList.onUserDbChange(this)">
        <label for="user-db-source">Source</label>
      </span>
      <span class="radio-group-item">
        <input type="radio" name="user-db" id="user-db-target" value="target" onChange="ProcessesList.onUserDbChange(this)">
        <label for="user-db-target">Target</label>
      </span>
      <span class="radio-group-item">
        <input type="radio" name="user-db" id="user-db-proxy" value="proxy" onChange="ProcessesList.onUserDbChange(this)">
        <label for="user-db-proxy">Proxy</label>
      </span>
    </span>
  </div>
  <div id="processes-list-error" class="error">
    <!-- Error text comes here -->
  </div>
  <div id="processes-list-table-empty" class="processes-list-table-empty">No data has loaded for current conditions</div>
  <table id="processes-list-table" class="fixed-table processes-list-table" width="100%">
    <thead>
      <tr>
        <th><div>Name</div></th>
        <th><div>Location</div></th>
        <th><div>Unit</div></th>
        <th><div>Matched</div></th>
      </tr>
    </thead>
    <tbody id="processes-list-table-body">
      {# NOTE: Content is dynamically populated in client's js code, see `ProcessesListDataRender` #}
    </tbody>
  </table>
  <div class="bottom-actions">
    <div class="bottom-actions-links">
      <a id="action-reload-random" onClick="ProcessesList.clearAndReloadData(this)">Reload random data</a>
      <a id="action-load-more" onClick="ProcessesList.loadMoreData(this)">Load more<span id="available-records-info"></span></a>
      <a id="action-clear-and-reload" onClick="ProcessesList.clearAndReloadData(this)">Reload</a>
      <span id="show-total-records-number">Loaded all the available records (<span id="total-records-number"></span>)</span>
    </div>
    <div id="loader-splash" class="loader-splash full-cover"><div class="loader-spinner"></div></div>
  </div>
</div>

<script type="text/javascript">
  modules.require('ProcessesList', (ProcessesList) => {
    // Initialize page data...
    const sharedParams = {
      searchUrl: '{{ url_for("search") }}',
      // TODO: Remove this when #41 is closed
      // database: '{{ database }}', // UNUSED: #41: Using `databases` and `userDb`.
      databases: {
        source: '{{ source }}',
        target: '{{ target }}',
        proxy: '{{ proxy or "" }}',
      },
    };

    // Export to global scope (to access from generated html code handlers).
    window.ProcessesList = ProcessesList;

    // Start core module...
    ProcessesList.start(sharedParams);
  });
</script>
{% include 'footer.html' %}
