{%- macro insert_page_content() -%}
<noscript>
  <div class="container">
    <div class="row">
      <div class="col s12">
        <div class="card red darken-1">
          <div class="card-content white-text">
            <span class="card-title">JavaScript is disabled</span>
            <p>You have JavaScript disabled. Nopaque uses javascript and sockets to send data in realtime to you. For example showing you the status of your jobs and your corpora. Please activate JavaScript to make full use of nopaque.</p>
            <p>Some services are still useable without Javascript.</p>
          </div>
          <div class="card-action">
            <a href="#">What services can I still use?</a>
            <a href="#">What services and functions are not available?</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</noscript>
{% block page_content %}{% endblock %}
{%- endmacro -%}

{%- macro insert_color_scheme(hex_color) -%}
<style>
  main button, main .btn, main .btn-floating {background-color: {{ hex_color }};}
  main .pagination li.active {background-color: {{ hex_color }};}
  main .table-of-contents a.active {border-color: {{ hex_color }};}
  main .tabs .tab a {color: inherit;}
  main .tabs .tab a:hover {color: {{ hex_color }};}
  main .tabs .tab a.active, .tabs .tab a:focus.active {
    color: {{ hex_color }};
    background-color: {{ hex_color }}28;
  }
  main .tabs .indicator {background-color: {{ hex_color }};}
</style>
{%- endmacro -%}

{% macro show_metadata(query_metadata) %}

<div class="col s12">
  <table class="highlight">
    <thead>
      <tr>
        <th style="width: 33%">Metadata Description</th>
        <th style="width: 66%">Value</th>
      </tr>
    </thead>
    <tbody>
      {% for pair in query_metadata|dictsort %}
      <tr>
        <td>{{ pair[0]|replace("_", " ")|upper() }}</td>
        {% if pair[0] == "corpus_all_texts"
           or pair[0] == "text_lookup"  %}
          <td>
            <ul class="collapsible">
            {% for key, value  in pair[1].items()  %}
              <li class="text-metadata"
                  data-metadata-key="{{ pair[0] }}"
                  data-text-key="{{ key }}">
                <div class="collapsible-header"
                     data-metadata-key="{{ pair[0] }}"
                     data-text-key="{{ key }}">
                  <i class="material-icons"
                     data-metadata-key="{{ pair[0] }}"
                     data-text-key="{{ key }}">info_outline</i>
                  {{ value['author'] }} - {{ value['publishing_year'] }}
                  - {{ value['title'] }}
                </div>
                <div class="collapsible-body">
                  <span>
                    <ul id="bibliographic-data-{{ pair[0] }}-{{ key }}"
                        style="column-count: 2;">
                    </ul>
                  </span>
                </div>
              </li>
            {% endfor %}
          </ul>
          </td>
        {% else %}
          <td>{{ pair[1] }}</td>
        {% endif %}
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    let elems = document.querySelectorAll('.collapsible');
    let instances = M.Collapsible.init(elems, {accordion: false});
  });
let collapsibles = document.getElementsByClassName("text-metadata");
for (let collapsible of collapsibles) {
  collapsible.onclick = () => {
    let metadataKey = event.target.dataset.metadataKey;
    let textKey = event.target.dataset.textKey;
    let textData = {{ query_metadata|tojson|safe }}[metadataKey][textKey];
    let bibliographicData = document.getElementById(`bibliographic-data-${metadataKey}-${textKey}`);
    bibliographicData.innerHTML = "";
    for (let [key, value] of Object.entries(textData)) {
      bibliographicData.insertAdjacentHTML("afterbegin",
      `
      <li><span style="text-transform: capitalize;">${key}:</span> ${value}</li>
      `);
    }
  }
}
</script>
{% endmacro %}