volunteers/app/views/members/edit.html.haml

%script{:src => "https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"}
%script{:src => "https://cdn.jsdelivr.net/npm/marked/marked.min.js"}

.flex.justify-center.m-20
  .flex.flex-col
    %h1.text-4xl Editing profile

= simple_form_for @member  do |f|
  = f.error_notification

  .grid.grid-cols-4.mx-20
    .info.mr-8
      = f.input :name
      .grid.grid-cols-2.gap-10
        = f.input :arrived
        = f.input :left
      = f.input :public , label: "Public: (Click box below)"
      = f.input :picture , as: :file , label: (@member.picture.blank? ? "Add picture" : "Change picture")
      .flex.justify-center.actions.m-10
        = f.button :button, "Update", class: button_classes + " bg-cyan-200"
        = link_to  member_path(@member) do
          %button.ml-10{type: :submit, class: button_classes}
            Back
    .field.flex.flex-col.pr-2.border-r-8.border-slate-600
      = f.text_area :bio ,rows: 18 , "v-model" => "markdown" , class: "appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
    %div.h-90
      -if @member.picture_url
        %div.overflow-hidden.ml-2.mr-8
          = image_tag @member.picture_url, class: "object-contain w-full"
      -else
        No Picture
    .preview.prose
      %b.text-2xl Preview
      %div{"v-html" => "compiledMarkdown"}
:ruby2js
  class Mark < Vue
    options el: '.grid'
    def initialize
      @markdown = "#{@member.bio.to_s.html_safe}"
    end
    def compiledMarkdown
      marked.parse(@markdown)
    end
  end