{% extends "_layouts/base.html" %}
{% load static %}

{% block title %}Контакты{% endblock %}

{% block add_css %}
    <link rel="stylesheet" href="{% static 'css/contacts.css' %}">
    <link
        rel="stylesheet"
        href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
        integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
        crossorigin=""
    >
{% endblock %}

{% block content %}
    {% include "_fragments/header.html" with active="contacts" breadcrumb=1 %}

    <main class="container contacts-page">
        {% include '_fragments/breadcrumbs.html' with url_1='/' text_1='Главная' url_2='/contacts/' text_2='Контакты' %}

        <section class="contacts-page__hero">
            <h1>КОНТАКТЫ</h1>

            <div class="contacts-grid">
                <div class="contacts-column">
                    <section class="contacts-card">
                        <h2>Адрес:</h2>
                        <p>{{ contact_address }}</p>
                    </section>

                    <section class="contacts-card">
                        <h2>Режим работы:</h2>
                        <p>{{ contact_hours_weekdays }}</p>
                        <p>{{ contact_hours_weekends }}</p>
                    </section>
                </div>

                <div class="contacts-column">
                    <section class="contacts-card">
                        <h2>Телефон:</h2>
                        <p><a href="tel:{{ contact_phone_primary_url }}">{{ contact_phone_primary }}</a></p>
                        <p><a href="tel:{{ contact_phone_secondary_url }}">{{ contact_phone_secondary }}</a></p>
                    </section>

                    <section class="contacts-card">
                        <h2>E-mail</h2>
                        <p><a href="mailto:{{ contact_email }}">{{ contact_email }}</a></p>
                    </section>
                </div>
            </div>
        </section>

        <section class="contacts-map-section" aria-labelledby="contacts-map-title">
            <h2 class="contacts-map-section__title" id="contacts-map-title">Как нас найти</h2>

            <div
                id="contacts-map"
                class="contacts-map"
                data-lat="{{ map_lat }}"
                data-lon="{{ map_lon }}"
                data-zoom="{{ map_zoom }}"
                data-title="SantehRay"
            ></div>

            <noscript>
                <div class="contacts-map contacts-map--fallback contacts-map--noscript">
                    <div class="contacts-map-fallback">
                        <h3>Для интерактивной карты нужен JavaScript.</h3>
                        <a href="{{ map_external_url }}" target="_blank" rel="noreferrer">Открыть адрес в OpenStreetMap</a>
                    </div>
                </div>
            </noscript>
        </section>
    </main>

    {% include "_fragments/footer.html" %}
{% endblock %}

{% block add_js %}
    <script
        src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
        crossorigin=""
    ></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const mapRoot = document.getElementById('contacts-map')
            if (!mapRoot || typeof L === 'undefined') {
                return
            }

            const lat = Number(mapRoot.dataset.lat)
            const lon = Number(mapRoot.dataset.lon)
            const zoom = Number(mapRoot.dataset.zoom)
            const title = mapRoot.dataset.title || 'SantehRay'

            const map = L.map(mapRoot, {
                scrollWheelZoom: true,
            }).setView([lat, lon], zoom)

            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19,
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
            }).addTo(map)

            L.marker([lat, lon]).addTo(map).bindPopup(title).openPopup()
        })
    </script>
{% endblock %}