{% with feed=page.channel|default:page format=format|default:"html" %}
<html>
<head>
  <title>{{ feed.title }}</title>
  <link rel="alternate" type="{{ mime }}" href="{{ url }}" />
  <base href="{{ url }}" />
  <style>
    @import url("odysseus:butterick.css");

    a[href^="mailto:"]:before {content: url(icon:16/mail-send);}
    a[href^="odysseus:view?tag="]:before {content: url(icon:16/tag);}
    iframe {
      width: 100%;
      height: 200px;
      resize: vertical;
    }
    blockquote {clear: both; white-space: pre-wrap;}
    img {max-width: 100%; max-height: 200px;}
  </style>
  {% if feed.icon %}<link rel="shortcut icon" href="{{ feed.icon }}" />{% endif %}
</head>
<body>
  {% macro entry : post level %}
    <h{{ level }}><a href="{{ post.link }}">{{ post.title }}</a></h{{ level }}>
    {% if post.subtitle %}
      <h{{ level|add:1 }}>{{ post.subtitle }}</h{{ level|add:1 }}>
    {% endif %}

    <aside style="float:right">
      {{ post.pubDate|default:post.published }}
      {% if post.updated %};
        {% trans %}Updated{% endtrans %} {{ post.updated }}
      {% endif %}
    </aside>
    <aside style="float:left">
      {{ post.author|uniqsort|join:", " }}
      {% if post.contributor %}; {% trans %}Contributors{% endtrans %}
        {{ post.contributor|uniqsort|join:", " }}
      {% endif %}
    </aside>

    <blockquote>
        {{ post.description|default:post.content|default:post.summary|text:format }}
    </blockquote>

    <nav>
      {% for file in post.content|filter:"src"|default:post.enclosure|default:post.attachment %}
        <a href="{{ file.url|default:file.src|base:url }}">
          <img src="icon:32/{{ file.type|mimeicon }}" alt="{{ file.type }}
                    {% filter escape:'html' %}{% mimeinfo file.type %}{% endfilter %}" />
        </a>
      {% endfor %}
      {% for tag in post.category %}{% with tag=tag.text|default:tag %}
        <a href="odysseus:view?tag={{ tag|escape:'url' }}&url={{ url|escape:'url' }}">{{ tag }}</a>
      {% endwith %}{% endfor %}
    </nav>
  {% endmacro %}
  {% macro filterbar : tags authors %}{% if tags|length > 1 or authors|length > 1 %}
    <aside><form action="odysseus:view" method="GET">
      <input type="hidden" name="url" value="{{ url }}" />
      <dl>
      {% if authors|length > 1 %}
        <dt>{% trans %}Authors{% endtrans %}</dt>
        {% for author in authors %}
          <dd><input type="checkbox" name="author" value="{{ author }}"
              {% if author in Q.author %}checked{% endif %} id="author-{{ author|md5 }}" />
            <label for="author-{{ author|md5 }}">{{ author|title }}</label></dd>
        {% endfor %}
      {% endif %}
      {% if tags|length > 1 %}
        <dt>{% trans %}Tags{% endtrans %}</dt>
        {% for tag in tags %}
          <dd><input type="checkbox" name="tag" value="{{ tag }}"
              {% if tag in Q.tag %}checked{% endif %} id="tag-{{ tag|md5 }}" />
            <label for="tag-{{ tag|md5 }}">{{ tag|title }}</label></dd>
        {% endfor %}
      {% endif %}
      <button type="submit"><img src="icon:16/system-search-symbolic" /> Search</button>
    </form></aside>
  {% endif %}{% endmacro %}

  {% if feed.image.url %}{% with img=feed.image %}
    {% if img.link %}<a href="{{ img.link }}">{% endif %}
    <img src="{{ img.url }}" alt="{{ img.title }}" title="{{ img.title }}" />
    {% if img.link %}</a>{% endif %}
  {% endwith %}{% elif feed.logo %}
    <img src="{{ feed.logo }}" />
  {% endif %}

  {% entry post=feed level=1 %}
  {% filterbar tags=feed|lookup:"category"|uniqsort authors=feed|lookup:"author contributor"|uniqsort %}
  <main>{% for post in feed.item|default:feed.entry %}
    {% if Q.tag in post.category and Q.author in post.author , post.contributor %}
      <section>{% entry level=3 %}</section>
    {% endif %}
  {% endfor %}
  {% if Q.author or Q.tag %}
    <nav><a id="js-loadmore"
        {% with link=feed.link|filter:'rel in "next" , "next-archive"' %}
        href="odysseus:view?url={{ link.href|base:url|escape:"url" }}&{{ Q }}">
        {% endwith %}
      {% trans %}Load more…{% endtrans %}
    </a></nav>
  {% endif %}</main>

  <footer>
    <nav>
      {% if feed.complete %}
        <em title="{% trans %}No more entries{% endtrans %}">
          {% trans %}{# Shorthand for "no more entries" #}Fin.{% endtrans %}
        </em>
      {% else %}
        {% macro page-link : cond title label %}{% with link=feed.link|filter:cond %}
          {% if link and link.href not in url %}
            <a href="{{ link.href }}" title="{{ title }}">{{ label }}</a>
          {% endif %}
        {% endwith %}{% endmacro %}
        {% macro date-of : $0=post %}{{ $0.pubDate|default:$0.published }}{% endmacro %}

        {% page-link cond="'first' in rel" title="First page"|trans label="↞" %}
        {% page-link cond="rel in 'previous' , 'prev-archive'"
            title="Previous page"|trans label="↩" %}
        <em>{% date-of feed|lookup:"item entry"|first %}
          &mdash;
          {% date-of feed|lookup:"item entry"|last %}</em>
        {% page-link cond="rel in 'next' , 'next-archive'"
            title="Next page"|trans label="↪" %}
        {% page-link cond="'last' in rel"
            title="Last page"|trans label="↠" %}
      {% endif %}
    </nav>
    <p>
      {{ feed.copyright|default:feed.rights }}
      {% if feed.managingEditor %}
        <a href="mailto:{{ feed.managingEditor }}">{% trans %}Editor{% endtrans %}</a>
      {% endif %}
      {% if feed.webMaster %}
        <a href="mailto:{{ feed.webMaster }}">{% trans %}Web Master{% endtrans %}</a>
      {% endif %}
      {% for author in feed|lookup:"author"|filter:"uri or email" %}
        <a href="{% if author.uri %}{{ author.uri }}{% else %}mailto:{{ author.email }}{% endif %}">
          {{ author.name }}
        </a>
      {% endfor %}
    </p>
  </footer>

  <script>
    // When load more is clicked, query the next pages inline
    //    until more results are found.
    var a = document.querySelector('#js-loadmore')
    if (a) a.click = () => {
      var req = new XMLHttpRequest()
      req.open("GET", a.href);
      req.onload = () => {
        var foundResults = false
        for (var post of req.responseXML.querySelectorAll('main > section')) {
          a.insertAdjacentElement('beforebegin', post)
          foundResults = true
        }
        a.href = req.responseXML.querySelector('#js-loadmore').href

        if (!foundResults) a.click()
      }
    }
  </script>
</body>
</html>
