{% if pending_announcement %}
<div id="release-modal" class="modal is-open" role="dialog" aria-modal="true" aria-labelledby="release-title">
  <div class="modal-card">
    <div class="modal-header">
      <h3 id="release-title">{{ pending_announcement.title|default:"What’s new" }}</h3>
    </div>
    <div class="modal-body">
      <div class="prose">{{ pending_announcement.message|linebreaks }}</div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" type="button" data-dismiss>Got it</button>
    </div>
  </div>
</div>
<script>
(function(){
  function getCookie(name) {
    let value = `; ${document.cookie}`;
    let parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
  }
  var modal = document.getElementById('release-modal');
  if(!modal) return;
  function closeModal(){
    modal.classList.remove('is-open');
    fetch("{% url 'dismiss_announcement' pending_announcement.id %}", {
      method: "POST",
      headers: {"X-CSRFToken": getCookie("csrftoken")}
    });
  }
  modal.querySelectorAll('[data-dismiss]').forEach(function(btn){
    btn.addEventListener('click', closeModal);
  });
})();
</script>
{% endif %}