{% extends 'story/base.html' %}
{% load static %}
{% load i18n %}
{% load comments %}
{% load blog_modules %}
{% block main %}
    <main class="main">
        <!-- Page Title -->
        <div class="page-title">
            <div class="heading">
                <div class="container">
                    <div class="row d-flex justify-content-center text-center">
                        <div class="col-lg-8">
                            <h1 class="heading-title">
                                {% trans "Contact" %}
                            </h1>
                            <p class="mb-0">
                                {% trans "Get in touch with the Story team using our working demo contact form." %}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <nav class="breadcrumbs">
                <div class="container">
                    <ol>
                        <li>
                            <a href="{% url 'core_manager:home' %}">
                                {% trans "Home" %}
                            </a>
                        </li>
                        <li class="current">
                            {% trans "Contact" %}
                        </li>
                    </ol>
                </div>
            </nav>
        </div>
        <!-- End Page Title -->
        <!-- Contact Section -->
        <section class="contact section" id="contact">
            <div class="container">
                <div class="contact-wrapper">
                    <div class="contact-info-panel">
                        <div class="contact-info-header">
                            <h3>
                                {% trans "Contact Information" %}
                            </h3>
                            <p>
                                {% trans "Have a question or an idea for a story? Use the demo contact form to send a message to our team." %}
                            </p>
                        </div>
                        <div class="contact-info-cards">
                            <div class="info-card">
                                <div class="icon-container">
                                    <i class="bi bi-pin-map-fill">
                                    </i>
                                </div>
                                <div class="card-content">
                                    <h4>
                                        {% trans "Our Location" %}
                                    </h4>
                                    <p>
                                        {% trans "4952 Hilltop Dr, Anytown, CA 90210" %}
                                    </p>
                                </div>
                            </div>
                            <div class="info-card">
                                <div class="icon-container">
                                    <i class="bi bi-envelope-open">
                                    </i>
                                </div>
                                <div class="card-content">
                                    <h4>
                                        {% trans "Email Us" %}
                                    </h4>
                                    <p>
                                        info@example.com
                                    </p>
                                </div>
                            </div>
                            <div class="info-card">
                                <div class="icon-container">
                                    <i class="bi bi-telephone-fill">
                                    </i>
                                </div>
                                <div class="card-content">
                                    <h4>
                                        {% trans "Call Us" %}
                                    </h4>
                                    <p>
                                        +1 (555) 123-4567
                                    </p>
                                </div>
                            </div>
                            <div class="info-card">
                                <div class="icon-container">
                                    <i class="bi bi-clock-history">
                                    </i>
                                </div>
                                <div class="card-content">
                                    <h4>
                                        {% trans "Working Hours" %}
                                    </h4>
                                    <p>
                                        {% trans "Monday-Saturday: 9AM - 7PM" %}
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="social-links-panel">
                            <h5>
                                {% trans "Follow Us" %}
                            </h5>
                            <div class="social-icons">
                                {% if site_settings.facebook_url %}
                                <a href="{{ site_settings.facebook_url }}" aria-label="Facebook" target="_blank" rel="noopener noreferrer">
                                    <i class="bi bi-facebook" aria-hidden="true"></i>
                                </a>
                                {% endif %}
                                {% if site_settings.x_url %}
                                <a href="{{ site_settings.x_url }}" aria-label="X" target="_blank" rel="noopener noreferrer">
                                    <i class="bi bi-twitter-x" aria-hidden="true"></i>
                                </a>
                                {% endif %}
                                {% if site_settings.instagram_url %}
                                <a href="{{ site_settings.instagram_url }}" aria-label="Instagram" target="_blank" rel="noopener noreferrer">
                                    <i class="bi bi-instagram" aria-hidden="true"></i>
                                </a>
                                {% endif %}
                                {% if site_settings.linkedin_url %}
                                <a href="{{ site_settings.linkedin_url }}" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer">
                                    <i class="bi bi-linkedin" aria-hidden="true"></i>
                                </a>
                                {% endif %}
                                {% if site_settings.youtube_url %}
                                <a href="{{ site_settings.youtube_url }}" aria-label="YouTube" target="_blank" rel="noopener noreferrer">
                                    <i class="bi bi-youtube" aria-hidden="true"></i>
                                </a>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="contact-form-panel">
                        <div class="map-container">
                            <iframe allowfullscreen="" height="100%" loading="lazy" referrerpolicy="no-referrer-when-downgrade" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d48389.78314118045!2d-74.006138!3d40.710059!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25a22a3bda30d%3A0xb89d1fe6bc499443!2sDowntown%20Conference%20Center!5e0!3m2!1sen!2sus!4v1676961268712!5m2!1sen!2sus" style="border:0;" width="100%">
                            </iframe>
                        </div>
                        <div class="form-container">
                            <h3>
                                {% trans "Send Us a Message" %}
                            </h3>
                            <p>
                                {% trans "Tell us what you have in mind. Messages sent through this demo form are saved in the administration panel." %}
                            </p>
                            <form action="{% url 'core_manager:contact_send' %}" class="php-email-form" method="post">
                                {% csrf_token %}
                                <div style="position:absolute; left:-9999px;" aria-hidden="true">
                                    <label>{% trans "Website" %} <input type="text" name="website" tabindex="-1" autocomplete="off"/></label>
                                </div>
                                <input type="hidden" name="source_url" value="{{ request.build_absolute_uri }}"/>
                                <div class="form-floating mb-3">
                                    <input class="form-control" id="nameInput" name="name" placeholder="{% trans 'Full Name' %}" required="" type="text"/>
                                    <label for="nameInput">
                                        {% trans "Full Name" %}
                                    </label>
                                </div>
                                <div class="form-floating mb-3">
                                    <input class="form-control" id="emailInput" name="email" placeholder="{% trans 'Email Address' %}" required="" type="email"/>
                                    <label for="emailInput">
                                        {% trans "Email Address" %}
                                    </label>
                                </div>
                                <div class="form-floating mb-3">
                                    <input class="form-control" id="subjectInput" name="subject" placeholder="{% trans 'Subject' %}" required="" type="text"/>
                                    <label for="subjectInput">
                                        {% trans "Subject" %}
                                    </label>
                                </div>
                                <div class="form-floating mb-3">
                                    <textarea class="form-control" id="messageInput" name="message" placeholder="{% trans 'Your Message' %}" required="" minlength="3" rows="5" style="height: 150px"></textarea>
                                    <label for="messageInput">
                                        {% trans "Your Message" %}
                                    </label>
                                </div>
                                <div class="my-3">
                                    <div class="loading">
                                        {% trans "Loading" %}
                                    </div>
                                    <div class="error-message">
                                    </div>
                                    <div class="sent-message">
                                        {% trans "Your message has been sent. Thank you!" %}
                                    </div>
                                </div>
                                <div class="d-grid">
                                    <button class="btn-submit" type="submit">
                                        {% trans "Send Message" %}
                                        <i class="bi bi-send-fill ms-2">
                                        </i>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- /Contact Section -->
    </main>
{% endblock %}