<!DOCTYPE html5>
<html>
<head>
    <title>Etiquette</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" href="/static/css/common.css">
    <link rel="stylesheet" href="/static/css/etiquette.css">
    {% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
    <script src="/static/js/common.js"></script>
    <script src="/static/js/api.js"></script>

<style>
body
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin: 0;
}
body > #motd,
body > div,
body > .nice_link
{
    width: 90%;
    max-width: 600px;
}
body > div
{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    grid-gap: 8px;
}
.nice_link, .plain_link
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 8px 0;
}
.nice_link
{
    height: 40px;
    background-color: var(--color_transparency);
}
.nice_link:hover
{
    background-color: var(--color_secondary);
}
#motd
{
    text-align: center;
}
</style>
</head>

<body>
    <p id="motd">
        {%- if motd is string -%}
        {{motd}}
        {%- elif motd[0] == "html" -%}
        {{motd[1]|safe}}
        {%- else -%}
        {{motd[1]}}
        {%- endif -%}
    </p>
    <a class="nice_link" href="/search">Search</a>
    <a class="nice_link" href="/tags">Browse tags</a>
    <a class="nice_link" href="/albums">Browse albums</a>
    <a class="nice_link" href="/bookmarks">Bookmarks</a>
    {% if session.user %}
    <a class="nice_link" href="/user/{{session.user.username}}">{{session.user.display_name}}</a>
    {% else %}
    <a class="nice_link" href="/login">Log in</a>
    {% endif %}
    <div>
        <a class="nice_link" href="/?theme=turquoise">Turquoise</a>
        <a class="nice_link" href="/?theme=slate">Slate</a>
        <a class="nice_link" href="/?theme=pearl">Pearl</a>
    </div>
    <a class="plain_link" href="http://www.github.com/voussoir/etiquette">GitHub</a>
</body>

<script type="text/javascript">
</script>
</html>