<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Kayla (Céile) XMPP Invite -->
<!-- Zenya (Xenia) XMPP Invite -->
<!-- Fast And Sleek Invite (FASI) -->
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
    <title>XMPP: {{action}} {{title}}</title>
    <meta name="description" content="{{action}} {{title}}" />
    <meta name="generator" content="Fast And Sleek Invite" />
    <meta name="uri" content="{{xmpp_uri}}" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta property="og:description" content="{{action}} {{title}}" />
    <meta property="og:image" content="/photo/{{filename}}" />
    <meta property="og:site_name" content="XMPP" />
    <meta property="og:title" content="{{title}}" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="{{url}}" />
    <link rel="alternate icon" href="/img/favicon.ico" type="image/x-icon" />
    <link rel="icon" href="/img/favicon.svg" type="image/svg+xml" />
    <link rel="stylesheet" href="/css/stylesheet.css" media="screen" type="text/css" />
  </head>
  <body>
    <div id="overlay">
      <div id="bar">
        <a href="https://xmpp.org">
          <img id="logo" src="/img/logo-wordmark-horizontal.svg" />
        </a>
        <a id="download" href="https://xmpp.org/software/">
          Download
        </a>
      </div>
      <div id="container-of-content">
        <div id="content">
          {% if links %}
            <div id="action-bar">
              {% for link in links %}
                <a href="{{link[1]}}">
                  {{link[0]}}
                </a>
              {% endfor %}
            </div>
          {% endif %}
          <div id="profile-top">
            {% if filename %}
              <img id="photo" src="/photo/{{filename}}" />
            {% endif %}
            <span>
              <h1>{{node_title}}</h1>
              <a href="/{{jid_bare}}/{{node_name}}">
                <h2>{{jid_title}}</h2>
              </a>
              {% if node_note %}
                <h3>
                  {{node_note}}
                </h3>
              {% endif %}
            </span>
            <img id="qrcode" src="/qr/{{jid_bare}}.png" />
          </div>
          {% if entries %}
            <div id="entries">
              {% for entry in entries %}
                  <div class="entry"
                       id="{{entry['id']}}">
                    <strong>{{entry['title']}}</strong>
                    <div class="summary">{{entry['content'] or entry['summary']}}</div>
                    <div class="date">{{entry['updated'] or entry['published']}}</div>
                    {% if entry['tags'] %}
                      <div class="tags">
                        <span>Tags:</span>
                        {% for tag in entry['tags'] %}
                          <span>{{tag}}</span>
                        {% endfor %}
                      </div>
                    {% endif %}
                    <div class="link">
                      <a href="/d/{{jid_bare}}/{{node_name}}/{{entry['id']}}"
                         title="Permalink (i.e. permanent link)"
                         class="permalink">
                        🔗️
                      </a>
                      <a href="{{entry['link']}}">
                        {{entry['title']}}
                      </a>
                    </div>
                  </div>
              {% endfor %}
            </div>
          {% endif %}
          {% if exception %}
            <div>
              <code id="exception">{{exception}}</code>
            </div>
          {% endif %}
          {% if number_of_pages %}
            <div id="number-of-pages">
              {% if number_of_pages > 5 %}
                {% if page_number < 2 %}
                  <span class="inactive">First</span>
                  <span class="inactive">Back</span>
                {% else %}
                  <a href="?page=1">First</a>
                  <a href="?page={{page_number-1}}">Back</a>
                {% endif %}
                <a href="?page={{page_number}}">{{page_number}}</a>
                {% if page_number == number_of_pages %}
                  <span class="inactive">Proceed</span>
                  <span class="inactive">Last</span>
                {% else %}
                  <a href="?page={{page_number+1}}">Proceed</a>
                  <a href="?page={{number_of_pages}}">Last</a>
                {% endif %}
              {% else %}
                {% for number in range(number_of_pages) %}
                  <a href="?page={{number+1}}">{{number+1}}</a>
                {% endfor %}
              {% endif %}
            </div>
          {% endif %}
          {% if previous %}
            <div id="number-of-pages">
              <a href="./">Previous</a>
            </div>
          {% endif %}
          <!-- div>
              <a id="preview" href="/view/{{jid_bare}}">
              Preview journal OR Preview group chat
              </a>
          </div -->
          <!-- div>
            <a href="https://xmpp.org">
              <img id="logo-bottom" src="/img/logo-wordmark-vertical.svg" />
            </a>
          </div -->
          <!-- div id="note">
            The Universal Messaging Standard
          </div -->
        </div>
      </div>
      {% if message %}
        <div id="message">{{message}}</div>
      {% endif %}
    </div>
  </body>
</html>