{% extends "base.html" %}

{% block title %}Datasette: {% for database in databases %}{{ database.name }}{% if not loop.last %}, {% endif %}{% endfor %}{% endblock %}

{% block extra_head %}
<style>
.import-csv-button {
  box-shadow: 0px 4px 14px -7px #0e0c82;
  background: linear-gradient(to bottom, #8484f4 5%, rgb(94, 92, 172) 100%);
  background-color: #8484f4;
  border-radius: 8px;
  display: inline-block;
  cursor: pointer;
  color: white;
  font-size: 0.8em;
  font-weight: bold;
  padding: 0.5em 1em;
  margin-right: 0.5em;
  text-decoration: none;
  text-shadow: 0px 1px 0px #3d768a;
}
.import-csv-button:link,
.import-csv-button:visited,
.import-csv-button:hover
.import-csv-button:focus {
  color: white;
  text-decoration: none;
}
.import-csv-button:active {
  position:relative;
  top: 1px;
}
</style>
{% endblock %}

{% block body_class %}index{% endblock %}

{% block content %}
<h1>Datasette Desktop</h1>

<p id="run-sql-link"><strong><a href="/temporary">Run SQL</a></strong> against a temporary database  </p>

{% for database in databases %}
  {% if database.name != "plugin_directory" %}
    {% if database.name != "temporary" or database.tables_count %}
    <h2 style="padding-left: 10px; border-left: 10px solid #{{ database.color }}" class="database-{{ database.name }}"><a href="{{ urls.database(database.name) }}">{{ database.name }}</a>{% if database.private %} 🔒{% endif %}</h2>
    <p>
        {% if database.show_table_row_counts %}{{ "{:,}".format(database.table_rows_sum) }} rows in {% endif %}{{ database.tables_count }} table{% if database.tables_count != 1 %}s{% endif %}{% if database.tables_count and database.hidden_tables_count %}, {% endif -%}
        {% if database.hidden_tables_count -%}
            {% if database.show_table_row_counts %}{{ "{:,}".format(database.hidden_table_rows_sum) }} rows in {% endif %}{{ database.hidden_tables_count }} hidden table{% if database.hidden_tables_count != 1 %}s{% endif -%}
        {% endif -%}
        {% if database.views_count -%}
            {% if database.tables_count or database.hidden_tables_count %}, {% endif -%}
            {{ "{:,}".format(database.views_count) }} view{% if database.views_count != 1 %}s{% endif %}
        {% endif %}
    </p>
    <p>{% for table in database.tables_and_views_truncated %}<a href="{{ urls.table(database.name, table.name) }}"{% if table.count %} title="{{ table.count }} rows"{% endif %}>{{ table.name }}</a>{% if table.private %} 🔒{% endif %}{% if not loop.last %}, {% endif %}{% endfor %}{% if database.tables_and_views_more %}, <a href="{{ urls.database(database.name) }}">...</a>{% endif %}</p>
  {% endif %}{% endif %}
{% endfor %}

<p>Get started   by opening a <strong>CSV file</strong> or <strong>SQLite database file</strong> using the <em>File</em> menu.</p>

<div id="example-csvs" style="display: none">
  <details>
    <summary>Or try importing an example CSV</summary>
  </details>
</div>

<script>
let examples_url = "https://datasette.io/content/example_csvs.json?_shape=array";
const h = (text) =>
  text
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&apos;");

document.addEventListener("DOMContentLoaded", async () => {
  // If temporary database is visible, hide #run-sql-link
  if (document.querySelectorAll(".database-temporary").length) {
    document.querySelector("#run-sql-link").style.display = "none";
  }
  // Load and display example CSVs
  let div = document.querySelector("#example-csvs");
  let details = div.querySelector("details");
  let alreadyInstalled = await (await fetch(
    "/temporary.json?sql=select+name+from+sqlite_master+where+type+=+'table'&_shape=arrayfirst"
  )).json();
  // Figure out what's installed already
  var examples = await (await fetch(
    examples_url
  )).json();
  let html = examples
    .map(
      (row) => `
  <li>
    <h3>${h(row.name)}</h3>
    <div style="padding-left: 0.8em">
      <p style="font-size: 0.9em">${h(row.description)}</p>
      <p>
        <strong>Source</strong>: <a href="${h(row.source_url)}">${h(row.source)}</a>
        ${row.about_url ? `&nbsp;&nbsp;&nbsp;&nbsp;<strong>About</strong>: <a href="${h(row.about_url)}">${h(row.about)}</a>`: ''}
      </p>
    </div>
    ${alreadyInstalled.includes(row.table_name) ?
      `<p><strong>Already imported</strong>: <a href="/temporary/${row.table_name}">${row.table_name}</a></p` :
      `<a class="import-csv-button" data-csvurl="${h(row.url)}" data-name="${h(row.name)}" data-tablename="${h(row.table_name)}" href="#">Import and open  this CSV</a>`}
  </li>`
    )
    .join("\n");
    details.innerHTML += "<ul>" + html + "</ul>";
  Array.from(div.querySelectorAll(".import-csv-button")).forEach(a => {
    a.addEventListener("click", (ev) => {
      ev.preventDefault();
      datasetteApp.importCsvFromUrl(ev.target.dataset.csvurl, ev.target);
    });
  });
  div.style.display = "block";
});

</script>

{% endblock %}
