<!DOCTYPE html>
<html lang="en_US">
    <head>
        <meta charset="utf8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>

        <link rel="stylesheet" href="https://unpkg.com/reset-css@5.0.1/reset.css" />
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;600;900&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="/paint.css" />
        <link rel="stylesheet" href="/form.css" />
        <link rel="stylesheet" href="/js-only.css" />
        <script src="/delay.js"></script>
        <title>{{ conf.brand.instance_name }}</title>

        <style> .footer svg { height: 32px; margin: 10px 0 } </style>
        <style>
        .header .header-text, .header .header-home, .header .header-bg { transition: 250ms ease; }
        @media (max-width:667px) {

            .header .header-text { text-align: center }
            .header .header-home { width: 100% }
            .header .header-bg   { left: 50% !important; transform: translateX(-50%); -webkit-mask-image: linear-gradient(90deg, #0000, #000, #0000); }

            {%- if conf.brand.instance_motto.len() != 0 -%}
                .header .header-home-motto {
                    display:none
                }
            {%- endif -%}

        }
        </style>

        {%- if cfg!(debug_assertions) -%}
            <link rel="stylesheet" href="/alert.css" />
        {%- endif -%}

        {%- include "seotags.html" %}
        {% block head %}{% endblock -%}
    </head>

    <body>
        <div class="header">
            <img class="header-bg" src="/bfile-header.webp" width="400px" height="60px">
            <div class='header-text'>
                <a class="header-home" href="/">
                    {{- conf.brand.instance_name -}}
                    {%- if conf.brand.instance_motto.len() != 0 -%}
                        {#- Whitespace control is stupid -#}
                        <span class="header-home-motto">{{- " - " -}}{{- conf.brand.instance_motto -}}</span>
                    {%- endif -%}
                </a>
            </div>
        </div>
        <div class='content-box'>
            <div class="content">
                {%- if cfg!(debug_assertions) -%}
                    <div class="alert danger" style="margin:var(--margin-y) auto;width:fit-content;margin-bottom:calc(var(--margin-y) * 3)">
                        <h1 class="alert-title">
                            Website running in debug mode
                        </h1>
                        <div class="alert-text">
                            <p>
                                Website is running in development mode that is supposed <br/>
                                to be used only for local development purposes.
                            </p>
                            <p>
                                If you see this in a public instance, <br/>
                                Please inform the maintainers of the instance of the issue.
                            </p>
                        </div>
                    </div>
                {%- endif -%}
                {%- block body %}{% endblock -%}
            </div>
            <div class="footer">

                <table>
                    <tbody>
                        <tr>
                            <td>
                                <small>Made with Rust and &lt;3</small>
                                
                                <small style="display:block">
                                    Version
                                    <a href="https://git.blek.codes/blek/bfile/commit/{{ env.version.commit }}" target="_blank">
                                        {{ env!("CARGO_PKG_VERSION") }} ({{ env.version.branch -}}/{{- env.version.short_commit }})
                                    </a>
                                </small>
                    
                                <ul style='margin:10px 0'>
                                    <li>
                                        <a href="https://git.blek.codes/blek/bfile">
                                            Source code
                                        </a>
                                    </li>
                                    <li>
                                        <a href="/license">
                                            Released under GPLv3
                                        </a>
                                    </li>
                                    <li>
                                        <a href="/authors">
                                            Made by blek! and contributors
                                        </a>
                                    </li>
                                </ul>
                            </td>
                            <td style="text-align:right;vertical-align:bottom">
                                <a href="https://blek.codes">
                                    {%- include "blek.svg" -%}
                                </a>
                            </td>
                        </tr>
                    </tbody>
                </table>

            </div>
        </div>

        <script src="/js-only.js"></script>
        {%- block scripts %}{% endblock -%}
    </body>
</html>