var m = require('mithril');
var utils = require('./utils');
var MESSAGES = JSON.parse(require('raw!./messages.json'));

var Footer = {};

Footer.view = function(ctrl) {
    return m('', [
        m(
            'ul.provider-footer.col-xs-12.col-lg-10.col-lg-offset-1',
            {
                style: {
                    'list-style-type': 'none'
                }
            },
            ctrl.renderProviders()
        ),
        m('.row', m('.col-md-12', {style: 'padding-top: 30px;'}, m('span', m.trust(MESSAGES.ABOUTSHARE))))
    ]);
};

Footer.controller = function(vm) {
    var self = this;
    self.vm = vm;

    self.renderProvider = function(result, index) {

        return m('li.provider-filter', {
                onclick: function(cb){
                    self.vm.query(self.vm.query() === '' ? '*' : self.vm.query());
                    self.vm.showFooter = false;
                    utils.updateFilter(self.vm, 'source:' + result.short_name);
                }
            },
            m('', [
                m('img', {
                    src: result.favicon,
                    style: {
                        width: '16px',
                        height: '16px'
                    }
                }), ' ',
                result.long_name]
             )
        );
    };

    self.renderProviders = function() {
        return self.vm.showFooter ? $.map(self.vm.sortProviders(), self.renderProvider) : null;
    };
};

module.exports = Footer;

@@ -195,40 +195,9 @@
   m(
-%0A            'ul.provider-footer
+'
 .col
@@ -243,18 +243,62 @@
         
-%7B%0A
+m('ul.provider-footer',%0A                %7B%0A    
         
@@ -306,32 +306,36 @@
        style: %7B%0A
+    
                 
@@ -372,34 +372,42 @@
                 
-%7D%0A
+    %7D%0A    
             %7D,%0A 
@@ -397,32 +397,36 @@
              %7D,%0A
+    
             ctrl
@@ -444,16 +444,30 @@
 iders()%0A
+            )%0A
         

fix styling so that it works well in webpack as well