<div style="flex: 2 1 auto; display: flex; flex-direction: column; justify-content: center;">
    <p style="font-weight: 600;">Dask Worker States:</p>
    <div style="display:flex; flex-direction: row; flex-wrap: nowrap; width: 640px; height: 2em; border: 1px solid #908e89; border-radius: 6px; background-color: #eeeeee; overflow: hidden; color: #413f3b">
        <div
            role="progressbar"
            aria-valuemin=0
            aria-valuemax="{{ n_workers }}"
            aria-labelledby="coiled-progressbar-readylabel"
            style="
                background-color: #054A91;
                width: {{ n_ready * 100 // n_workers }}%;
                height: 100%; line-height: 2em;
            "
        >
        </div>
        <div
            role="progressbar"
            aria-valuemin=0
            aria-valuemax="{{ n_workers }}"
            aria-labelledby="coiled-progressbar-bootinglabel"
            style="
                background-color: #3E7CB1;
                opacity: none;
                width: {{ n_running * 100 // n_workers }}%;
                height: 100%;
                line-height: 2em;
            "
        >
        </div>
        <div
            role="progressbar"
            aria-valuemin=0
            aria-valuemax="{{ n_workers }}"
            aria-labelledby="coiled-progressbar-provisioninglabel"
            style="
                background-color: #81A4CD;
                width: {{ n_starting * 100 // n_workers }}%;
                height: 100%; line-height: 2em;
            "
        >
        </div>
        <div
            role="progressbar"
            aria-valuemin=0
            aria-valuemax="{{ n_workers }}"
            aria-labelledby="coiled-progressbar-errorlabel"
            style="
                background-color: #B73239;
                width: {{ n_errored * 100 // n_workers }}%;
                eight: 100%;
                line-height: 2em;
                margin-left: auto;
            "
        >
        </div>

    </div>
    <div style="display:flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; width: 640px; margin-top: 12px">
        <div
          style="display: flex; flex-direction: row; align-items: center"
          title="Instances running and the Dask workers have phoned home"
        >
            <span style="height: 1em; width: 1em; background-color: #054A91;"></span>
            <span id="coiled-progressbar-readylabel" style="text-indent: 0.5em">
                Ready ({{ [n_ready, n_workers]|join("/") }})
        </div>
        <div
          style="display: flex; flex-direction: row; align-items: center"
          title="Downloading images and launching Docker containers"
        >
            <span style="height: 1em; width: 1em; background-color: #3E7CB1;"></span>
            <span id="coiled-progressbar-bootinglabel" style="text-indent: 0.5em">
                Instance Booting ({{ [n_running, n_workers]|join("/") }})
            </span>
        </div>
        <div
          style="display: flex; flex-direction: row; align-items: center"
          title="Provisioning cloud resources"
        >
            <span style="height: 1em; width: 1em; background-color: #81A4CD;"></span>
            <span id="coiled-progressbar-provisioninglabel" style="text-indent: 0.5em">
                Provisioning ({{ [n_starting, n_workers]|join("/") }})
            </span>
        </div>
        <div
          style="display: flex; flex-direction: row; align-items: center"
          title="Worker instances which have errored during launch"
        >
            <span style="height: 1em; width: 1em; background-color: #B73239;"></span>
            <span id="coiled-progressbar-errorlabel" style="text-indent: 0.5em">
                Errored ({{ [n_errored, n_workers]|join("/") }})
            </span>
        </div>
    </div>
</div>
