{% extends "public_base.html" %}

{% block title %}{{ _('Contact') }} — {{ SPLENT_APP }}{% endblock %}

{% block hero %}
    {{ render_block('hero', eyebrow=_('Contact'), title=_('Get in touch'),
                    subtitle=_('Send us a message and we will get back to you.')) }}
{% endblock %}

{% block content %}
<div class="container section">

  {# Flash messages #}
  {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
      <div class="contact-form__flashes">
        {% for category, message in messages %}
          <div class="alert alert-{{ category }}">{{ message }}</div>
        {% endfor %}
      </div>
    {% endif %}
  {% endwith %}

  <form class="contact-form"
        method="POST"
        action="{{ url_for('contact.index') }}">

    <div class="form-group">
      <label for="contact-name">{{ _('Name') }}</label>
      <input type="text"
             id="contact-name"
             name="name"
             class="form-control"
             required>
    </div>

    <div class="form-group">
      <label for="contact-email">{{ _('Email') }}</label>
      <input type="email"
             id="contact-email"
             name="email"
             class="form-control"
             required>
    </div>

    <div class="form-group">
      <label for="contact-subject">{{ _('Subject') }}</label>
      <input type="text"
             id="contact-subject"
             name="subject"
             class="form-control">
    </div>

    <div class="form-group">
      <label for="contact-message">{{ _('Message') }}</label>
      <textarea id="contact-message"
                name="message"
                class="form-control"
                rows="6"
                required></textarea>
    </div>

    {# Captcha widget (cloudflare / recaptcha) — empty when none installed #}
    {% if captcha_widget is defined %}
      {{ captcha_script() }}
      {{ captcha_widget() }}
    {% endif %}

    <button type="submit" class="btn btn-primary">
      {{ _('Send message') }}
    </button>
  </form>

</div>
{% endblock %}