{% extends 'layouts/layout.html' %}

{% block title %}{{ model.title }}{% endblock %}

{% block page_body %}
    <!-- Include Stylesheet 
    <link rel="stylesheet" href="{{ url_for('static', filename='css/sections/core.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/pages/core/contact.css') }}">
    -->
    <link rel="stylesheet" href="{{ url_for('static', filename='dist/css/core_contact.bundle.css') }}">

    <script>
        function loadRecaptcha() {
            var script = document.createElement('script');
            script.src = "https://www.google.com/recaptcha/enterprise.js?render=6Lf8Q8cpAAAAAFAawGu4-ma60bvbEixNVTVvRzKe";
            script.async = true;
            document.body.appendChild(script);
        }

        window.addEventListener('load', loadRecaptcha);
    </script>
    
    <!-- HTML content -->
    <div class="card">
        <form id="{{ model.ID_FORM_CONTACT }}" class="container" action="{{ url_for('routes_core.contact') }}" method="POST">
            <h2 class="label-title">Complete the form or find our details below.</h2>
            <!--
            <div class="{{ model.FLAG_CONTAINER_INPUT }}">
                <label for="sender_email">Email address</label> <!-- class="input-label" --
                <input type="email" id="sender_email" name="sender_email" placeholder="Please enter your email address so we can get back to you." style="width: 50%;"/>
            </div>
            <div class="{{ model.FLAG_CONTAINER_INPUT }}">
                <label for="sender_CC">
                    <input type="checkbox" id="sender_CC" name="sender_CC" checked/>Uncheck this box if you do not wish to receive a copy of the email
                </label>
            </div>
            <div class="{{ model.FLAG_CONTAINER_INPUT }}">
                <label for="sender_name">Name</label> <!-- class="input-label" --
                <input type="text" id="sender_name" name="sender_name" placeholder="Please enter your preferred name." style="width: 30%;"/>
            </div>
            <div class="{{ model.FLAG_CONTAINER_INPUT }}">
                <label for="sender_message">Message</label> <!-- class="input-label" --
                <textarea id="sender_message" name="sender_message" rows="4" cols="80" placeholder="How can we help?"></textarea>
            </div>
            <button type="submit" id="submit_form_email">Submit request</button>
            -->
            {{ model.form_contact.hidden_tag() }}
            <div class="{{ model.FLAG_CONTAINER_INPUT }}">
                {{ model.form_contact.email.label }}
                {{ model.form_contact.email(size=254) }}
                {% for error in model.form_contact.email.errors %}
                    <p class="error">{{ error }}</p>
                {% endfor %}
            </div>
            <!--
            <div class="{{ model.FLAG_CONTAINER_INPUT }}">
                {{ model.form_contact.CC.label }}
                {{ model.form_contact.CC(checked=True) }}
                {% for error in model.form_contact.name.errors %}
                    <p class="error">{{ error }}</p>
                {% endfor %}
            </div>
            -->
            <div class="{{ model.FLAG_CONTAINER_INPUT }}">
                {{ model.form_contact.name.label }}
                {{ model.form_contact.name(size=50) }}
                {% for error in model.form_contact.name.errors %}
                    <p class="error">{{ error }}</p>
                {% endfor %}
            </div>
            <div class="{{ model.FLAG_CONTAINER_INPUT }}">
                {{ model.form_contact.message.label }}
                {{ model.form_contact.message(rows=4, cols=80) }}
                {% for error in model.form_contact.name.errors %}
                    <p class="error">{{ error }}</p>
                {% endfor %}
            </div>
            <div class="{{ model.FLAG_CONTAINER_INPUT }}">
                {{ model.form_contact.recaptcha() }}
            </div>
            <div class="{{ model.FLAG_CONTAINER_INPUT }}">
                {{ model.form_contact.submit() }}
            </div>
        </form>
    </div>

    <div class="{{ model.FLAG_CARD }} {{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}">
        <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_ROW }}">
            <h3 class="label-title" style="padding-bottom: 0;">Where to find us</h3>
        </div>
        <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_ROW }}">
            <h4>{{ model.app.MAIL_CONTACT_PUBLIC }}</h4>
        </div>
        <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_ROW }}" style="padding-top: 0; width: fit-content;">
            <a href="{{ model.URL_LINKEDIN }}" class="{{ model.FLAG_CONTAINER_ICON_AND_LABEL }} {{ model.FLAG_COLUMN }}">
                <img class="img-icon" src="{{ url_for('static', filename='images/Logo_LinkedIn.png') }}" alt="LinkedIn" aria-label="LinkedIn"></img>
                <h4>LinkedIn</h4>
            </a>
            <a href="{{ model.URL_GITHUB }}" class="{{ model.FLAG_CONTAINER_ICON_AND_LABEL }} {{ model.FLAG_COLUMN }}">
                <img class="img-icon" src="{{ url_for('static', filename='images/Logo_GitHub.png') }}" alt="GitHub" aria-label="GitHub"></img>
                <h4>GitHub</h4>
            </a>
        </div>
    </div>
    
    <!-- Include JavaScript
    <script type="module" src="{{ url_for('static', filename='js/sections/core.js') }}"></script>
    <script type="module" src="{{ url_for('static', filename='js/pages/core/contact.js') }}"></script>
    -->
    
    <script>
        var idEmail = "#{{ model.ID_EMAIL }}";
        var idMessage = "#{{ model.ID_MESSAGE }}";
        var idName = "#{{ model.ID_NAME }}";
        
        /*
        $(document).ready(function() {
            stylePageContact();
            hookupPageContact();
        });
        */
    </script>
{% endblock %}