<!-- map.html -->
{% extends 'base.html' %}
{% load static %}

{% block content %}
<div class="container-fluid py-5">
    <div class="container">
        <h1 class="text-center mb-5">Our Location</h1>
        <div class="row">
            <div class="col-12">
                <div class="map-container" style="border-radius: 10px; overflow: hidden; height: 500px;">
                    <iframe 
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d126845.915830722!2d4.48544705!3d7.4802774999999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x10383f5f2f6f2b0f%3A0x7e7d1a0b0b0b0b0!2sIle-Ife%2C%20Osun%2C%20Nigeria!5e0!3m2!1sen!2s!4v1690000000000!5m2!1sen!2s" 
                        width="100%" 
                        height="100%" 
                        style="border:0;" 
                        allowfullscreen="" 
                        loading="lazy" 
                        referrerpolicy="no-referrer-when-downgrade">
                    </iframe>
                </div>
                <div class="text-center mt-4">
                    <a href="{% url 'contact' %}" class="btn btn-primary">Get Directions</a>
                    <a href="{% url 'home' %}" class="btn btn-outline-secondary ms-2">Back to Home</a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}