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

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

  .editor{ id: attribute }
    -# Esto es para luego decirle al navegador que se olvide estas cosas.
    = hidden_field_tag 'storage_keys[]', "#{request.original_url}##{attribute}", data: { target: 'storage-key' }
    .alert.alert-info
      :markdown
        #{t('editor.alert')}
    = text_area_tag "#{base}[#{attribute}]", '',
      dir: dir, lang: locale,
      **field_options(attribute, metadata), class: 'd-none'

    .editor-toolbar
      .editor-primary-toolbar.scrollbar-black
        %button.btn{ data: { editor: { button: 'mark-bold' } } }= t('editor.bold')
        %button.btn{ data: { editor: { button: 'mark-italic' } } }= t('editor.italic')
        %button.btn{ data: { editor: { button: 'mark-deleted' } } }= t('editor.deleted')
        %button.btn{ data: { editor: { button: 'mark-underline' } } }= t('editor.underline')
        %button.btn{ data: { editor: { button: 'mark-super' } } }= t('editor.super')
        %button.btn{ data: { editor: { button: 'mark-sub' } } }= t('editor.sub')
        %button.btn{ data: { editor: { button: 'mark-mark' } } }= t('editor.mark')
        %button.btn{ data: { editor: { button: 'mark-link' } } }= t('editor.link')
        %button.btn{ data: { editor: { button: 'block-h1' } } }= t('editor.h1')
        %button.btn{ data: { editor: { button: 'block-h2' } } }= t('editor.h2')
        %button.btn{ data: { editor: { button: 'block-h3' } } }= t('editor.h3')
        %button.btn{ data: { editor: { button: 'block-h4' } } }= t('editor.h4')
        %button.btn{ data: { editor: { button: 'block-h5' } } }= t('editor.h5')
        %button.btn{ data: { editor: { button: 'block-h6' } } }= t('editor.h6')
        %button.btn{ data: { editor: { button: 'block-unordered_list' } } }= t('editor.ul')
        %button.btn{ data: { editor: { button: 'block-ordered_list' } } }= t('editor.ol')
        %button.btn{ data: { editor: { button: 'parentBlock-left' } } }= t('editor.left')
        %button.btn{ data: { editor: { button: 'parentBlock-center' } } }= t('editor.center')
        %button.btn{ data: { editor: { button: 'parentBlock-right' } } }= t('editor.right')
        //%button.btn{ data: { editor: { button: 'multimedia' } } }= t('editor.multimedia')

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

        %div{ data: { editor: { auxiliary: 'multimedia' } } }
          .row
            .col-12.col-lg.form-group.d-flex.align-items-end
              .custom-file
                %input.custom-file-input{ type: 'file', data: { prop: 'multimedia-file' }, }/
                %label.custom-file-label{ for: 'multimedia-file' }= t('editor.file.multimedia')
              %button.btn{ type: 'button', data: { prop: 'multimedia-file-upload' }, }= t('editor.file.multimedia-upload')
            .col-12.col-lg.form-group
              %label{ for: 'multimedia-alt' }= t('editor.description')
              %input.form-control{ type: 'text', data: { prop: 'multimedia-alt' } }/

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

      .editor-aviso-word.alert.alert-info
        %p= t('editor.word')

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