{{#> modal-shell modalId="animation-advanced-modal" modalLabelId="animation-advanced-modal-label" modalDialogClass="modal-dialog-centered modal-xl modal-dialog-scrollable" modalBackdropStatic=true modalKeyboardDisabled=true}}
  <div class="modal-header">
    <div>
      <h2 class="modal-title fs-5" id="animation-advanced-modal-label" data-animation-modal-title>Advanced animation settings</h2>
      <p class="text-body-secondary mb-0">Fine-tune the selected region animation JSON without editing raw data.</p>
    </div>
    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  </div>
  <div class="modal-body d-grid gap-4">{{> signage/templates/animation-advanced-fields}}</div>
  <div class="modal-footer justify-content-between">
    <button type="button" class="btn btn-outline-secondary" data-animation-modal-reset>Reset to defaults</button>
    <div class="d-flex gap-2">
      <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
      <button type="button" class="btn btn-primary" data-animation-modal-apply>Apply changes</button>
    </div>
  </div>
{{/modal-shell}}