%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 Edit your profile

= simple_form_for @member  do |f|

  .flex.justify-center
    .column{class: "w-11/12 md:w-10/12 lg:w-8/12 xl:w-6/12"}
      .grid.grid-cols-1.md:grid-cols-2.mx-20.gap-10
        = render "merged/form/editor" , object: @member , field: :bio, form: f
        .info.mr-8
          .text-red-700= f.error_notification
          = f.input :name
          .grid.grid-cols-2.gap-10
            = f.input :arrived
            = f.input :left
          .flex.h-16.mt-2
            = image_tag(@member.picture_url , class: "align-middle mr-2") if @member.picture?
            = f.input :picture , as: :file , input_html: {wrapper_class: "w-full"},
            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