#app.mt-40
  .flex.justify-center
    = #@image.attributes

  .flex.justify-center
    .p-20
      {{ back }}
    %a.p-20.underline{ e_click: "bg_change(200)" , r_class: 'back'}
      {{ text1 }}
    %a.p-20.underline{ e_click: "bg_change(100)" , r_class: 'back'}
      {{ text2 }}
:opal
  class Clicker < VueR::Application
    def bg_change(num)
      self.state = num
    end
    def back
      'bg-cyan-' + self.state.to_s
    end
    def text1
      "click for dark"
    end
    def text2
      "click for light"
    end
  end

  click = Clicker.new( state: 200)
  click.mount("#app")