UnTube/backend/users/templates/intercooler/progress_bar.html

{% if channel_found %}
    {% if not done %}
    <div hx-target="this"
        hx-get="{% url 'continue' %}"
        hx-trigger="load"
        hx-swap="outerHTML">
        <div class="d-flex justify-content-center pt-3 pb-2 mb-3" style="background-color: cadetblue">

            <div class="w-50">
                <div class="d-flex justify-content-center">
                    <h3>Imported playlist '{{ playlist_name }}' from YouTube</h3>
                </div>
                <div class="d-flex justify-content-center">
                    <h3>({{ playlists_imported }}/{{ total_playlists }} playlists imported)</h3>
                </div>
                <div class="progress">
                    <div id="pb" class="progress-bar progress-bar-striped progress-bar-animated bg-warning text-dark" style="width:{{ progress }}%" role="progressbar" aria-valuemin="0" aria-valuemax="100">{{ progress }}%</div>
                </div>
            </div>
        </div>
    </div>
    {% else %}
    <div class="d-flex justify-content-center pt-3 pb-2 mb-3" style="background-color: #5fa075">

        <div class="w-50">
            <div class="d-flex justify-content-center">
                    <h3>Finished importing all of your playlists from YouTube</h3>
                </div>
                <div class="d-flex justify-content-center">
                    <h3>({{ playlists_imported }}/{{ total_playlists }} playlists imported)</h3>
                </div>
            <div class="progress">
                    <div id="pb" class="progress-bar progress-bar-striped progress-bar-animated bg-success" style="width:{{ progress }}%" role="progressbar" aria-valuemin="0" aria-valuemax="100">{{ progress }}%</div>
            </div>
            <div class="d-flex justify-content-center">
                <a class="btn btn-success" href="{% url 'home' %}">Continue</a>
            </div>
        </div>
    </div>
    {% endif %}
{% else %}

    <div hx-target="this" hx-swap="outerHTML">
        <div class="d-flex justify-content-center pt-3 pb-2 mb-3" style="background-color: #c9942a">

            <div class="w-75">
                <div class="d-flex justify-content-center">
                    <h3>
                        [{{ error_message }}] Uh-oh, ran into an error while trying to import your playlists.
                        </h3>
                </div>
                <br>
                <div class="d-flex justify-content-center">

                    <div class="btn-group-lg">
                  <button class="btn btn-lg btn-danger" hx-post="{% url 'start' %}">
                            Retry
                  </button>

                    <a class="btn btn-lg btn-outline-danger" href="{% url 'log_out' %}">
                      Log out
                    </a>
                        </div>
                </div>
            </div>
        </div>

    </div>

{% endif %}