%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-5.m-5.md:m-12.lg:m-20
  .flex.flex-col.text-center
    %h1.text-4xl Edit your profile

.flex.justify-center.m-5.m-5.md:m-12.lg:m-20
  .flex.flex-col.text-center{class: "w-full md:w-10/12"}
    The Picture box is landscape with ratio 3/4.
    = simple_form_for @member  do |f|
      .grid.grid-cols-1.md:grid-cols-2.gap-10
        = render "merged/form/editor" , object: @member , field: :bio, form: f
        .info.mr-8
          .text-red-700= f.error_notification
          = f.input :name
          .flex.h-16.mt-2.col-span-2
            = image_tag(@member.picture_url , class: "align-middle mr-4") if @member.picture?
            .w-full= f.input :picture , as: :file ,
            label: (@member.picture.blank? ? "Add picture" : "Change picture")
            = f.hidden_field :picture_cache
          .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