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

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

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

  <h1>{{ 'suggestions.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;">
    {{ 'suggestions.intro'|trans }}<br>
    {{ 'suggestions.intro_2'|trans }}
  </p>

  <form action="{{ path('app_suggestions_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="suggestion">

    <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 }}</label>
      <input id="sujet" name="sujet" type="text" value="Suggestion" readonly>
    </div>

    <div class="form-group">
      <label for="message">{{ 'form.your_suggestion'|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 }}.
    </p>
  </form>
</main>
{% endblock %}