<div
{%
if
widget.hide_on_finish
%}
v-if="(data.{{{widget.widget_id}}}.message || data.{{{widget.widget_id}}}.info) &&
      data.{{{widget.widget_id}}}.status !== 'success'
      "
{%
else
%}
v-if="data.{{{widget.widget_id}}}.message || 
      data.{{{widget.widget_id}}}.info"
{%
endif
%}
>
  <link rel="stylesheet" href="./sly/css/app/widgets/sly_tqdm/style.css" />
  <el-collapse-transition>
    <div
      {%
      if
      widget.hide_on_finish
      %}
      v-show="(data.{{{widget.widget_id}}}.message || data.{{{widget.widget_id}}}.info) &&
            data.{{{widget.widget_id}}}.status !== 'success'
           "
      {%
      else
      %}
      v-show="data.{{{widget.widget_id}}}.message || 
            data.{{{widget.widget_id}}}.info"
      {%
      endif
      %}
    >
      <div style="display: flex; flex-direction: column; cursor: default">
        <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>
  </el-collapse-transition>
</div>
