<div class="cda-smart-help"><strong>À quoi sert cet assistant ?</strong><p>Il prépare automatiquement les destinataires, les adresses autorisées et les variables du modèle selon une personne, un atelier ou un groupe.</p></div>
<link rel="stylesheet"
href="/public/assets/css/cda-smart-communication.css">

<section class="smart-communication-hero">
<div>
<span class="page-kicker">Centre de communication</span>
<h2>Destinataires intelligents</h2>
<p>
Choisissez une personne, son adresse disponible,
puis un modèle modifiable.
</p>
</div>

<a class="button button-secondary"
href="/public/communications">
Retour
</a>
</section>

<section class="smart-composer-grid">
<article class="smart-card">
<h3>1. Destinataire</h3>

<label class="smart-field">
<span>Rechercher un adhérent, membre ou professeur</span>
<input
type="search"
id="smart-recipient-search"
autocomplete="off"
placeholder="Commencez à saisir un nom">
</label>

<div
id="smart-recipient-results"
class="smart-recipient-results">
</div>

<div
id="smart-selected-recipient"
class="smart-selected-recipient"
hidden>
</div>

<div
id="smart-addresses"
class="smart-addresses"
hidden>
<h4>Adresses disponibles</h4>
<div id="smart-address-list"></div>
</div>

<h3>2. Modèle et objet</h3>

<label class="smart-field">
<span>Objet / modèle prédéfini</span>
<select id="smart-template">
<option value="">Choisir un modèle</option>
<?php foreach($templates as $template): ?>
<option
value="<?= (int)$template['id'] ?>"
data-object="<?= htmlspecialchars(
    (string)$template['objet']
) ?>"
data-context="<?= htmlspecialchars(
    (string)$template['contexte']
) ?>"
data-variables="<?= htmlspecialchars(
    (string)$template['variables_json']
) ?>">
<?= htmlspecialchars(
    (string)$template['libelle']
) ?>
</option>
<?php endforeach; ?>
</select>
</label>

<label class="smart-field">
<span>Objet modifiable</span>
<input type="text" id="smart-object">
</label>

<label class="smart-field">
<span>Corps du message modifiable</span>
<textarea rows="15" id="smart-body"></textarea>
</label>

<div class="smart-variable-panel">
<strong>Variables contextuelles</strong>

<label>
<span>Nom du membre concerné</span>
<input id="var-nom-membre">
</label>

<label>
<span>Atelier</span>
<input id="var-atelier">
</label>

<label>
<span>Créneau</span>
<input id="var-creneau">
</label>

<label>
<span>Professeur</span>
<input id="var-professeur">
</label>

<label>
<span>Date limite</span>
<input type="date" id="var-date-limite">
</label>
</div>
</article>

<aside class="smart-card smart-preview-card">
<header>
<div>
<h3>Aperçu réel</h3>
<p>
Le rendu utilise la civilité et les données
du destinataire sélectionné.
</p>
</div>
</header>

<div class="smart-preview-meta">
<span>À :</span>
<strong id="preview-to">Aucun destinataire</strong>
</div>

<div class="smart-preview-meta">
<span>Objet :</span>
<strong id="preview-object">—</strong>
</div>

<div
id="smart-preview"
class="smart-mail-preview">
Sélectionnez un destinataire et un modèle.
</div>

<div
id="smart-unresolved"
class="smart-unresolved"
hidden>
</div>

<div class="smart-quality-check">
<strong>Contrôles</strong>
<ul>
<li id="check-address">Adresse à sélectionner</li>
<li id="check-object">Objet à préparer</li>
<li id="check-variables">
Variables à compléter
</li>
</ul>
</div>
</aside>
</section>

<script>
window.CDA_SMART_COMMUNICATION = {
    searchUrl:
        '/public/communications/destinataires',
    addressesUrl:
        '/public/communications/adresses',
    previewUrl:
        '/public/communications/apercu-intelligent'
};
</script>

<script src="/public/assets/js/cda-smart-communication.js"></script>
