{% extends "base.html" %} {% from 'bootstrap5/utils.html' import render_icon %}
{% from 'bootstrap5/table.html' import render_table %} {% block content %}
<div class="container">
  <div class="row">
    <div class="col">
      <div class="d-flex justify-content-between align-items-center">
        <h1>Personal notes</h1>
        <button class="btn btn-primary mb-2 d-flex align-items-center" onclick="downloadTableAsCSV()">
          {{ render_icon('file-earmark-arrow-down') }}&nbsp;Export
        </button>
      </div>
    </div>
  </div>
  <div class="row mb-2">
    <div class="col">
      {{ render_table(personal_notes, responsive=True, safe_columns=['text']) }}
      {% if personal_notes | length == 0 %}
      <p>No notes yet</p>
      {% endif %}
    </div>
  </div>
</div>
<script>
  function downloadTableAsCSV(separator = ",") {
    const rows = document.querySelectorAll("table tr");
    const csv = [];
    for (let i = 0; i < rows.length; i++) {
      const row = [],
        cols = rows[i].querySelectorAll("td, th");
      for (let j = 0; j < cols.length; j++) {
        // Clean innertext to remove multiple spaces and jumpline (break csv)
        let data = cols[j].innerText
          .replace(/(\r\n|\n|\r)/gm, "")
          .replace(/(\s\s)/gm, " ");
        // Escape double-quote with double-double-quote (see https://stackoverflow.com/questions/17808511/properly-escape-a-double-quote-in-csv)
        data = data.replace(/"/g, '""');
        // Push escaped string
        row.push('"' + data + '"');
      }
      csv.push(row.join(separator));
    }
    const csvString = csv.join("\n");
    const filename = `export_${new Date().toLocaleDateString()}.csv`;
    const link = document.createElement("a");
    link.style.display = "none";
    link.setAttribute("target", "_blank");
    link.setAttribute(
      "href",
      "data:text/csv;charset=utf-8," + encodeURIComponent(csvString)
    );
    link.setAttribute("download", filename);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }
</script>
{% endblock %}