import Component from 'ember-component';
import computed, { reads } from 'ember-computed';
import { equal } from 'ember-computed';
import { htmlSafe } from 'ember-string';
import get from 'ember-metal/get';
import layout from '../templates/components/nypr-brick-item';

export default Component.extend({
  layout,
  classNames: ['brick__item'],
  classNameBindings: ['item.attributes.template'],
  attributeBindings: ['style'],
  
  style: computed('backgroundImage', function() {
    return htmlSafe(`background-image: ${get(this, 'backgroundImage')}`);
  }),
  pk: reads('item.id'),
  vertical: equal('template', 'vertical'),
  backgroundImage: computed.reads('item.attributes.imageMain.url')
});

@@ -445,92 +445,15 @@
 uted
-('backgroundImage', function() %7B%0A    return htmlSafe(%60background-image: $%7Bget(this, 
+.reads(
 'bac
@@ -470,17 +470,8 @@
 ge')
-%7D%60);%0A  %7D)
 ,%0A  
@@ -562,22 +562,16 @@
 computed
-.reads
 ('item.a
@@ -594,14 +594,204 @@
 ain.url'
+, function() %7B%0A    let backgroundImage = get(this, 'item.attributes.imageMain.url');%0A    if (backgroundImage) %7B%0A      return htmlSafe(%60background-image: url($%7BbackgroundImage%7D);%60);%0A    %7D%0A  %7D
 )%0A%7D);%0A

return backgrounImage as html safe