<?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>{{brand_name}}: {{action}} {% if alias %}{{alias}}{% else %}{{title}}{% endif %}</title>
    <meta name="description" content="{{action}} {% if alias %}{{alias}}{% else %}{{title}}{% endif %}" />
    <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}} {% if alias %}{{alias}}{% else %}{{title}}{% endif %}" />
    <meta property="og:image" content="/photo/{{filename}}" />
    <meta property="og:site_name" content="{{brand_name}}" />
    <meta property="og:title" content="{% if alias %}{{alias}}{% else %}{{title}}{% endif %}" />
    <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" />
    {% if selection %}
      <style>
        body {
          /* background-repeat: no-repeat; */
          background:
            url(/img/background.svg),
            linear-gradient(
              to right,
              rgba({{selection[0][2]}}, {{selection[0][1]}}, {{selection[0][0]}}, 0.7),
              rgba({{selection[1][2]}}, {{selection[1][1]}}, {{selection[1][0]}}, 0.7)
            );
        }
        @media (prefers-color-scheme: dark) {
          body {
            background:
              url(/img/background.svg),
              linear-gradient(
                to right,
                rgba({{selection[0][2]-50}}, {{selection[0][1]-50}}, {{selection[0][0]-50}}, 0.7),
                rgba({{selection[1][2]-50}}, {{selection[1][1]-50}}, {{selection[1][0]-50}}, 0.7)
              );
          }
        }
        @media (max-width: 725px) and (prefers-color-scheme: dark) {
          body {
            background: #2b2a33;
          }
        }
        @media (max-width: 725px) {
          body {
            background: #f5f5f5;
          }
        }
      </style>
    {% endif %}
  </head>
  <body>
    <div id="overlay">
      <div id="bar">
        <a href="{{brand_site}}">
          <img id="logo" src="/img/logo-wordmark-horizontal.svg" />
        </a>
        <a id="download" href="/download">
          Download
        </a>
      </div>
      <div id="container">
        <div id="profile">
          <h1>
            {% if 'fn' in vcard_info and vcard_info['fn'] %}
              {{vcard_info['fn']}}
            {% elif title %}
              {{title}}
            {% else %}
              {{jid_bare}}
            {% endif %}
          </h1>
          {% if filename %}
            <div id="graphics">
              <!-- a href="xmpp:{{jid_bare}}" -->
                <img id="photo" src="/photo/{{filename}}" />
                <img id="qrcode" src="/qr/{{jid_bare}}.png" />
              <!-- /a -->
            </div>
          {% endif %}
          <div id="vcard-note">
            {% if note %}{{note}}{% endif %}
          </div>
          <!-- div>
            <pre id="xmpp-uri">{{xmpp_uri}}</pre>
          </div -->
          {% if exception %}
            <div>
              <code>{{exception}}</code>
            </div>
          {% endif %}
          {% if links %}
            <div id="action">
              {% for link in links %}
                <a href="{{link['href']}}" id="{{link['iden']}}">
                  {{link['name']}}
                </a>
              {% endfor %}
            </div>
          {% endif %}
          <div id="vcard">
            {% if 'org' in vcard_info and vcard_info['org'] %}
              <h2>{{vcard_info['org']}}</h2>
            {% endif %}
            {% if 'note' in vcard_info and vcard_info['note'] %}
              <div id="vcard-note-full">{{vcard_info['note']}}</div>
            {% endif %}
            <div id="vcard-links">
              {% if 'email' in vcard_info and vcard_info['email'] %}
                <a class="vcard-link" href="mailto:{{vcard_info['email']}}">✉️</a>
              {% endif %}
              {% if 'impp' in vcard_info and vcard_info['impp'] %}
                <a class="vcard-link" href="{{vcard_info['impp']}}">💬️</a>
              {% endif %}
              <a class="vcard-link" href="xmpp:{{xmpp_uri}}">💡️</a>
              {% if 'url' in vcard_info and vcard_info['url'] %}
                <a class="vcard-link" href="{{vcard_info['url']}}">🔗️</a>
              {% endif %}
            </div>
            <div id="vcard-links-extra">
              {% for category in vcard_info['extras'] %}
                <h3>{{category.title()}}</h3>
                {% for i in vcard_info['extras'][category] %}
                  <a href="{{i['uri']}}">{{i['label']}}</a>
                {% endfor %}
              {% endfor %}
            </div>
          </div>
          {% if previous %}
            <div id="number-of-pages">
              <a href="./">Previous</a>
            </div>
          {% endif %}
        </div>
        <div id="notice">
          If you already have <strong>{% if news_client and jid_kind == 'pubsub' %}{{news_client}}{% elif chat_client %}{{chat_client}}{% else %}an XMPP Client{% endif %}</strong> you can
          <br/>
          {% if jid_kind in ('conference', 'mix', 'muc') %}
            join to
          {% elif jid_kind == 'pubsub' %}
            subscribe to
          {% elif jid_kind == 'bot' %}
            try
          {% elif jid_kind == 'server' %}
            explore
          {% else %}
            talk with
          {% endif %}
          <strong>{{title}}</strong>
          right now.
        </div>
      </div>
      {% if message %}
        <div id="xmpp-message">{{message}}</div>
      {% endif %}
    </div>
  </body>
</html>