{% extends "base.html" %}

{% block title %}About Try English AI - Our Story & Team{% endblock %}

{% block extra_css %}
<script src="https://cdn.tailwindcss.com"></script>
<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
    body { font-family: 'Inter', sans-serif; }
    .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .fade-in-up { animation: fadeInUp 0.6s ease-out; }
    .timeline-item::before {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 3px;
        height: 100%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        z-index: 1;
    }
    @media (max-width: 768px) {
        .timeline-item::before {
            left: 1rem;
        }
    }
</style>
{% endblock extra_css %}

{% block content %}
<!-- Hero Section -->
<div class="bg-gray-50">
    <!-- Header -->
    <div class="gradient-bg">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-24">
            <div class="text-center fade-in-up">
                <div class="flex justify-center mb-8">
                    <div class="w-20 h-20 sm:w-24 sm:h-24 bg-white rounded-3xl flex items-center justify-center shadow-2xl">
                        <img src="{{ url_for('static', filename='images/lgu.png') }}" alt="Try English AI" class="w-12 h-12 sm:w-16 sm:h-16 rounded-2xl">
                    </div>
                </div>
                <h1 class="text-4xl sm:text-5xl md:text-6xl font-bold text-white mb-6">
                    About Try English 
                </h1>
                <p class="text-xl sm:text-2xl text-white/90 max-w-3xl mx-auto leading-relaxed">
                    Revolutionizing English language learning through artificial intelligence, 
                    personalized instruction, and innovative educational technology.
                </p>
                <!-- Custom nav for about page -->
                <div class="flex justify-center gap-6 mt-8">
                    <a href="/" onclick="event.preventDefault(); window.location.href='/' + '#features';" class="btn btn-outline btn-sm text-white border-white hover:bg-white hover:text-primary">Features</a>
                    <a href="/" onclick="event.preventDefault(); window.location.href='/' + '#how-it-works';" class="btn btn-outline btn-sm text-white border-white hover:bg-white hover:text-primary">How It Works</a>
                </div>
            </div>
        </div>
    </div>

    <!-- Mission & Vision Section -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-24">
        <div class="grid md:grid-cols-2 gap-12 lg:gap-16">
            <div class="fade-in-up">
                <div class="bg-white rounded-2xl shadow-xl p-8 sm:p-10 h-full">
                    <div class="flex items-center mb-6">
                        <div class="w-12 h-12 bg-indigo-100 rounded-xl flex items-center justify-center mr-4">
                            <svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                            </svg>
                        </div>
                        <h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Our Mission</h2>
                    </div>
                    <p class="text-gray-600 text-lg leading-relaxed">
                        Our mission is to enhance the English language proficiency of students by focusing on reading, speaking, and writing skills. The platform is designed to support all learners, with special attention to students who face challenges in language learning, ensuring that they build confidence, fluency, and effective communication skills for academic and professional success.
                    </p>
                </div>
            </div>

            <div class="fade-in-up">
                <div class="bg-white rounded-2xl shadow-xl p-8 sm:p-10 h-full">
                    <div class="flex items-center mb-6">
                        <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mr-4">
                            <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                            </svg>
                        </div>
                        <h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Our Vision</h2>
                    </div>
                    <p class="text-gray-600 text-lg leading-relaxed">
                        To become the leading platform for English language learning, 
                        empowering millions of learners worldwide to achieve fluency and 
                        confidence in English. We envision a future where language barriers 
                        no longer limit opportunities for education, career growth, and global communication.
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- What Makes Us Different -->
    <div class="bg-white py-16 sm:py-24">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16 fade-in-up">
                <h2 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-6">
                    What Makes Try English AI Different
                </h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                    We combine cutting-edge AI technology with proven educational methodologies 
                    to create a learning experience that's both effective and engaging.
                </p>
            </div>

            <div class="grid md:grid-cols-3 gap-8 lg:gap-12">
                <div class="text-center fade-in-up">
                    <div class="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center mx-auto mb-6">
                        <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-4">AI-Powered Personalization</h3>
                    <p class="text-gray-600 leading-relaxed">
                        Our advanced AI algorithms analyze your learning patterns, strengths, 
                        and areas for improvement to create a truly personalized curriculum.
                    </p>
                </div>

                <div class="text-center fade-in-up">
                    <div class="w-16 h-16 bg-purple-100 rounded-2xl flex items-center justify-center mx-auto mb-6">
                        <svg class="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-4">Expert Academic Support</h3>
                    <p class="text-gray-600 leading-relaxed">
                        Learn from qualified English language instructors who provide guidance, 
                        feedback, and support throughout your learning journey.
                    </p>
                </div>

                <div class="text-center fade-in-up">
                    <div class="w-16 h-16 bg-green-100 rounded-2xl flex items-center justify-center mx-auto mb-6">
                        <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-4">Measurable Progress</h3>
                    <p class="text-gray-600 leading-relaxed">
                        Track your improvement with detailed analytics, progress reports, 
                        and achievement milestones that keep you motivated and on track.
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Team Section -->
    <div class="py-16 sm:py-24">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16 fade-in-up">
                <h2 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-6">
                    Meet Our Team
                </h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                    A dedicated group of educators, technologists, and innovators committed 
                    to transforming English language education.
                </p>
            </div>

            <!-- Academic Team -->
            <div class="mb-16">
                <h3 class="text-2xl sm:text-3xl font-bold text-gray-900 text-center mb-12 fade-in-up">
                    Academic Team
                </h3>
                {% if academic_team %}
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                    {% for member in academic_team %}
                    <div class="bg-white rounded-2xl shadow-xl p-6 text-center fade-in-up">
                        {% if member.profile_picture %}
                            <img src="{{ member.get_profile_picture_url() }}" alt="{{ member.name }}" class="w-24 h-24 rounded-full object-cover mx-auto mb-4 border-4 border-indigo-100">
                        {% else %}
                            <div class="w-24 h-24 bg-gradient-to-r {{ member.avatar_color }} rounded-full flex items-center justify-center mx-auto mb-4">
                                <span class="text-2xl font-bold text-white">{{ member.avatar_initials }}</span>
                            </div>
                        {% endif %}
                        <h4 class="text-xl font-bold text-gray-900 mb-2">{{ member.name }}</h4>
                        <p class="text-indigo-600 font-medium mb-3">{{ member.position }}</p>
                        <p class="text-gray-600 text-sm leading-relaxed">
                            {{ member.description }}
                        </p>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="bg-gray-50 rounded-2xl p-12 text-center">
                    <p class="text-gray-600 text-lg">No academic team members added yet.</p>
                </div>
                {% endif %}
            </div>

            <!-- Technical Team -->
            <div class="mb-16">
                <h3 class="text-2xl sm:text-3xl font-bold text-gray-900 text-center mb-12 fade-in-up">
                    Technical Team
                </h3>
                {% if technical_team %}
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                    {% for member in technical_team %}
                    <div class="bg-white rounded-2xl shadow-xl p-6 text-center fade-in-up">
                        {% if member.profile_picture %}
                            <img src="{{ member.get_profile_picture_url() }}" alt="{{ member.name }}" class="w-24 h-24 rounded-full object-cover mx-auto mb-4 border-4 border-indigo-100">
                        {% else %}
                            <div class="w-24 h-24 bg-gradient-to-r {{ member.avatar_color }} rounded-full flex items-center justify-center mx-auto mb-4">
                                <span class="text-2xl font-bold text-white">{{ member.avatar_initials }}</span>
                            </div>
                        {% endif %}
                        <h4 class="text-xl font-bold text-gray-900 mb-2">{{ member.name }}</h4>
                        <p class="text-indigo-600 font-medium mb-3">{{ member.position }}</p>
                        <p class="text-gray-600 text-sm leading-relaxed">
                            {{ member.description }}
                        </p>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="bg-gray-50 rounded-2xl p-12 text-center">
                    <p class="text-gray-600 text-lg">No technical team members added yet.</p>
                </div>
                {% endif %}
            </div>

            <!-- Administrative Team -->
            <div>
                <h3 class="text-2xl sm:text-3xl font-bold text-gray-900 text-center mb-12 fade-in-up">
                    Administrative Team
                </h3>
                {% if admin_team %}
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                    {% for member in admin_team %}
                    <div class="bg-white rounded-2xl shadow-xl p-6 text-center fade-in-up">
                        {% if member.profile_picture %}
                            <img src="{{ member.get_profile_picture_url() }}" alt="{{ member.name }}" class="w-24 h-24 rounded-full object-cover mx-auto mb-4 border-4 border-indigo-100">
                        {% else %}
                            <div class="w-24 h-24 bg-gradient-to-r {{ member.avatar_color }} rounded-full flex items-center justify-center mx-auto mb-4">
                                <span class="text-2xl font-bold text-white">{{ member.avatar_initials }}</span>
                            </div>
                        {% endif %}
                        <h4 class="text-xl font-bold text-gray-900 mb-2">{{ member.name }}</h4>
                        <p class="text-indigo-600 font-medium mb-3">{{ member.position }}</p>
                        <p class="text-gray-600 text-sm leading-relaxed">
                            {{ member.description }}
                        </p>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="bg-gray-50 rounded-2xl p-12 text-center">
                    <p class="text-gray-600 text-lg">No administrative team members added yet.</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Timeline Section -->
    <div class="bg-white dark:bg-slate-900 py-16 sm:py-24 transition-colors duration-300">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16 fade-in-up">
                <h2 class="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-6 transition-colors duration-300">
                    Our Journey
                </h2>
                <p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto transition-colors duration-300">
                    From concept to reality - the story of how Try English AI came to life.
                </p>
            </div>

            <div class="relative">
                <div class="timeline-item">
                    <div class="space-y-8 md:space-y-12">
                        <!-- 2023 -->
                        <div class="relative">
                            <div class="flex flex-col md:flex-row items-center">
                                <div class="w-full md:w-1/2 md:pr-8 mb-6 md:mb-0">
                                    <div class="bg-indigo-50 dark:bg-indigo-900/30 rounded-2xl p-6 md:p-8 fade-in-up border border-transparent dark:border-indigo-800 transition-colors duration-300">
                                        <div class="flex items-center mb-4">
                                            <div class="w-4 h-4 bg-indigo-600 dark:bg-indigo-400 rounded-full mr-3 transition-colors duration-300"></div>
                                            <span class="text-indigo-600 dark:text-indigo-400 font-bold text-lg transition-colors duration-300">2023 - Q1</span>
                                        </div>
                                        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3 transition-colors duration-300">The Vision</h3>
                                        <p class="text-gray-600 dark:text-gray-300 leading-relaxed transition-colors duration-300">
                                            Identified the need for personalized English learning solutions. 
                                            Initial research and concept development began with input from 
                                            English department faculty and students.
                                        </p>
                                    </div>
                                </div>
                                <div class="hidden md:block w-8 h-8 bg-indigo-600 dark:bg-indigo-400 rounded-full border-4 border-white dark:border-slate-900 shadow-lg z-10 transition-colors duration-300"></div>
                                <div class="w-full md:w-1/2 md:pl-8"></div>
                            </div>
                        </div>

                        <!-- 2023 Q2 -->
                        <div class="relative">
                            <div class="flex flex-col md:flex-row items-center">
                                <div class="w-full md:w-1/2 md:pr-8 md:order-2 mb-6 md:mb-0">
                                    <div class="bg-purple-50 dark:bg-purple-900/30 rounded-2xl p-6 md:p-8 fade-in-up border border-transparent dark:border-purple-800 transition-colors duration-300">
                                        <div class="flex items-center mb-4">
                                            <div class="w-4 h-4 bg-purple-600 dark:bg-purple-400 rounded-full mr-3 transition-colors duration-300"></div>
                                            <span class="text-purple-600 dark:text-purple-400 font-bold text-lg transition-colors duration-300">2023 - Q2</span>
                                        </div>
                                        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3 transition-colors duration-300">Team Formation</h3>
                                        <p class="text-gray-600 dark:text-gray-300 leading-relaxed transition-colors duration-300">
                                            Assembled a multidisciplinary team of educators, developers, 
                                            and AI specialists. Established project goals and began 
                                            technical architecture planning.
                                        </p>
                                    </div>
                                </div>
                                <div class="hidden md:block w-8 h-8 bg-purple-600 dark:bg-purple-400 rounded-full border-4 border-white dark:border-slate-900 shadow-lg z-10 transition-colors duration-300"></div>
                                <div class="w-full md:w-1/2 md:pl-8 md:order-1"></div>
                            </div>
                        </div>

                        <!-- 2023 Q3 -->
                        <div class="relative">
                            <div class="flex flex-col md:flex-row items-center">
                                <div class="w-full md:w-1/2 md:pr-8 mb-6 md:mb-0">
                                    <div class="bg-green-50 dark:bg-green-900/30 rounded-2xl p-6 md:p-8 fade-in-up border border-transparent dark:border-green-800 transition-colors duration-300">
                                        <div class="flex items-center mb-4">
                                            <div class="w-4 h-4 bg-green-600 dark:bg-green-400 rounded-full mr-3 transition-colors duration-300"></div>
                                            <span class="text-green-600 dark:text-green-400 font-bold text-lg transition-colors duration-300">2023 - Q3</span>
                                        </div>
                                        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3 transition-colors duration-300">Development Phase</h3>
                                        <p class="text-gray-600 dark:text-gray-300 leading-relaxed transition-colors duration-300">
                                            Core platform development began. Built foundational AI models, 
                                            user interface design, and basic learning modules. 
                                            First internal testing conducted.
                                        </p>
                                    </div>
                                </div>
                                <div class="hidden md:block w-8 h-8 bg-green-600 dark:bg-green-400 rounded-full border-4 border-white dark:border-slate-900 shadow-lg z-10 transition-colors duration-300"></div>
                                <div class="w-full md:w-1/2 md:pl-8"></div>
                            </div>
                        </div>

                        <!-- 2024 Q1 -->
                        <div class="relative">
                            <div class="flex flex-col md:flex-row items-center">
                                <div class="w-full md:w-1/2 md:pr-8 md:order-2 mb-6 md:mb-0">
                                    <div class="bg-blue-50 dark:bg-blue-900/30 rounded-2xl p-6 md:p-8 fade-in-up border border-transparent dark:border-blue-800 transition-colors duration-300">
                                        <div class="flex items-center mb-4">
                                            <div class="w-4 h-4 bg-blue-600 dark:bg-blue-400 rounded-full mr-3 transition-colors duration-300"></div>
                                            <span class="text-blue-600 dark:text-blue-400 font-bold text-lg transition-colors duration-300">2024 - Q1</span>
                                        </div>
                                        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3 transition-colors duration-300">Beta Testing</h3>
                                        <p class="text-gray-600 dark:text-gray-300 leading-relaxed transition-colors duration-300">
                                            Launched closed beta with select English department students. 
                                            Gathered feedback, refined AI algorithms, and improved 
                                            user experience based on real usage data.
                                        </p>
                                    </div>
                                </div>
                                <div class="hidden md:block w-8 h-8 bg-blue-600 dark:bg-blue-400 rounded-full border-4 border-white dark:border-slate-900 shadow-lg z-10 transition-colors duration-300"></div>
                                <div class="w-full md:w-1/2 md:pl-8 md:order-1"></div>
                            </div>
                        </div>

                        <!-- 2024 Q3 -->
                        <div class="relative">
                            <div class="flex flex-col md:flex-row items-center">
                                <div class="w-full md:w-1/2 md:pr-8 mb-6 md:mb-0">
                                    <div class="bg-orange-50 dark:bg-orange-900/30 rounded-2xl p-6 md:p-8 fade-in-up border border-transparent dark:border-orange-800 transition-colors duration-300">
                                        <div class="flex items-center mb-4">
                                            <div class="w-4 h-4 bg-orange-600 dark:bg-orange-400 rounded-full mr-3 transition-colors duration-300"></div>
                                            <span class="text-orange-600 dark:text-orange-400 font-bold text-lg transition-colors duration-300">2024 - Q3</span>
                                        </div>
                                        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3 transition-colors duration-300">Official Launch</h3>
                                        <p class="text-gray-600 dark:text-gray-300 leading-relaxed transition-colors duration-300">
                                            Try English AI officially launched for English department students. 
                                            Integrated with institutional systems and began serving 
                                            learners with personalized English instruction.
                                        </p>
                                    </div>
                                </div>
                                <div class="hidden md:block w-8 h-8 bg-orange-600 dark:bg-orange-400 rounded-full border-4 border-white dark:border-slate-900 shadow-lg z-10 transition-colors duration-300"></div>
                                <div class="w-full md:w-1/2 md:pl-8"></div>
                            </div>
                        </div>

                        <!-- 2025 - Present -->
                        <div class="relative">
                            <div class="flex flex-col md:flex-row items-center">
                                <div class="w-full md:w-1/2 md:pr-8 md:order-2 mb-6 md:mb-0">
                                    <div class="bg-gradient-to-r from-indigo-50 to-purple-50 dark:from-indigo-900/30 dark:to-purple-900/30 rounded-2xl p-6 md:p-8 fade-in-up border-2 border-indigo-200 dark:border-indigo-800 transition-colors duration-300">
                                        <div class="flex items-center mb-4">
                                            <div class="w-4 h-4 bg-gradient-to-r from-indigo-600 to-purple-600 dark:from-indigo-400 dark:to-purple-400 rounded-full mr-3 transition-colors duration-300"></div>
                                            <span class="text-indigo-600 dark:text-indigo-400 font-bold text-lg transition-colors duration-300">2025 - Present</span>
                                        </div>
                                        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3 transition-colors duration-300">Continuous Innovation</h3>
                                        <p class="text-gray-600 dark:text-gray-300 leading-relaxed transition-colors duration-300">
                                            Ongoing development with advanced AI features, expanded content library, 
                                            and enhanced personalization. Planning for wider institutional 
                                            adoption and international expansion.
                                        </p>
                                    </div>
                                </div>
                                <div class="hidden md:block w-8 h-8 bg-gradient-to-r from-indigo-600 to-purple-600 dark:from-indigo-400 dark:to-purple-400 rounded-full border-4 border-white dark:border-slate-900 shadow-lg z-10 transition-colors duration-300"></div>
                                <div class="w-full md:w-1/2 md:pl-8 md:order-1"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Call to Action -->
    <div class="gradient-bg">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-24">
            <div class="text-center fade-in-up">
                <h2 class="text-3xl sm:text-4xl font-bold text-white mb-6">
                    Ready to Start Your Journey?
                </h2>
                <p class="text-xl text-white/90 mb-8 max-w-2xl mx-auto">
                    Join thousands of learners who are already improving their English skills 
                    with Try English AI's personalized learning approach.
                </p>
                <div class="flex flex-col sm:flex-row gap-4 justify-center">
                    <a href="{{ url_for('auth.signup') }}" class="bg-white text-indigo-600 px-8 py-4 rounded-xl font-semibold hover:bg-gray-100 transition-colors text-lg shadow-lg">
                        Get Started Today
                    </a>
                    <a href="{{ url_for('main.index') }}" class="bg-transparent text-white border-2 border-white px-8 py-4 rounded-xl font-semibold hover:bg-white hover:text-indigo-600 transition-colors text-lg">
                        Learn More
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}