<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta
     name="viewport"
     content="width=device-width, initial-scale=1.0"
   />
   
   <link rel="stylesheet" href="../css/arno-web-styles.css">
   <link rel="stylesheet" href="../css/dropdown.css">
   <link rel="stylesheet" href="../css/tippy/translucent-lgt-purple.css">
   <title>Table of contents</title>
   <!-- Include the JS for AG Grid -->
   <script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>
   <!-- Include the core CSS, this is needed by the grid -->
   <link rel="stylesheet"
     href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-grid.css"/>
   <!-- Include the theme CSS, only need to import the theme you are going to use -->
   <link rel="stylesheet" href="../css/grid-theme.css">
 </head>
 <body class="dark-body">
   <!-- Button to demonstrate calling the grid's API. -->
    <div class="grid-buttons">
    <button id="deselect-button" class="pink-button" onclick="deselect()">
      <div>Deselect Rows</div>
        <img src="../static/images/d.svg" alt="Maps visualization" class="pink-btn-img"/>
    </button>
    <button id="unfilter-button" class="pink-button" onclick="unfilter()">
      <div>Remove filters</div>
        <img src="../static/images/r.svg" alt="Maps visualization" class="pink-btn-img"/>
    </button>
    
   <!-- The div that will host the grid. ag-theme-alpine is the theme. -->
   <!-- The gid will be the size that this element is given. -->
   <div id="myGrid" class="custom-ag-theme"></div>
   <script type="text/javascript">
       // Function to demonstrate calling grid's API
       function deselect(){
          gridOptions.api.deselectAll()
       }

       function unfilter(){
          gridOptions.api.setFilterModel(null);
       }

       function filterbyscheme(category_scheme_name) {
          gridOptions.api.setFilterModel(null);
          gridOptions.api.setFilterModel({
            "Category scheme name": {
              "type": "equals",
              "filter": category_scheme_name,
              "filterType": "text"
            }
          });
       }

       let coldefs = [];
       let rowdata = [];

       {% for col in columns %}
       coldefs.push({field: "{{ col }}"});
       {% endfor %}

       {% for row in rows %}
          rowdata.push({
            {% for col in columns %}
            "{{ col }}": "{{ row[col] }}",
            {% endfor %}
          });
        {% endfor %}

       // Grid Options are properties passed to the grid
       const gridOptions = {
         
         // column definitions
         columnDefs: coldefs,
         rowData: rowdata,
         // default col def properties get applied to all columns
         defaultColDef: {sortable: true, filter: true, resizable: true},

         rowSelection: 'multiple', // allow rows to be selected
         animateRows: true, // have rows animate to new positions when sorted
         
         // example event handler
         onCellClicked: params => {
           console.log('cell was clicked', params)
         }
       };

       // get div to host the grid
       const eGridDiv = document.getElementById("myGrid");
       // new grid instance, passing in the hosting DIV and Grid Options
       new agGrid.Grid(eGridDiv, gridOptions);
       gridOptions.api.sizeColumnsToFit();

       // Resize the grid when the window is resized
       onresize = function() {
          gridOptions.api.sizeColumnsToFit();
       }

   </script>
   <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
   <script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
   <script>
    // With the above scripts loaded, you can call `tippy()` with a CSS
    // selector and a `content` prop:
    
    unfilterbtn = tippy('#unfilter-button', {
      content: 'Remove all filters and show all rows',
      allowHTML: true,
      inertia: true,
      interactive: true,
      theme: 'translucent-lgt-purple'
    });
    deselectbtn = tippy('#deselect-button', {
      content: 'Remove your row selection',
      allowHTML: true,
      inertia: true,
      interactive: true,
      theme: 'translucent-lgt-purple'
    });

    // dropdown menu using tippy

    document.addEventListener('DOMContentLoaded', function() {

    const template = document.getElementById('example')
    const container = document.createElement('div')
      container.appendChild(document.importNode(template.content, true))

    tippy('.c-pink-button', {
      content: container.innerHTML,
      trigger: 'mouseenter', // mouseenter, click, focus; manual.
      placement: 'bottom-end',
      arrow: true,
      theme: 'translucent-lgt-purple',
      // arrowType: 'round',
      animation: 'scale',
      duration: [250, 200],
      distance: 12,
      interactive: true,
      showOnInit: true, // to ease styling
      allowHTML: true,
    });
    });
  </script>
  </body>
</html>