{% extends 'base/skeleton.html' %}

{% load static %}
{% load i18n %}

{% block head_before %}
<link rel="stylesheet" type="text/css" href="{% static 'dist/patternfly.min.css' %}?v={{ ak_version }}">
{% endblock %}

{% block head %}
<style>
.pf-c-background-image::before {
    background-image: url("/static/dist/assets/images/flow_background.jpg");
}
</style>
{% endblock %}

{% block body %}
<div class="pf-c-background-image">
    <svg xmlns="http://www.w3.org/2000/svg" class="pf-c-background-image__filter" width="0" height="0">
        <filter id="image_overlay">
            <feColorMatrix in="SourceGraphic" type="matrix" values="1.3 0 0 0 0 0 1.3 0 0 0 0 0 1.3 0 0 0 0 0 1 0" />
            <feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
                <feFuncR type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncR>
                <feFuncG type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncG>
                <feFuncB type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncB>
                <feFuncA type="table" tableValues="0 1"></feFuncA>
            </feComponentTransfer>
        </filter>
    </svg>
</div>
<ak-message-container></ak-message-container>
<div class="pf-c-login">
    <div class="ak-login-container">
        <header class="pf-c-login__header">
            <div class="pf-c-brand ak-brand">
                <img src="{{ tenant.branding_logo }}" alt="authentik icon" />
            </div>
        </header>
        {% block main_container %}
        <main class="pf-c-login__main">
            <header class="pf-c-login__main-header">
                <h1 class="pf-c-title pf-m-3xl">
                    {% block card_title %}
                    {% endblock %}
                </h1>
            </header>
            <div class="pf-c-login__main-body">
                {% block card %}
                {% endblock %}
            </div>
        </main>
        {% endblock %}
        <footer class="pf-c-login__footer">
            <p></p>
            <ul class="pf-c-list pf-m-inline">
                {% for link in footer_links %}
                <li>
                    <a href="{{ link.href }}">{{ link.name }}</a>
                </li>
                {% endfor %}
                {% if tenant.branding_title != "authentik" %}
                <li>
                    <a href="https://goauthentik.io">
                        {% trans 'Powered by authentik' %}
                    </a>
                </li>
                {% endif %}
            </ul>
        </footer>
    </div>
</div>
{% endblock %}
