mixin File(config)
  .border.px-2.rounded-3.d-flex.flex-between-center.bg-white.dark__bg-1000.my-1.fs-10
    span.fs-8(class=config.icon)
    span.ms-2=config.title
    a.text-300.p-1.ms-6(href="#!" data-bs-toggle="tooltip" data-bs-placement="right" title="Detach")
      span.fas.fa-times


mixin Compose
  form.card&attributes(attributes)
    .card-header.bg-body-tertiary
      h5.mb-0 New message

    .card-body.p-0
      .border.border-top-0.border-200
        input#email-to.form-control.border-0.rounded-0.outline-none.px-x1(type='email', aria-describedby='email-to', placeholder='To')
      .border.border-y-0.border-200
        input#email-subject.form-control.border-0.rounded-0.outline-none.px-x1(type='text', aria-describedby='email-subject', placeholder='Subject')
      .min-vh-50.email-compose-textarea
        textarea.tinymce.d-none(data-tinymce name='content' )
      .bg-body-tertiary.px-x1.py-3
        .d-inline-flex.flex-column
          +File({
            title: 'winter.jpg (873kb)',
            icon: 'far fa-image'
          })
          +File({
            title: 'coffee.zip (342kb)',
            icon: 'far fa-file-archive'
          })
    .card-footer.border-top.border-200.d-flex.flex-between-center
      .d-flex.align-items-center
        button.btn.btn-primary.btn-sm.px-5.me-2(type='submit') Send
        input#email-attachment.d-none(type='file')
        label.me-2.btn.btn-tertiary.btn-sm.mb-0.cursor-pointer(for='email-attachment' data-bs-toggle="tooltip" data-bs-placement="top" title="Attach files")
          span.fas.fa-paperclip.fs-8(data-fa-transform='down-2')
        input#email-image.d-none(type='file' accept='image/*')
        label.btn.btn-tertiary.btn-sm.mb-0.cursor-pointer(for='email-image' data-bs-toggle="tooltip" data-bs-placement="top" title="Attach images")
          span.fas.fa-image.fs-8(data-fa-transform='down-2')
      .d-flex.align-items-center
        .dropdown.font-sans-serif.me-2.btn-reveal-trigger
          button.btn.btn-link.text-600.btn-sm.dropdown-toggle.btn-reveal.dropdown-caret-none#email-options(type='button' data-bs-toggle="dropdown" data-boundary="viewport" aria-haspopup="true" aria-expanded="false" )
            span.fas.fa-ellipsis-v(data-fa-transform='down-2')
          .dropdown-menu.dropdown-menu-end.border.py-2(aria-labelledby='email-options')
            a(href='#!').dropdown-item Print
            a(href='#!').dropdown-item Check spelling
            a(href='#!').dropdown-item Plain text mode
            .dropdown-divider
            a(href='#!').dropdown-item Archive
        button.btn.btn-tertiary.btn-sm(type='button' data-bs-toggle="tooltip" data-bs-placement="top" title="Delete")
          span.fas.fa-trash