<div v-if="!settings.hideInfoBlock" class="WorkflowDesignerToolbarBlock Horizontal" style="display: flex; justify-content: space-between">
  <el-tooltip :content="labels.ActivitiesCount">
    <div class="WorkflowDesignerToolbarInfoItem">
      <div class="WorkflowDesignerToolbarIcon ActivityCount RTLIcon"></div>
      <span :style="info.activity > info.activityLimit ? 'color:red' : ''">
          {{ info.activity }}
          {{ info.activityLimit ? (" / " + info.activityLimit) : "" }}
      </span>
    </div>
  </el-tooltip>

  <el-tooltip :content="labels.TransitionsCount">
    <div class="WorkflowDesignerToolbarInfoItem">
      <div class="WorkflowDesignerToolbarIcon TransitionCount RTLIcon"></div>
      <span :style="info.transition > info.transitionLimit ? 'color:red' : ''">
          {{ info.transition }}
          {{ info.transitionLimit ? (" / " + info.transitionLimit) : "" }}
      </span>
    </div>
  </el-tooltip>

  <el-tooltip :content="labels.CommandsCount">
    <div class="WorkflowDesignerToolbarInfoItem">
      <div class="WorkflowDesignerToolbarIcon CommandsCount"></div>
      <span :style="info.command > info.commandLimit ? 'color:red' : ''">
          {{ info.command }}
          {{ info.commandLimit ? (" / " + info.commandLimit) : "" }}
      </span>
    </div>
  </el-tooltip>
</div>
<script type="application/javascript">
    function toolbarinfo_Init(me){
      me.VueConfig.methods.UpdateLanguage = function () {
        me.VueConfig.data = Object.assign(me.VueConfig.data, {
          labels: WorkflowDesignerConstants.ToolbarLabel
        });
      }

      me.VueConfig.methods.UpdateLanguage();
        var data = me.VueConfig.data;

        me.VueConfig.methods.onUpdate = function(){
            data.settings = me.graph.Settings;
            data.info = {
                activity: 0,
                transition: 0,
                command: 0,
                activityLimit: undefined,
                transitionLimit: undefined,
                commandLimit: undefined,
            };

            if (me.graph.data != undefined) {
                data.info.activity = me.graph.data.Activities.length;
                data.info.transition = me.graph.data.Transitions.length;
                data.info.command = me.graph.data.Commands.length;

        if (me.graph.data.AdditionalParams != undefined) {
          var addparams = me.graph.data.AdditionalParams;
          if (addparams.MaxNumberOfActivities != undefined && addparams.MaxNumberOfActivities != -1) {
            data.info.activityLimit = addparams.MaxNumberOfActivities;
          }

          if (addparams.MaxNumberOfTransitions != undefined && addparams.MaxNumberOfTransitions != -1) {
            data.info.transitionLimit = addparams.MaxNumberOfTransitions;
          }

          if (addparams.MaxNumberOfCommands != undefined && addparams.MaxNumberOfCommands != -1) {
            data.info.commandLimit = addparams.MaxNumberOfCommands;
          }
        }
      }
    };
  }
</script>
