-# The body editor is a React island.
- content_for :scripts do
  = javascript_include_tag 'react_islands', defer: true

- draft = @post.new_record? || @post.draft?
- autosave = { createUrl: posts_path, updateUrl: (post_path(@post.id) if @post.persisted?), subjectId: 'post_subject' }

= bootstrap_form_for(@post, html: { class: 'post-edit-page' }) do |f|
  .row
    .col-12.col-lg-8.mb-3
      .card.white.z-depth-1
        .card-header
          - if content_for? :title
            %h1.h2-responsive
              %strong=yield :title
          - if draft
            %span.badge.text-bg-warning.me-2 Draft
            %span.text-muted.small Only you can see this draft until you publish it.
          - if @post.errors.any?
            #error_explanation
              %h2
                = pluralize(@post.errors.size, "error")
                prohibited this post from being saved:
              %ul
                - @post.errors.full_messages.each do |msg|
                  %li= msg

        .card-body
          = f.text_field :subject, autofocus: 'autofocus', maxlength: 255

          - if @post.forum || @forum
            = label_tag :body, "What's up?"
          - else
            = label_tag :body, "What's going on in your food garden?"
          -# Falls back to the plain textarea if the editor script does not load.
          - editor_props = { name: 'post[body]', value: @post.body.to_s, previewUrl: preview_posts_path,
            canAddPhoto: can?(:create, Photo), photos: post_photo_props(@post), cardPhotoId: @post.card_photo_id,
            postPath: (post_path(@post.id) if @post.persisted?) }
          - editor_props[:autosave] = autosave if draft
          = react_component('PostEditor', editor_props) do
            = f.text_area :body, rows: 12, label: false
          %span.form-text
            Use the buttons above to format your text. Type
            %strong @
            to link to a crop, a member or one of your plantings.
            For anything else, the
            %strong Markdown
            tab shows the raw text.

          - if @post.forum || @forum
            - forum = @post.forum || @forum
            %p
              This post will be posted in the forum
              = link_to forum.name, forum
            .field
              = f.hidden_field :forum_id, value: forum.id

    - if @post.new_record?
      .col-lg-4
        %section.card.mb-3{ 'aria-label': 'Photos' }
          .card-body
            %p.text-muted.small.mb-0
              Use <strong>+ Flickr photo</strong> in the toolbar to put a photo in your post. Its card photo and photos
              appear here when you next open the draft.
    - if @post.persisted?
      .col-lg-4
        %section.card.mb-3{ 'aria-label': 'Card photo' }
          .card-header
            %h2.h5.mb-0 Card photo
          .card-body
            - if (card_photo = @post.default_photo)
              = image_tag card_photo.thumbnail_url, class: 'img-fluid mb-2', alt: card_photo.title
              %p.text-muted.small Shown on the posts list, your page and shared links.
            - else
              %p.text-muted.small Add a photo, then choose which one stands for this post.
            - if @post.photos.any?
              = react_component('CardPhotoDialog', card_photo_dialog_props(@post))

        %section.card.mb-3{ 'aria-label': 'Photos in this post' }
          .card-header.d-flex.justify-content-between
            %h2.h5.mb-0 Photos
            - if can?(:create, Photo)
              = link_to 'pick from flickr', new_photo_path_for(@post), data: photo_dialog_data(@post),
                class: 'btn btn-sm btn-outline-secondary'
          .card-body
            .index-cards
              - @post.photos.each do |photo|
                = render 'photos/thumbnail', photo: photo
            %p.text-muted.small.mb-0 These are photos from your Flickr account.

  .post-save-bar.d-flex.flex-wrap.align-items-center.gap-2
    %p.text-muted.small.mb-0.me-auto
      - if draft
        Saved automatically as you work. Close this page and pick it up later from your posts.
    - if draft && @post.persisted?
      = link_to 'Discard draft', post_path(@post), method: :delete, data: { confirm: t('are_you_sure') },
        class: 'btn btn-outline-danger'
    - if @post.persisted?
      = link_to 'Close', post_path(@post), class: 'btn btn-outline-secondary'
    - if draft
      = button_tag 'Save draft', name: 'post[draft]', value: 'true', class: 'btn btn-outline-primary'
      = button_tag 'Publish post', name: 'post[draft]', value: 'false', class: 'btn btn-primary'
    - else
      = f.submit 'Save changes', class: 'btn btn-primary'