{{# Contacts Page Template #}}
{{ layout = 'layouts/default' }}

{{ if cover_video or cover_image }}
<section class="page-cover-section">
    {{ partial:partials/cover-media }}
</section>
{{ else }}
<section class="page-cover-map">
    <!-- Prezantimi i hartës në gjerësi të plotë -->
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193595.15830869428!2d-74.119763973046!3d40.69766374874431!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2s!4v1680000000000!5m2!1sen!2s" width="100%" height="450" style="border:0; margin-bottom: -10px; display: block;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</section>
{{ /if }}

<section class="contacts-section py-5">
    <div class="container">
        <div class="row mb-5">
            <div class="col-lg-12 text-center">
                <h1 class="page-title mb-4 text-uppercase d-none">Kontaktet</h1>
                {{ if content }}
                <div class="contacts-content prose-content lead">
                    {{ content }}
                </div>
                {{ /if }}
            </div>
        </div>

        <div class="row">
            <!-- Contact Info Display -->
            <div class="col-lg-4 mb-5 mb-lg-0">
                <h3 class="section-label text-uppercase mb-4">Na Kontaktoni</h3>

                {{ if settings:address }}
                <div class="contact-info-block mb-4">
                    <h5 class="text-uppercase mb-2">Adresa</h5>
                    <div class="text-muted">{{ settings:address | nl2br }}</div>
                </div>
                {{ /if }}

                {{ if settings:phone }}
                <div class="contact-info-block mb-4">
                    <h5 class="text-uppercase mb-2">Telefoni</h5>
                    <div class="text-muted">{{ settings:phone | nl2br }}</div>
                </div>
                {{ /if }}

                {{ if settings:email }}
                <div class="contact-info-block mb-4">
                    <h5 class="text-uppercase mb-2">Email</h5>
                    <div class="text-muted">{{ settings:email | nl2br }}</div>
                </div>
                {{ /if }}
            </div>

            <!-- Statamic Form Handling -->
            <div class="col-lg-7 offset-lg-1">
                <div class="p-5 contact-form-wrapper">
                    <h3 class="section-label text-uppercase mb-4">Dërgoni një Mesazh</h3>

                    {{ form:contact_form }}
                        {{ if success }}
                            <div class="alert alert-success">
                                Faleminderit që na kontaktuat! Kemi marrë mesazhin tuaj dhe do të lidhemi me ju së shpejti.
                            </div>
                        {{ else }}
                            <div class="row g-3">
                                {{ fields }}
                                    <div class="col-12 {{ type == 'textarea' ? 'col-md-12' : 'col-md-6' }}">
                                        <label for="{{ handle }}" class="form-label">{{ display }}</label>
                                        {{ if type == 'textarea' }}
                                            <textarea name="{{ handle }}" id="{{ handle }}" class="form-control {{ error ? 'is-invalid' : '' }}" rows="5" placeholder="{{ display }}">{{ old }}</textarea>
                                        {{ else }}
                                            <input type="{{ type == 'email' ? 'email' : 'text' }}" name="{{ handle }}" id="{{ handle }}" class="form-control {{ error ? 'is-invalid' : '' }}" placeholder="{{ display }}" value="{{ old }}">
                                        {{ /if }}
                                        {{ if error }}
                                            <div class="invalid-feedback">{{ error }}</div>
                                        {{ /if }}
                                    </div>
                                {{ /fields }}
                                <div class="col-12 mt-4">
                                    <button type="submit" class="btn btn-dark text-uppercase px-5 py-2 rounded-0">Dërgo</button>
                                </div>
                            </div>
                        {{ /if }}
                    {{ /form:contact_form }}
                </div>
            </div>
        </div>
    </div>
</section>