{{define "archive_ui.html"}}

  <div id="archive-ui" hx-target="this" hx-swap="outerHTML">
      {{ if eq .archiver.Status "Waiting" }}
        <button hx-post="/contacts/archive">
          Download Contact Archive
        </button>
      {{ else if eq .archiver.Status "Running" }}
        <div hx-get="/contacts/archive" hx-trigger="load delay:500ms">
          Creating Archive...{{ printf "%15.5f" .archiver.Progress }}
          <div class="progress">
            <div id="archive-progress" class="progress-bar" style="width:{{ mulf .archiver.Progress 100 }}%"></div>
          </div>
        </div>
      {{ else if eq .archiver.Status "Complete" }}
        <a hx-boost="false" href="/contacts/archive/file" _="on load click() me">Archive Downloading! Click here if the download does not start.</a>
        <button hx-delete="/contacts/archive">Clear Download</button>
      {{ end }}
  </div>
{{end}}