<% if (!errorMessage) { var errorMessage = '' } %>
<% if (!successMessage) { var successMessage = '' } %>

<% if (errorMessage || successMessage) { %>
  <section class="section">
    <div class="columns is-centered">
      <div class="column is-half">
        <% if (errorMessage) { %>
          <div class="notification is-danger">
            <button class="delete"></button>
            <%= errorMessage %>
          </div>
        <% } else if (successMessage) { %>
          <div class="notification is-success">
            <button class="delete"></button>
            <%= successMessage %>
          </div>
        <% } %>
      </div>
    </div>
  </section>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      (document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
        $delete.addEventListener('click', () => {
          const $notification = $delete.closest('.notification');
          const $section = $notification.closest('section');
          $section.parentNode.removeChild($section);
        });
      });
    });
  </script>
<% } %>