<!DOCTYPE html>
<html>
<head>
  <title>[starred] {% trans %}Favourites{% endtrans %}</title>
  <style>
    @import url(odysseus:butterick.css);
    figure {width: 134px; overflow: crop;}
    legend {text-overflow: ellipsis;}
    aside {float: left; background: #eee; padding: 10px}
  </style>
</head>
<body>
  <aside><dl>{% tagged url.query.t tag as tag %}
    <dd><a href="odysseus:bookmarks?{% for t in url.query.t %}t={{t}}&{% endfor %}t={{ tag }}">
        {% query %}SELECT label FROM tags WHERE rowid = {{ tag }};{% each-row %}{{ label }}{% empty %}-{% endquery %}
	</a></dd>
  {% endtagged %}</dl></aside>

  {% macro bookmark %}
  <figure>
    <a href="{{ url }}" title="{{ desc }}">
      <img width="132" height="132"
        {% query %}SELECT image FROM screenshot_v2 WHERE uri = {{ url }};
        {% each-row %}
          src="data:image/png;base64,{{ image }}"
        {% endquery %} alt="{{ desc }}" />
    </a>
    <legend>{{ title }}</legend>
  </figure>
  {% endmacro %}
  <nav>
  {% if url.query.t %}
    {% tagged url.query.t as fav %}
    {% query %}SELECT url, title, desc FROM favs WHERE rowid = {{ fav }};
    {% each-row %}{% bookmark %}{% endquery %}{% endtagged %}
  {% else %}
    {% query %} SELECT url, title, desc FROM favs;{% each-row %}{% bookmark %}{% endquery %}
  {% endif %}
  </nav>
</body>
</html>
