{{define "archive_ui.html"}}
<div id="archive-ui" hx-target="this" hx-swap="outerHTML">
    {% if archiver.status() == "Waiting" %}
        <button hx-post="/contacts/archive">
            Download Contact Archive
        </button>
    {% elif archiver.status() == "Running" %}
        <div hx-get="/contacts/archive" hx-trigger="load delay:500ms">
            Creating Archive...
            <div class="progress" >
                <div id="archive-progress" class="progress-bar" style="width:{{ mul .archiver.progress 100 }}%"></div>
            </div>
        </div>
    {% elif 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>
    {% endif %}
</div>
{{end}}