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

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

{% 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 type="matrix" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0"></feColorMatrix>
            <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>
{% include 'partials/messages.html' %}
<div class="pf-c-login">
    <div class="pf-c-login__container">
        <header class="pf-c-login__header">
            <img class="pf-c-brand" src="{% static 'passbook/logo.svg' %}" style="height: 60px;"
                alt="passbook icon" />
            <img class="pf-c-brand" src="{% static 'passbook/brand.svg' %}" style="height: 60px;"
                alt="passbook branding" />
        </header>
        <main class="pf-c-login__main">
            <header class="pf-c-login__main-header">
                <h1 class="pf-c-title pf-m-3xl">
                    {% block card_title %}
                    {% trans title %}
                    {% endblock %}
                </h1>
            </header>
            <div class="pf-c-login__main-body">
                {% block card %}
                <form method="POST" class="pf-c-form">
                    {% include 'partials/form.html' %}
                    <div class="pf-c-form__group pf-m-action">
                        <button class="pf-c-button pf-m-primary pf-m-block" type="submit">Log in</button>
                    </div>
                </form>
                {% endblock %}
            </div>
            <footer class="pf-c-login__main-footer">
                {% if config.login.subtext %}
                <p>{{ config.login.subtext }}</p>
                {% endif %}
                <ul class="pf-c-login__main-footer-links">
                    {% for source in sources %}
                    <li class="pf-c-login__main-footer-links-item">
                        <a href="{{ source.url }}" class="pf-c-login__main-footer-links-item-link">
                            {% if source.icon_path %}
                            <img src="{% static source.icon_path %}" alt="{{ source.name }}">
                            {% elif source.icon_url %}
                            <img src="icon_url" alt="{{ source.name }}">
                            {% else %}
                            <i class="pf-icon pf-icon-arrow" title="{{ source.name }}"></i>
                            {% endif %}
                        </a>
                    </li>
                    {% endfor %}
                </ul>
                {% if enroll_url or recovery_url %}
                <div class="pf-c-login__main-footer-band">
                    {% if enroll_url %}
                    <p class="pf-c-login__main-footer-band-item">
                        {% trans 'Need an account?' %}
                        <a href="{{ enroll_url }}">{% trans 'Sign up.' %}</a>
                    </p>
                    {% endif %}
                    {% if recovery_url %}
                    <p class="pf-c-login__main-footer-band-item">
                        <a href="{{ recovery_url }}">
                            {% trans 'Forgot username or password?' %}
                        </a>
                    </p>
                    {% endif %}
                </div>
                {% endif %}
            </footer>
        </main>
        <footer class="pf-c-login__footer">
            <p></p>
            <ul class="pf-c-list pf-m-inline">
                <li>
                    <a href="https://beryju.github.io/passbook/">{% trans 'Documentation' %}</a>
                </li>
                <!-- todo: load config.passbook.footer.links -->
            </ul>
        </footer>
    </div>
</div>
{% endblock %}