{% extends "base_bs.html" %}

{% block meta %}
    <meta name="keywords" content="{{_('meta_keywords_contact')}}">
    <meta name="description" content="{{_('meta_description_contact')}}">
{% endblock %}

{% block title %}
    {{ _('Contact Us - Padsystem') }}
{% endblock %}

{% block style %}
    <style>
        .blueviolet {
            color: #5C1E7C !important;
        }

        .bg-blueviolet {
            background-color: #5C1E7C !important;
        }

        .bg-fandango {
            background-color: #A52F8C !important;
        }

        .fandango {
            color: #A52F8C !important;
        }

        .py-45 {
            padding-top: 2rem !important;
            padding-bottom: 2rem !important;
        }

        .mt-15 {
            margin-top: 1rem !important;
        }

        .icon {
            display: flex;
            align-items: center;
            width: fit-content;
            height: 4.5em;
        }

        .icon img {
            width: 1.5em;
            height: 1.5em;
        }
    </style>
{% endblock %}

{% block header %}
{% endblock %}

{% block contents %}
    <div class="px-5 py-5">
        <h1 class="font-weight-bold mb-5 blueviolet text-center">Contact us</h1>
        <div class="row featurette">
            <div class="col-md-12">
                <iframe class="rounded w-100"
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6466.196410405065!2d114.13619460318225!3d22.36916271128316!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3403f905e81ecf45%3A0xecf140580cbe6c33!2sPAD%20System!5e0!3m2!1szh-TW!2shk!4v1704706810140!5m2!1szh-TW!2shk"
                    width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>

            <div class="col-md-12 mt-5">
                <div class="row mb-5 ">
                    <div class="col-md-4 mb-4 col-12 text-center order-last order-md-first">
                        <div class="icon p-4 text-white bg-blueviolet rounded-circle mx-auto">
                            <img src="icons/icon-location.svg" />
                        </div>
                        <p class="mt-md-4 mt-15 fw-semibold blueviolet">
                            {% trans %}
                                Flat A, 2/F Cheung Wing Industrial Building, 
                                <br/>
                                109-115 Wo Yi Hop Road, Kwai Chung, 
                                <br/>
                                New Territories, Hong Kong
                            {% endtrans %}
                        </p>
                    </div>
                    <div class="col-md-4 mb-4 col-12 text-center">
                        <div class="icon p-4 text-white bg-fandango rounded-circle mx-auto">
                            <img src="icons/icon-phone.svg" />
                        </div>
                        <p class="mt-15 fandango fw-semibold">
                            (852) 2239 5995
                        </p>
                    </div>
                    <div class="col-md-4 mb-4 col-12 text-center order-first order-md-last">
                        <div class="icon p-4 text-white bg-blueviolet rounded-circle mx-auto">
                            <img src="icons/icon-envelope.svg" />
                        </div>
                        <a class="d-block mt-15 fw-semibold blueviolet" href="mailto:sales@padsystem.com">
                            sales@padsystem.com
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script>
        function myMap() {
            var mapProp = {
                center: new google.maps.LatLng(51.508742, -0.120850),
                zoom: 5,
            };
            var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
        }
    </script>

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
{% endblock %}