{% macro show_metadata(query_metadata) %}

<div class="col s12">
  <table class="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>

<!-- 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>
{% endmacro %}