{% load i18n %}
{# Modale de contact — injectée dans la page detail #}
<div id="contact-modal" class="modal" role="dialog" aria-modal="true"
     aria-labelledby="contact-modal-title" hidden>
  <div class="modal-overlay" id="contact-overlay"></div>
  <div class="modal-box">
    <button class="modal-close" id="contact-modal-close" aria-label="{% trans 'Fermer' %}">&times;</button>

    <h2 id="contact-modal-title" class="modal-title">
      ✉ {% trans "Demande de renseignements" %}
    </h2>

    {# Zone de retour message succès #}
    <div id="contact-success" class="contact-success" hidden>
      <p class="success-icon">✓</p>
      <p class="success-title">{% trans "Message envoyé !" %}</p>
      <p class="success-body">{% trans "Nous vous répondrons dans les plus brefs délais." %}</p>
    </div>

    {# Formulaire #}
    <form id="contact-form" class="contact-form" novalidate>
      {% csrf_token %}

      {# Honeypot invisible #}
      <div class="hp-field" aria-hidden="true">
        <input type="text" name="website" id="id_website" tabindex="-1" autocomplete="off">
      </div>

      <input type="hidden" name="property_id" id="id_property_id">

      <div class="form-group">
        <label for="id_name">{% trans "Nom complet" %} <span class="required">*</span></label>
        <input type="text" id="id_name" name="name" required
               autocomplete="name" maxlength="200"
               placeholder="{% trans 'Votre nom et prénom' %}">
        <span class="field-error" data-field="name"></span>
      </div>

      <div class="form-group">
        <label for="id_email">{% trans "Adresse email" %} <span class="required">*</span></label>
        <input type="email" id="id_email" name="email" required
               autocomplete="email"
               placeholder="{% trans 'votre@email.com' %}">
        <span class="field-error" data-field="email"></span>
      </div>

      <div class="form-group">
        <label for="id_phone">{% trans "Téléphone" %} <span class="optional">({% trans "facultatif" %})</span></label>
        <input type="tel" id="id_phone" name="phone"
               autocomplete="tel" maxlength="30"
               placeholder="+33 6 XX XX XX XX">
        <span class="field-error" data-field="phone"></span>
      </div>

      <div class="form-group">
        <label for="id_message">{% trans "Message" %} <span class="required">*</span></label>
        <textarea id="id_message" name="message" required rows="5"
                  placeholder="{% trans 'Votre message, vos questions…' %}"></textarea>
        <span class="field-error" data-field="message"></span>
      </div>

      <p class="form-notice">
        {% trans "* champs obligatoires — vos coordonnées ne seront utilisées que pour répondre à votre demande." %}
      </p>

      <div class="form-global-error" id="contact-global-error" hidden></div>

      <button type="submit" class="btn btn-primary btn-full" id="contact-submit">
        {% trans "Envoyer" %}
      </button>
    </form>
  </div>
</div>