<turbo-stream action="update" target="modals">
    <template>
        <div id="testimony-modal" class="front-modal" data-controller="modal">
    <div class="front-modal__backdrop" data-action="click->modal#close"></div>
    <div class="front-modal__panel">
        <button type="button" class="front-modal__close" aria-label="Fermer" data-action="click->modal#close">&times;</button>
        <div class="front-modal__header">
            <h2 class="h2">Rédiger un message</h2>
            <p class="front-modal__subtitle">Champs obligatoire sauf mention contraire</p>
        </div>
        <div class="front-modal__body">
            <div id="form-validations" data-required="Ce champ est obligatoire" data-email="Veuillez saisir une adresse email valide" hidden></div>

            <form name="testimony_front" method="post" action="/temoignages" data-controller="form" novalidate="novalidate" class="testimony-form" enctype="multipart/form-data">

            <div class="form-grid">
                <div class="form-group">
                    <label for="testimony_front_displayName" class="form-label required">Prénom ou pseudonyme</label>
                    <input type="text" id="testimony_front_displayName" name="testimony_front[displayName]" required="required" placeholder="Prénom ou Pseudonyme" required="required" class="form-control" />
                    
                </div>

                <div class="form-group">
                    <label for="testimony_front_email" class="form-label">Adresse email</label>
                    <input type="email" id="testimony_front_email" name="testimony_front[email]" placeholder="Adresse email" class="form-control" />
                    <small class="hint">Elle ne nous sert qu’à valider votre message, rien d’autre</small>
                    
                </div>

                <div class="form-group form-group--wide" data-controller="char-count" data-char-count-max-value="1000">
                    <label for="testimony_front_content" class="form-label required">Témoignage sur le vécu de votre douleur et/ou prise en charge de votre pathologie (fibromyalgie, migraine, cardiaque, gynécologique, rhumato...)</label>
                    <div class="with-counter">
                        <textarea id="testimony_front_content" name="testimony_front[content]" required="required" rows="6" maxlength="1000" placeholder="Témoignage" required="required" data-char-count-target="input" class="form-control"></textarea>
                        <small class="char-counter" data-char-count-target="counter">0/1000</small>
                    </div>
                    
                </div>

                <div class="form-group form-group--wide">
                    <div class="label-row">
                        <label for="testimony_front_attachmentFile" class="form-label">Fichier (image, audio ou vidéo)</label> <span class="optional">Facultatif</span>
                    </div>
                    <div class="file-inline">
                        <input type="file" id="testimony_front_attachmentFile" name="testimony_front[attachmentFile]" accept="image/*,audio/*,video/*" class="form-control" />
                        <button type="button" class="btn btn-tertiary" onclick="this.previousElementSibling.click()">Charger</button>
                    </div>
                    <small class="hint">Audio, Photo, Vidéo, Dessin… 25Mo. maximum</small>
                    
                </div>

                <div class="form-group form-group--wide">
                    <label for="testimony_front_improvementIdeas" class="form-label">3 choses pour améliorer la situation de la douleur des femmes</label>
                    <textarea id="testimony_front_improvementIdeas" name="testimony_front[improvementIdeas]" rows="3" class="form-control"></textarea>
                    
                </div>

                <div class="form-group">
                    <label class="form-label" for="testimony_front_gender">Sexe</label>
                    <select id="testimony_front_gender" name="testimony_front[gender]" placeholder="Sélectionner dans la liste" class="form-select"><option value="">Sélectionner...</option><option value="male">Homme</option><option value="female">Femme</option><option value="non_binary">Non binaire</option><option value="not_specified">Préfère ne pas répondre</option></select>
                    
                </div>

                <div class="form-group">
                    <label class="form-label" for="testimony_front_witnessProfile">Profil du témoin</label>
                    <select id="testimony_front_witnessProfile" name="testimony_front[witnessProfile]" placeholder="Sélectionner dans la liste" class="form-select"><option value="">Sélectionner...</option><option value="person">Je suis une personne concernée</option><option value="relative">Je suis un(e) proche</option><option value="health_professional">Je suis professionnel(e) de santé</option></select>
                    
                </div>

                <div class="form-group form-group--wide consent">
                    <label>
                        <div class="form-check"><input type="checkbox" id="testimony_front_privacyPolicyAccepted" name="testimony_front[privacyPolicyAccepted]" required="required" required="required" class="form-check-input" value="1" />
        <label class="form-check-label required" for="testimony_front_privacyPolicyAccepted"></label></div>
                        <span>En cochant cette case je consens à ce que mon témoignage soit publié sur le site EGDF et je suis d’accord pour être contacté(e) dans le cadre de la promotion des Etats Généraux. L’adresse email fournie ne sera pas utilisée à des fins commerciales.</span>
                    </label>
                    
                </div>

                <div class="form-actions form-group--wide">
                    <button type="submit" class="btn btn-primary btn-submit" style="cursor: pointer;">Déposer mon message</button>
                </div>
            </div>

            <input type="hidden" id="testimony_front__token" name="testimony_front[_token]" data-controller="csrf-protection" value="csrf-token" /></form>
        </div>
    </div>
</div>
    </template>
</turbo-stream>

