  <h2> Origin </h2>
  {% for r in results %}
    <button onclick='showFamily("{{ r }}" )'>{{ r }} </button>
    {% endfor %}

    <h2> Colours </h2>
  {% for c in colours %}
    <button onclick='showColour("{{ c }}" )'>{{ c }} </button>
    {% endfor %}
    <h2> Levels </h2>
  <select id="levels" onchange="showLevel(this.options[this.selectedIndex].value)">
     <option value="all">All</option>
  {% for c in levels %}
    <option value="level_{{ c }}">{{ c }} </option>
    {% endfor %}
</select>

   <h2> Parameters </h2>
  <select id="parameters" onchange="showParam(this.options[this.selectedIndex].value)">
  <option value="all">All</option>
  {% for l, s in parameters.items() %}
    <option value="{{ s }}">{{ l }} </option>
    {% endfor %}

</select>
<br/>
<h2> Magics settings </h2>
<textarea id="magics" rows="8" cols="100">

</textarea>


  {% for r, values in results.items() %}


  <table class='{{ r }}'>
    <tr> <td span='2'><b>{{ r }}</b></td></tr>
    {% for v in values %}
    <tr class='{{ v.colours }} {{ v.level }} {{ v.parameters }}'>

    <td  onclick='magics("{{ v.title }}", {{ v.nb_level }})' style="cursor:pointer">
      <b>  {{ v.title }} </b> - <i> {{ v.nb_level }} colours </i> <br/>
      <img src='/download/attachments/97362110/{{ v.path }}'/>
    </td>
    <!--td> {% if v.labels|length %}  <b> Parameters: </b>  {{ v.labels }} {% endif %} </td-->
    </tr>
    {% endfor %}

    </table>
     {% endfor %}


<script>

function show(elems, visibility)
{
    for(var i = 0; i != elems.length; ++i)
    {
        elems[i].style.display = visibility; // hidden has to be a string
    }
}
function showFamily(name) {
    document.getElementById('magics').value = "";
    show(document.querySelectorAll('TR'), "block");
    show(document.querySelectorAll('TABLE:not(.' + name + ')'), "none");
    show(document.getElementsByClassName("controls"), "block");
    show(document.getElementsByClassName(name), "block");
    document.getElementById('parameters').value="all";
    document.getElementById('levels').value="all";
}

function showRow(name) {
    document.getElementById('magics').value = "";
    show(document.querySelectorAll('TABLE'), "block");
    show(document.querySelectorAll('TR'), "block");
    show(document.querySelectorAll('TR:not(.' + name +')'), "none");
    show(document.querySelectorAll('tr .' + name + ', tr .controls'), "block");
}
function showColour(name) {

    document.getElementById('parameters').value="all";
    document.getElementById('levels').value="all";
    showRow(name);

}
function magics(name, count) {


    document.getElementById('magics').value = `contour = mcont(
    contour_level_selection_type = "count",
    contour_level_tolerance = 0, 
    contour_level_count = ` + count + `,
    contour_shade = 'on',
    contour_shade_method = 'area_fill',
    contour_shade_colour_method = 'palette',
    contour_shade_palette_name = '` + name + "')"
}

function showLevel(name) {
    document.getElementById('parameters').value="all";
    if ( name == "all" ) {
        show(document.querySelectorAll('TABLE'), "block");
        show(document.querySelectorAll('TR'), "block");

        return;
    }

    showRow(name);
}
function showParam(name) {
    document.getElementById('levels').value="all";
    if ( name == "all" ) {
        show(document.querySelectorAll('TABLE'), "block");
        show(document.querySelectorAll('TR'), "block");

        return;
    }
    showRow(name);
}
</script>
