= javascript_include_tag "merged/vue.min.js"
= javascript_include_tag "marked.min.js"

.flex.justify-center.m-20
  .flex.flex-col
    %h1 Editing member

= simple_form_for @member , builder: SimpleForm::Tailwind::FormBuilder do |f|
  = f.error_notification

  .grid.grid-cols-3.gap-10.mx-20
    = f.input :name
    = f.input :public
    = f.input :picture , as: :file
    .preview.prose
      %b.text-2xl Preview
      %div{"v-html" => "compiledMarkdown"}
    .field.flex.flex-col
      = f.text_area :bio ,rows: 15 , "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
      -if @member.picture_url
        %div.overflow-hidden
          .my-5 Currently
          = image_tag @member.picture_url, class: "object-contain h-40"
      -else
        No Picture
  .flex.justify-center.actions.m-10
    = f.button :button, "Get started", class: "w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
    .ml-20= link_to 'Back', member_path(@member)

:ruby2js
  class Mark < Vue
    options el: '.grid'
    def initialize
      @markdown = "#{@member.bio.to_s.html_safe}"
    end
    def compiledMarkdown
      marked.parse(@markdown)
    end
  end