{# Linked to from application menu & newtab page. 

Designed (using typography) to make it quick to locate particular dates
and to visually communicate the paths surfers took through this history. #}
<!DOCTYPE html>
{% macro hl-change fmt %}
  {% ifchanged visited_at|date:fmt %}<strong>{{visited_at|date:fmt}}</strong>{% else %}{{visited_at|date:fmt}}{% endif %}
{% endmacro %}
{% macro q-history %}
  FROM page_visit WHERE {{q}} = "" OR rowid IN (SELECT rowid FROM history_fts({{q}}))
{% endmacro %}
{% macro q-paged page %}
  {% q-history %} ORDER BY visited_at DESC LIMIT {{pagesize}} OFFSET {{page}}*{{pagesize}}
{% endmacro %}

{% if url.query.q %}
  {# Load up the full-text search index on-demand #}
  {% query %}INSERT OR IGNORE INTO history_fts(rowid, uri, title)
    SELECT rowid, uri, title FROM page_visit;{% endquery %}
{% endif %}

{% macro tab-colour tab %}
  {# The 0th tab is left black, as that currently doubles as the ID for
    tabs before history tracking started. #}
  {% if tab != 0 %}style="color: hsl({{ tab|alloc:360 }}, 100%, 25%);"{% endif %}
{% endmacro %}

<html>
<head>
  <title>[document-open-recent] {% trans %}History{% endtrans %}</title>
  <style>
    @import url('odysseus:butterick.css');
    input[type=search] {width: 50%;}
  </style>
</head>
<body>{% with pagesize=400 q=url.query.q page=url.query.page|default:0 %}
  <nav>
    <aside style="float: right;">
      {% query %}SELECT min(visited_at) AS earliest, max(visited_at) AS latest
        FROM (SELECT visited_at {% q-paged %});
      {% each-row %}
        {{latest|date}}–{{earliest|date}}
      {% endquery %}
    </aside>

    <form>
      <input type="search" name="q" value="{{q}}" placeholder="{% trans %}History{% endtrans %}" />
    </form>
  </nav>

  <dl>{% query %}SELECT rowid, tab, uri, title, favicon, visited_at, referrer {% q-paged %};
  {% each-row %}
    {% ifchanged visited_at|date:"%Y%B%e" %}<dt>
      {% hl-change fmt="%e" %} {% hl-change fmt="%B" %} {% hl-change fmt="%Y" %}
    </dt>{% endif %}

    <dd id="visit-{{rowid}}" aria-flowto="visit-{{referrer}}"
        {% query %}SELECT image FROM screenshot_v2 WHERE uri = {{ uri }};
        {% each-row %}data-img="{{ image }}"{% endquery %}>
      <em {% tab-colour %}>{% hl-change fmt="%k" %}:{{visited_at|date:"%M"}}</em>
      <a href="{{ uri }}"
        {% query %}SELECT title, uri FROM page_visit WHERE rowid = {{referrer}};
            {% each-row %}
title='{% trans %}Visited from:{% endtrans %} "{{ title }}"{# newline #}
{{ uri }}'
        {% endquery %}>
            <img height="16" width="16" src="{{uri|favicon}}" /> {{title}}
        </a>
    </dd>
  {% empty %}
    <dt>{% trans %}No results for this search or on this page!{% endtrans %}</dt>
  {% endquery %}</dl>

  <!-- To be populated by JS -->
  <aside style="position: fixed; top: 30%; right: 0;">
    <img id="screenshot" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
    <script>
      let preview = document.querySelector("#screenshot")
      for (let el of document.querySelectorAll("[data-img]")) {
        el.onmouseover = () => {
          preview.src = "data:image/png;base64," + el.dataset.img
        }
      }
    </script>
  </aside>

  <footer>
    {% query %}SELECT count(*)/{{pagesize}} + 1 AS num_pages {% q-history %};
    {% each-row %}
      {% for i in num_pages %}
        {% if i != url.query.page %}<a href="odysseus:history?page={{i}}&q={{q}}"{% else %}<strong {% endif %}
          {% query %}SELECT min(visited_at) AS earliest, max(visited_at) AS latest
                FROM (SELECT visited_at {% q-paged page=i %});
          {% each-row %}
            title="{{latest|date}}–{{earliest|date}}"
          {% endquery %}
        >●</{% if i != url.query.page %}a{% else %}span{% endif %}>
      {% empty %}
        {% trans %}Wow! No history. <a href="https://alcinnz.github.io/Odysseus-recommendations/">Go explore</a>!{% endtrans %}
      {% endfor %}
    {% endquery %}
  </footer>
</body>
{% endwith %}</html>
