index.njk

{% extends "page.njk" %}

{% block body %}
    <section class="hero is-dark">
      <div class="hero-body">
        <div class="container">
          <h1 class="title is-1">
            Accord Project <span class="has-light">Template Library</span>
          </h1>
          <h2 class="subtitle">
            This library contains all Accord Project contract and clause templates. Templates are captured using the Accord Project Cicero format. To contribute new templates (or fix existing templates), you can fork this <a href="https://github.com/accordproject/cicero-template-library" target="_blank">GitHub</a> repository and submit pull requests to the maintainers.
          </h2>
        </div>
      </div>
    </section>

    <section class="section">
        <div class="container">
            <h2 class="title is-2">Templates</h2>

            <!-- Search Bar -->
            <div class="field">
                <div class="control">
                    <input type="text" id="searchInput" class="input" placeholder="SEARCH FOR TEMPLATE" onkeyup="filterTable()">
                </div>
            </div>

            <table class="table box versions" id="templateTable">
            <thead>
                <tr>
                <th>Name</th>
                <th>Description</th>
                <th>Cicero Version</th>
                <th>Type</th>
                </tr>
            </thead>
            <tbody id="tableBody">
                {% for name, val in templateIndex | dictsort %}
                <tr>
                <th>
                  <a href="{{name}}.html">
                    {% if val.displayName %}
                      {{val.displayName}}
                    {% else %}
                      {{name}}
                    {% endif %}
                  </a>
                </th>
                <td>{{val.description}}</td>
                <td>{{val.ciceroVersion}}</td>
                <td>{% if val.type === 0 %}Contract{% else %}Clause{% endif %}</td>
                </tr>
                {% endfor %}

                <!-- No Results Row (Hidden by Default) -->
                <tr id="noResultsRow" style="display: none;">
                    <td colspan="4" class="has-text-centered">No results found</td>
                </tr>

            </tbody>            
            <tfoot>
                <tr>
                <th>Name</th>
                <th>Description</th>
                <th>Cicero Version</th>
                <th>Type</th>
                </tr>
            </tfoot>
            </table>
            <div class="content">
                <a href="template-library.json" target="_blank">Template Library Index</a>
            </div>
        </div>
    </section>

    <!-- JavaScript for Search Functionality -->
    <script>
      function filterTable() {
          let input = document.getElementById("searchInput");
          let filter = input.value.toLowerCase();
          let table = document.getElementById("templateTable");
          let rows = table.getElementsByTagName("tr");
          let noResultsRow = document.getElementById("noResultsRow");
          let matchFound = false;

          for (let i = 1; i < rows.length - 1; i++) { // Exclude the last row (noResultsRow)
              let td = rows[i].getElementsByTagName("th")[0];
              if (td) {
                  let textValue = td.textContent || td.innerText;
                  if (textValue.toLowerCase().indexOf(filter) > -1) {
                      rows[i].style.display = "";
                      matchFound = true;
                  } else {
                      rows[i].style.display = "none";
                  }
              }
          }

          // Show "No results found" row if no matches are found
          noResultsRow.style.display = matchFound ? "none" : "";
      }
    </script>

{% endblock %}