panel/app/views/posts/attributes/_content.haml

.form-group
  = label_tag "post_#{attribute}", post_label_t(attribute, post: post)
  = render 'posts/attribute_feedback',
    post: post, attribute: attribute, metadata: metadata

  .editor
    = text_area_tag "post[#{attribute}]", '',
      dir: dir, lang: locale,
      **field_options(attribute, metadata), class: 'd-none'

    .editor-toolbar
      .editor-primary-toolbar.scrollbar-black
        %button.btn{ data: { button: 'bold' } }= t('editor.bold')
        %button.btn{ data: { button: 'italic' } }= t('editor.italic')
        %button.btn{ data: { button: 'deleted' } }= t('editor.deleted')
        %button.btn{ data: { button: 'underline' } }= t('editor.underline')
        %button.btn{ data: { button: 'mark' } }= t('editor.mark')
        %button.btn{ data: { button: 'h1' } }= t('editor.h1')
        %button.btn{ data: { button: 'h2' } }= t('editor.h2')
        %button.btn{ data: { button: 'h3' } }= t('editor.h3')
        %button.btn{ data: { button: 'h4' } }= t('editor.h4')
        %button.btn{ data: { button: 'h5' } }= t('editor.h5')
        %button.btn{ data: { button: 'h6' } }= t('editor.h6')
        %button.btn{ data: { button: 'ul' } }= t('editor.ul')
        %button.btn{ data: { button: 'ol' } }= t('editor.ol')
        %button.btn{ data: { button: 'left' } }= t('editor.left')
        %button.btn{ data: { button: 'center' } }= t('editor.center')
        %button.btn{ data: { button: 'right' } }= t('editor.right')
        %button.btn{ data: { button: 'img' } }= t('editor.img')
        %button.btn{ data: { button: 'video' } }= t('editor.video')
        %button.btn{ data: { button: 'audio' } }= t('editor.audio')
        %button.btn{ data: { button: 'pdf' } }= t('editor.pdf')

      -#
        HAML cringe
        TODO: generar IDs para labels
      .editor-auxiliary-toolbar.scrollbar-black{ data: { editor: { auxiliary: { toolbar: '' } } } }
        .form-group{ data: { editor: { auxiliary: 'mark' } } }
          %label{ for: 'mark-color' }= t('editor.color')
          %input{ type: 'color', data: { prop: 'mark-color' } }/

        %div{ data: { editor: { auxiliary: 'img' } } }
          .row
            .col.form-group.d-flex.align-items-end
              .custom-file
                %input.custom-file-input{ type: 'file', data: { prop: 'img-file' }, accept: 'image/*' }/
                %label.custom-file-label{ for: 'img-file' }= t('editor.file.img')
            .col.form-group
              %label{ for: 'img-alt' }= t('editor.description')
              %input.form-control{ type: 'text', data: { prop: 'img-alt' } }/

        -# https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers
        .form-group{ data: { editor: { auxiliary: 'audio' } } }
          .custom-file
            %input.custom-file-input{ type: 'file', data: { prop: 'audio-file' }, accept: 'audio/flac,audio/mp4,audio/ogg,audio/webm,audio/mp3' }/
            %label.custom-file-label{ for: 'audio-file' }= t('editor.file.audio')

        .form-group{ data: { editor: { auxiliary: 'video' } } }
          .custom-file
            %input.custom-file-input{ type: 'file', data: { prop: 'video-file' }, accept: 'video/mp4,video/ogg,video/webm' }/
            %label.custom-file-label{ for: 'video-file' }= t('editor.file.video')

        .form-group{ data: { editor: { auxiliary: 'pdf' } } }
          .custom-file
            %input.custom-file-input{ type: 'file', data: { prop: 'pdf-file' }, accept: 'application/pdf' }/
            %label.custom-file-label{ for: 'pdf-file' }= t('editor.file.pdf')

        .form-group{ data: { editor: { auxiliary: 'link' } } }
          %label{ for: 'link-href' }= t('editor.url')
          %input.form-control{ type: 'url', data: { prop: 'link-href' } }/

    .editor-content.form-control.h-auto{ contenteditable: 'true' }
      = metadata.value.html_safe