<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Signature sécurisée</title>
<link rel="stylesheet" href="/public/assets/css/cda-member-consents.css">
</head>
<body>
<main class="public-signature"><img src="/public/assets/images/logo-carrefour-des-arts.jpg" alt="Carrefour des Arts" style="display:block;width:150px;height:auto;margin:0 auto 18px">
<section class="member-card">
<h1>Carrefour des Arts de Bray-Dunes</h1>
<h2>Signature sécurisée</h2>
<p><?= htmlspecialchars($member['prenom'].' '.$member['nom']) ?></p>

<form method="post" action="/public/consentement-public/signature" class="member-form">
<input type="hidden" name="token" value="<?= htmlspecialchars($token) ?>">
<input type="hidden" name="signature_data" id="signature-data">

<label><span>Nom du signataire</span><input required name="nom_signataire"></label>
<label><span>Qualité</span><input required name="qualite_signataire"></label>

<div class="wide">
<canvas id="signature-pad" width="700" height="220"></canvas>
<button type="button" id="signature-clear">Effacer</button>
</div>

<button class="button button-primary">Signer le document</button>
</form>
</section>
</main>

<script src="/public/assets/js/cda-signature-pad.js"></script>
</body>
</html>
