{# signature_pad/templates/signature_pad/widgets/signature_pad.html #}
<div class="signature-pad-container" id="{{ widget.attrs.id }}-container">
  <div class="signature-pad-wrapper">
    <canvas id="{{ widget.attrs.id }}-pad"
            {% for option_name, option_value in widget.signature_pad_options.items %} {% if option_value is not None %}data-signature-pad-{{ option_name|lower }}="{{ option_value }}"{% endif %}
            {% endfor %}
            {% include "signature_pad/widgets/attrs.html" %}>
    </canvas>
  </div>
  <div class="signature-pad-controls">
    <button type="button" class="signature-pad-clear-button">
      <svg xmlns="http://www.w3.org/2000/svg"
           width="16"
           height="16"
           fill="currentColor"
           class="bi bi-eraser"
           viewBox="0 0 16 16">
        <path d="M8.086 2.207a2 2 0 0 1 2.828 0l3.879 3.879a2 2 0 0 1 0 2.828l-5.5 5.5A2 2 0 0 1 7.879 15H5.12a2 2 0 0 1-1.414-.586l-2.5-2.5a2 2 0 0 1 0-2.828zm2.121.707a1 1 0 0 0-1.414 0L4.16 7.547l5.293 5.293 4.633-4.633a1 1 0 0 0 0-1.414zM8.746 13.547 3.453 8.254 1.914 9.793a1 1 0 0 0 0 1.414l2.5 2.5a1 1 0 0 0 .707.293H7.88a1 1 0 0 0 .707-.293z" />
      </svg>
    </button>
  </div>
  <input id="{{ widget.attrs.id }}"
         type="hidden"
         name="{{ widget.name }}"
         value="{{ widget.value }}" />
</div>