{% extends 'body.html' %}

{% load flatpages %}

{% block footer %}
    <footer>
        <ul class="icon-list">
            <li>
                <a href="{% url 'facebook' %}"><i class="fa-brands fa-facebook"></i></a>
            </li>
            <li>
                <a href="{% url 'instagram' %}"><i class="fa-brands fa-instagram"></i></a>
            </li>
            <li>
                <a href="{% url 'discord' %}"><i class="fa-brands fa-discord"></i></a>
            </li>
            <li>
                <a href="{% url 'telegram' %}"><i class="fa-brands fa-telegram"></i></a>
            </li>
            <li>
                <a href="mailto:service@fet.at"><i class="fa-solid fa-envelope"></i></a>
            </li>
        </ul>
        {% get_flatpages '/impressum/' as pages %}
        {% if pages %}
            <div class="legal">
                <a href="{{ pages.first.url }}" class="text-center text-sm sm:text-base">{{ pages.first.title }}</a>
            </div>
        {% endif %}            
        <hr class="legal-divider">
        <p class="copyright">© {% now 'Y' %} FET - Alle Rechte vorbehalten.</p>
    </footer>
    <div class="super-duper-awesome-signature" x-data="{ counter: 0 }">
        <span :class="counter>=4 && 'text-purple-300'">Handcrafted </span>
        <span :class="counter>=5 && 'text-green-400'">with </span>
        <i class="fa-solid fa-heart" aria-label="love" @click="counter++" :class="counter>=2 ? 'text-proprietary hover:text-proprietary-dark' : 'text-red-600 hover:text-red-700'"></i>
        <span :class="counter>=6 && 'text-pink-400'"> by</span>
        <span class="font-normal" :class="counter>=3 && 'text-yellow-500'"> FET</span>
    </div>
{% endblock %}