{% macro show_metadata(query_metadata) %}
<div class="col s12">
  <p>Below the metadata for the results from the Corpus
    <i>{{ query_metadata.corpus_name }}</i> generated with the query
    <i>{{ query_metadata.query }}</i> are shown.
  </p>

</div>

<div class="col s12">
  <div class="card">
    <div class="card-content" id="results">
      <table class="responsive-table highlight">
        <thead>
          <tr>
            <th>Metadata Description</th>
            <th>Value</th>
          </tr>
        </thead>
        <tbody>
          {% for pair in query_metadata|dictsort %}
          <tr>
            <td>{{ pair[0] }}</td>
            {% if pair[0] == 'corpus_all_texts'
               or pair[0] == 'text_lookup'  %}
              <td>
              <table>
              {% for key, value  in pair[1].items()  %}
                  <tr style="border-bottom: none;">
                    <td>
                      <i>{{ value['title'] }}</i> written
                      by <i>{{ value['author'] }}</i>
                      in <i>{{ value['publishing_year'] }}</i>
                      <a class="waves-effect
                                waves-light
                                btn
                                right
                                more-text-detials"
                         data-metadata-key="{{ pair[0] }}"
                         data-text-key="{{ key }}"
                         href="#modal-text-details">More
                          <i class="material-icons right"
                             data-metadata-key="{{ pair[0] }}"
                             data-text-key="{{ key }}">
                             info_outline
                          </i>
                      </a>
                    </td>
                  </tr>
              {% endfor %}
              </table>
              </td>
            {% else %}
              <td>{{ pair[1] }}</td>
            {% endif %}
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- Modal Structure -->
<div id="modal-text-details" class="modal modal-fixed-footer">
  <div class="modal-content">
    <h4>Bibliographic data</h4>
    <p id="bibliographic-data"></p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green red btn">Close</a>
  </div>
</div>

<script>
var moreTextDetailsButtons;
moreTextDetailsButtons = document.getElementsByClassName("more-text-detials");
for (var btn of moreTextDetailsButtons) {
  btn.onclick = () => {
    let modal = document.getElementById("modal-text-details");
    modal = M.Modal.init(modal, {"dismissible": true});
    modal.open();
    let metadataKey = event.target.dataset.metadataKey;
    let textKey = event.target.dataset.textKey;
    let textData = {{ query_metadata|tojson|safe }}[metadataKey][textKey];
    console.log(textData);
    let bibliographicData = document.getElementById("bibliographic-data");
    bibliographicData.innerHTML = "";
    let table = document.createElement("table");
    for (let [key, value] of Object.entries(textData)) {
      table.insertAdjacentHTML("afterbegin",
      `
        <tr>
          <td>${key}</td>
          <td>${value}</td>
        </tr>
      `);
    }
    table.insertAdjacentHTML("afterbegin",
      `
        <thead>
          <th>Description</th>
          <th>Value</th>
        </thead>
      `)
    bibliographicData.appendChild(table);
  }
}
</script>