<link rel="stylesheet" href="/sly/css/app/widgets/sly_tqdm/style.css"/>


<div>
    <div style="display: flex; flex-direction: column">
        <div style="display: flex; flex-direction: row; justify-content: space-between;
                      margin: 5px 0">
            <div v-if="data.{{{widget.widget_id}}}.message" class="progress-title">
                {{ data.{{{widget.widget_id}}}.message }}
            </div>
            <div v-if="data.{{{widget.widget_id}}}.info" class="progress-title" style="margin: 0 0;">
                {{ data.{{{widget.widget_id}}}.info }}
            </div>
        </div>


        <el-progress
                v-if="data.{{{widget.widget_id}}}.show_percents"
                class="custom-line"
                     :show-text="true"
                     :text-inside="true"
                     :stroke-width="18"
                :percentage="data.{{{widget.widget_id}}}.percent" :status="data.{{{widget.widget_id}}}.status">
        </el-progress>
        <el-progress
                v-else
                class="custom-line"
                     :show-text="false"
                :percentage="data.{{{widget.widget_id}}}.percent" :status="data.{{{widget.widget_id}}}.status">
        </el-progress>
    </div>
</div>
