{# SPDX-License-Identifier: EUPL-1.2 #}

<!-- Contact Section-->
<section class="page-section" id="contact">
    <div class="container">
        <!-- Contact Section Heading-->
        <h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">{{ index.contact.title ? index.contact.title : "Contact Me" }}</h2>
        <!-- Icon Divider-->
        <div class="divider-custom">
            <div class="divider-custom-line"></div>
            <div class="divider-custom-icon"><i class="fas fa-{{ index.contact.divider ? index.contact.divider : 'star' }}"></i></div>
            <div class="divider-custom-line"></div>
        </div>
        {% if index.contact.form.enabled %}
            <!-- Contact Section Form-->
            <div class="row justify-content-center">
                <div class="col-lg-8 col-xl-7">
                    <form id="contactForm" class="needs-validation" {% if index.contact.form.action %} action="{{ index.contact.form.action|url }}" {% endif %} {% if index.contact.form.method %} method="{{ index.contact.form.method }}" {% endif %} novalidate>
                        <!-- Name input-->
                        <div class="form-floating mb-3">
                            <input class="form-control" id="name" name="name" type="text" placeholder="Enter your name..." required />
                            <label for="name">Full name</label>
                            <div class="invalid-feedback">A name is required.</div>
                        </div>
                        <!-- Email address input-->
                        <div class="form-floating mb-3">
                            <input class="form-control" id="email" name="email" type="email" placeholder="name@example.com" required />
                            <label for="email">Email address</label>
                            <div class="invalid-feedback">An email is required.</div>
                            <div class="invalid-feedback">Email is not valid.</div>
                        </div>
                        <!-- Phone number input-->
                        <div class="form-floating mb-3">
                            <input class="form-control" id="phone" name="phone" type="tel" placeholder="(123) 456-7890" required />
                            <label for="phone">Phone number</label>
                            <div class="invalid-feedback">A phone number is required.</div>
                        </div>
                        <!-- Message input-->
                        <div class="form-floating mb-3">
                            <textarea class="form-control" id="message" name="message" placeholder="Enter your message here..." style="height: 10rem" required></textarea>
                            <label for="message">Message</label>
                            <div class="invalid-feedback">A message is required.</div>
                        </div>
                        <!-- Submit success message-->
                        <!---->
                        <!-- This is what your users will see when the form-->
                        <!-- has successfully submitted-->
                        <div class="d-none" id="submitSuccessMessage">
                            <div class="text-center mb-3">
                                <div class="fw-bolder">Form submission successful!</div>
                            </div>
                        </div>
                        <!-- Submit error message-->
                        <!---->
                        <!-- This is what your users will see when there is-->
                        <!-- an error submitting the form-->
                        <div class="d-none" id="submitErrorMessage"><div class="text-center text-danger mb-3">Error sending message!</div></div>
                        <!-- Submit Button-->
                        <button class="btn btn-primary btn-xl" id="submitButton" type="submit">Send</button>
                    </form>
                </div>
            </div>
        {% endif %}
        {% if index.contact.items or not index.contact.form.enabled %}
            {% if index.contact.form.enabled %}
                <!-- Contact Subsection Heading-->
                <h3 class="page-section-heading text-center text-uppercase text-secondary mb-0 mt-5 fs-2">{{ index.contact.subtitle ? index.contact.title : "Or reach me by" }}</h3>
                <!-- Icon Divider-->
                <div class="divider-custom">
                    <div class="divider-custom-line"></div>
                    <div class="divider-custom-icon"><i class="fas fa-{{ index.contact.subdivider ? index.contact.subdivider : 'star' }}"></i></div>
                    <div class="divider-custom-line"></div>
                </div>
            {% endif %}

        <!-- Contact Section Content-->
            <div class="row justify-content-center">
            {% for item in index.contact.items ? index.contact.items : config.theme_config.demo.contact.items %}
            {% set classes = ["col-md-6", "col-lg-4"] %}
                {% if not loop.last %}
                    {% set classes = classes|merge(["mb-5"]) %}
                    {% if loop.revindex <= (loop.length - 1) % 3 + 1 %}
                        {% if loop.revindex == 3 %}
                            {% set classes = classes|merge(["mb-lg-0"]) %}
                        {% elseif loop.revindex == 2 %}
                            {% if loop.index == 2 %}
                                {% set classes = classes|merge(["mb-lg-0"]) %}
                            {% else %}
                                {% set classes = classes|merge(["mb-md-0"]) %}
                            {% endif %}
                        {% endif %}
                    {% elseif loop.revindex == 2 and loop.index == 3 %}
                        {% set classes = classes|merge(["mb-md-0","mb-lg-5"]) %}
                    {% endif %}
                {% endif %}
                <div class="{{ classes|join(" ") }}">
                    <div class="d-flex flex-column align-items-center">
                        <div class="icon-contact mb-3"><i class="{{ item.brands ? "fab" : "fas" }} fa-{{ item.icon }}"></i></div>
                        <div class="text-muted">{{ item.title }}</div>
                        {% if item.link %}<a href="{{ item.link|url }}"{% else %}<div{% endif %} class="lead font-weight-bold">{{ item.content }}{{ item.link ? "</a>" : "</div>" }}
                    </div>
                </div>
                {% endfor %}
            </div>
        {% endif %}
    </div>
</section>