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

{% comment %}
Glass Harmony Footer Layout
Uses glassmorphic design with translucent containers
{% endcomment %}

<div class="glass-footer-wrapper">
    {# Main footer content - centered elegant layout #}
    <div class="footer-main py-4">
        <div class="row g-4 align-items-start justify-content-center text-center text-md-start">
            {# Logo and copyright - centered #}
            <div class="col-md-12 col-lg-4 text-center">
                {% include 'ndr_core/base/footer_components/footer_logo.html' %}
                <div class="mt-3">
                    {% include 'ndr_core/base/footer_components/footer_copyright.html' %}
                </div>
            </div>

            {# Navigation and socials - side by side on larger screens #}
            <div class="col-md-6 col-lg-4">
                {% config_value 'footer_show_main_navigation' as show_navigation %}
                {% if show_navigation %}
                    <h6 class="footer-heading mb-3 text-center text-md-start">{% trans "Quick Links" %}</h6>
                    <div class="d-flex justify-content-center justify-content-md-start">
                        {% include 'ndr_core/base/footer_components/footer_navigation.html' %}
                    </div>
                {% endif %}
            </div>

            <div class="col-md-6 col-lg-4 text-center text-md-start">
                {% include 'ndr_core/base/footer_components/footer_socials.html' %}
            </div>
        </div>
    </div>

    {# Partner institutions section #}
    {% config_value 'footer_show_partners' as show_partners %}
    {% if show_partners %}
    <div class="footer-partners-section py-4 mt-4" style="border-top: 1px solid rgba(255, 255, 255, 0.2);">
        <h6 class="footer-heading text-center mb-4">{% trans "Our Partners" %}</h6>
        {% include 'ndr_core/base/footer_components/footer_partners.html' %}
    </div>
    {% endif %}
</div>

<style>
/* Glass footer specific styles */
.glass-footer-wrapper .footer-heading {
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--title-color);
}

.glass-footer-wrapper .footer-logo img {
    max-height: 50px;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.glass-footer-wrapper .footer-logo img:hover {
    opacity: 1;
}

.glass-footer-wrapper .footer-navigation .navbar-nav {
    flex-direction: column;
    padding: 0;
    margin: 0;
}

.glass-footer-wrapper .footer-navigation .nav-item {
    margin-bottom: 0.5rem;
}

.glass-footer-wrapper .footer-navigation .footer-link {
    color: var(--footer-link-color) !important;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    text-decoration: none;
}

.glass-footer-wrapper .footer-navigation .footer-link:hover {
    color: var(--footer-link-hover-color) !important;
    padding-left: 0.5rem;
}

.glass-footer-wrapper .footer-socials .social-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--title-color);
    margin-bottom: 1rem;
}

.glass-footer-wrapper .footer-socials .social-icons {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    justify-content: flex-start;
}

@media (max-width: 768px) {
    .glass-footer-wrapper .footer-socials .social-icons {
        justify-content: center;
    }
}

.glass-footer-wrapper .footer-socials .social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    color: var(--text-color);
    transition: all 0.3s ease;
    text-decoration: none;
}

[data-theme="dark"] .glass-footer-wrapper .footer-socials .social-link {
    background: rgba(255, 255, 255, 0.1);
}

.glass-footer-wrapper .footer-socials .social-link:hover {
    background: var(--accent-color-1);
    color: var(--button-text-color);
    transform: translateY(-3px);
}

.glass-footer-wrapper .footer-copyright {
    color: var(--footer-link-color);
    font-size: 0.875rem;
}

.glass-footer-wrapper .footer-partners img {
    filter: grayscale(50%) opacity(0.7);
    transition: all 0.3s ease;
}

.glass-footer-wrapper .footer-partners a:hover img {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.05);
}
</style>