{% extends "base.html" %}

{% block title %}Contact Us{% endblock %}

{% block menu_items %}
    <li><a href="{{url_for('homepage')}}">Homepage</a></li>
    <li><a href="{{url_for('view_gables_data')}}">View Gables Data</a></li>
    <li><a href="{{url_for('view_data')}}">View Other Data</a></li>
    <li><a href="{{url_for('about')}}">About Us</a></li>
    <li class="current_page_item"><a href="{{url_for('contact')}}">Contact Us</a></li>
    <li><a href="{{url_for('admin_home')}}">Admin</a></li>
{% endblock %}

{% block content %}
<style>
#nameLabel,
#emailLabel,
#subjectLabel,
#messageLabel {
    margin-left: 45%;
    margin-right: auto;
    font-size: 22px;
}

#nameInput,
#emailInput,
#subjectInput,
#messageInput {
    margin-left: 45%;
    margin-right: auto;
    border-bottom: 28px solid #ededed;
}

#submitButton {
    margin-left: 45%;
    margin-right: auto;
    width:60em;
    height:30em;
}

h1 {
    margin-bottom: 15px;
}

h2 {
    display: block;
    font-size: 3em;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
    margin-left: 45%;
    margin-right: auto;
    font-weight: bold;
}

#confirmacion {
    text-align: center;
    font-weight: bold;
    font-size: 40px;
    border-bottom: 1200px solid #ededed;
}

/* Message flashing */
.flash {
  background-color: #FBB0B0;
  padding: 10px;
  width: 400px;
}

#emailError{
  margin-left: 45%;
  margin-right: auto;
}
</style>

    <div id="wrapper2">
        <div class="container content">
            <h2>Contact Us</h2>

            {% if success %}
            <div id = "confirmacion"><p>Thank you for your message. We'll get back to you shortly.</p></div>

            {% else %}

            {% for message in form.name.errors %}
              <div class="flash">{{ message }}</div>
            {% endfor %}

            {% for message in form.email.errors %}
              <div class="flash" id = "emailError">{{ message }}</div>
            {% endfor %}

            {% for message in form.subject.errors %}
              <div class="flash">{{ message }}</div>
            {% endfor %}

            {% for message in form.message.errors %}
              <div class="flash">{{ message }}</div>
            {% endfor %}

            <form method="post">
                {{ form.hidden_tag() }}

                <div id ="nameLabel">{{ form.name.label }}</div>
                <div id ="nameInput">{{ form.name }}</div>

                <div id = "emailLabel">{{ form.email.label }}</div>
                <div id = "emailInput">{{ form.email }}</div>

                <div id = "subjectLabel">{{ form.subject.label }}</div>
                <div id = "subjectInput">{{ form.subject }}</div>

                <div id = "messageLabel">{{ form.message.label }}</div>
                <div id = "messageInput">{{ form.message }}</div>

                <div id = "submitButton">{{ form.submit }}</div>

                <a href="http://wetland.fiu.edu/">
                    <img src="https://i.ibb.co/rZ2NgXF/2.png" alt="2" border="0" style="margin-left: 45%; margin-right: auto; margin-bottom: 10%;">
                </a>
            </form>

            {% endif %}
        </div>
    </div>
{% endblock %}