text: (function () {
      var settings = allure.getPluginSettings('screen-diff', {diffType: 'diff'});
  
      function renderImage(src) {
          return '<div class="screen-diff__container">' +
              '<img class="screen-diff__image" src="data/attachments/' + src + '">' +
              '</div>';
      }
  
      function renderDiffContent(type, data) {
          function findImage(name) {
              if (data.testStage && data.testStage.attachments) {
                  return data.testStage.attachments.filter(function (attachment) {
                      return attachment.name === name;
                  })[0];
              }
              return null;
          }
  
          var diffImage = findImage('diff');
          var actualImage = findImage('actual');
          var expectedImage = findImage('expected');
  
          if (!diffImage && !actualImage && !expectedImage) {
              return '<span>Diff, actual and expected image have not been provided.</span>';
          }
  
          if (type === 'diff') {
              if (!diffImage) {
                  return renderImage(actualImage.source);
              }
              return renderImage(diffImage.source);
          }
          if (type === 'overlay') {
              return '<div class="screen-diff__overlay screen-diff__container">' +
                  '<img class="screen-diff__image" src="data/attachments/' + expectedImage.source + '">' +
                  '<div class="screen-diff__image-over">' +
                  '<img class="screen-diff__image" src="data/attachments/' + actualImage.source + '">' +
                  '</div>' +
                  '</div>';
          }
      }
  
      var ScreenDiffView = Backbone.Marionette.View.extend({
          className: 'pane__section',
          events: {
              'click [name="screen-diff-type"]': 'onDiffTypeChange',
              'mousemove .screen-diff__overlay': 'onOverlayMove'
          },
          templateContext: function () {
              return {
                  diffType: settings.get('diffType')
              }
          },
          template: function (data) {
              var testType = data.labels.filter(function (label) {
                  return label.name === 'testType'
              })[0];
  
              if (!testType || testType.value !== 'screenshotDiff') {
                  return '';
              }
  
              return '<h3 class="pane__section-title">Screen Diff</h3>' +
                  '<div class="screen-diff__content">' +
                  '<div class="screen-diff__switchers">' +
                  '<label><input type="radio" name="screen-diff-type" value="diff"> Show diff</label>' +
                  '<label><input type="radio" name="screen-diff-type" value="overlay"> Show overlay</label>' +
                  '</div>' +
                  renderDiffContent(data.diffType, data) +
                  '</div>';
          },
          adjustImageSize: function (event) {
              var overImage = this.$(event.target);
              overImage.width(overImage.width());
          },
          onRender: function () {
              const diffType = settings.get('diffType');
              this.$('[name="screen-diff-type"][value="' + diffType + '"]').prop('checked', true);
              if (diffType === 'overlay') {
                  this.$('.screen-diff__image-over img').on('load', this.adjustImageSize.bind(this));
              }
          },
          onOverlayMove: function (event) {
              var pageX = event.pageX;
              var containerScroll = this.$('.screen-diff__container').scrollLeft();
              var elementX = event.currentTarget.getBoundingClientRect().left;
              var delta = pageX - elementX + containerScroll;
              this.$('.screen-diff__image-over').width(delta);
          },
          onDiffTypeChange: function (event) {
              settings.save('diffType', event.target.value);
              this.render();
          }
      });
      allure.api.addTestcaseBlock(ScreenDiffView, {position: 'before'});
  })();
  