<template name="radialProgressBar">
    <div class="radialProgress">
        <svg id="svg"
             width="26"
             height="26"
             viewPort="0 0 26 26"
             version="1.1"
             xmlns="http://www.w3.org/2000/svg">

            <!-- stroke-dasharray is 2 * PI * radius !-->
            <circle r="11"
                    cx="13"
                    cy="13"
                    fill="transparent"
                    stroke-dasharray="69.11503837897544"
                    stroke-dashoffset="0">
            </circle>
            {{#unless isLocked}}
                <circle id="bar"
                        r="11"
                        cx="13"
                        cy="13"
                        fill="transparent"
                        stroke-dasharray="69.11503837897544"
                        style="stroke-dashoffset: {{progressRadius}}px;">
                </circle>
            {{/unless}}
        </svg>
        <div class="progressArea {{#if isLocked}}locked{{else}}{{#if progressComplete}}complete{{/if}}{{/if}}">
            {{#if isLocked}}
                <svg>
                    <use xlink:href={{absoluteUrl "packages/ohif_viewerbase/assets/icons.svg#icon-status-lock"}}></use>
                </svg>
            {{else}}
                {{#if progressComplete}}
                    <svg>
                        <use xlink:href={{absoluteUrl "packages/ohif_viewerbase/assets/icons.svg#icon-status-complete"}}></use>
                    </svg>
                {{else}}
                    {{progressText}}
                {{/if}}
            {{/if}}
        </div>
    </div>
</template>
