{% extends 'base.html.twig' %}

{% block title %}{{ 'contact.title'|trans }}{% endblock %}

{% block body %}
<main id="contenu" class="content">
  <img src="/Logo.png" alt="Logo n-atypik" class="logo-central">

  <h1>{{ 'contact.page_title'|trans }}</h1>

  {# Flash messages #}
  {% for message in app.flashes('success') %}
    <div class="alert alert-success">{{ message }}</div>
  {% endfor %}
  {% for message in app.flashes('error') %}
    <div class="alert alert-error">{{ message }}</div>
  {% endfor %}

  <p class="instruction-text" style="text-align:center;">
    {{ 'contact.intro'|trans }}<br>
    {{ 'contact.email_direct'|trans }}
    <strong><a href="mailto:contact@n-atypik.fr">contact@n-atypik.fr</a></strong>
  </p>

  <form action="{{ path('app_contact_submit', {'_locale': app.request.locale}) }}" method="POST">
    <div class="hp-field" aria-hidden="true">
      <label for="website">{{ 'form.do_not_fill'|trans }}</label>
      <input id="website" name="website" type="text" tabindex="-1" autocomplete="off">
    </div>

    <input type="hidden" name="type" value="contact">

    <div class="form-row">
      <div class="form-group">
        <label for="prenom">{{ 'form.first_name'|trans }} <span aria-hidden="true">{{ 'form.required_mark'|trans }}</span></label>
        <input id="prenom" name="prenom" type="text" required autocomplete="given-name">
      </div>

      <div class="form-group">
        <label for="nom">{{ 'form.last_name'|trans }} <span aria-hidden="true">{{ 'form.required_mark'|trans }}</span></label>
        <input id="nom" name="nom" type="text" required autocomplete="family-name">
      </div>
    </div>

    <div class="form-group">
      <label for="email">{{ 'form.email'|trans }} <span aria-hidden="true">{{ 'form.required_mark'|trans }}</span></label>
      <input id="email" name="email" type="email" required autocomplete="email">
    </div>

    <div class="form-group">
      <label for="sujet">{{ 'form.subject'|trans }} <span aria-hidden="true">{{ 'form.required_mark'|trans }}</span></label>
      <input id="sujet" name="sujet" type="text" required maxlength="120" placeholder="Ex : Question, compte, accès, idée...">
    </div>

    <div class="form-group">
      <label for="message">{{ 'form.message'|trans }} <span aria-hidden="true">{{ 'form.required_mark'|trans }}</span></label>
      <textarea id="message" name="message" required maxlength="4000"></textarea>
    </div>

    <button type="submit">{{ 'form.send'|trans }}</button>

    <p class="form-note">
      <span aria-hidden="true">{{ 'form.required_mark'|trans }}</span> {{ 'form.required'|trans }} — {{ 'form.note'|trans }}
    </p>
  </form>
</main>
{% endblock %}