<?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>Operating Systems | {{brand_name}}</title>
    <meta name="description" content="Operating System Selection" />
    <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="Operating System Selection" />
    <meta property="og:image" content="/img/logo-wordmark-horizontal.svg" />
    <meta property="og:site_name" content="Operating System Selection" />
    <meta property="og:title" content="Operating System Selection" />
    <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="{{brand_site}}">
          <img id="logo" src="/img/logo-wordmark-horizontal.svg" />
        </a>
        <a id="download" href="/download">
          Download
        </a>
      </div>
      <div id="container-of-profile">
        <div id="profile">
          <h1>Choose Your System</h1>
          <div class="plain-note">
            And find the XMPP clients that are best for you.
          </div>
          <div id="software">
            {% for system in software %}
                <a class="system" href="/download/{{system['id']}}">
                  <img src="/img/{{system['id']}}.svg" />
                  <div>{{system['name']}}</div>
                </a>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
  </body>
</html>