<div class="modal" id="modal-archive">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Archive this project, are you sure?</p>
      <button class="delete" aria-label="close"></button>
    </header>
    <section class="modal-card-body">
      <div class="notification is-warning has-text-weight-semibold">
        This project will be marked as archived and will become read-only.
        It will not appear in the project list by default.
      </div>
      <p class="mb-2">
        The selected directories will be removed:
      </p>
      <ul class="mb-5">
        {{ archive_form.as_ul }}
      </ul>
      <p>
        Are you sure you want to do this?
      </p>
    </section>
    <form action="{% url 'project_archive' project.slug %}" method="post">{% csrf_token %}
      <footer class="modal-card-foot is-flex is-justify-content-space-between">
        <button class="button has-text-weight-semibold" type="reset">No, Cancel</button>
        <button class="button is-warning is-no-close" type="submit">Yes, Archive Project</button>
      </footer>
    </form>
  </div>
</div>