edit attachments

app/partials/views/modules/attachments.jade

@@ -17,6 +17,24 @@ section.attachments
                     span.attachment-size (125kb.)
                 a.settings.icon.icon-edit(href="","Edit")
                 a.settings.icon.icon-drag-v(href="","Drag")
+
+        div.single-attachment.edit
+            div.attachment-name
+                span.icon.icon-document
+                a(href="", title="Attachment pefildeusuario.png") pefildeusuariopefildeusuariopefildeusuario.png
+            div.editable.editable-attachment-comment
+                input(type="text")
+            div.editable.editable-attachment-deprecated
+                label
+                    input(type="checkbox")
+                    span Deprecated?
+            div.editable.attachment-delete
+                a.icon.icon-delete(href="#")
+            div.attachment-comment
+                span Comentario sobre el contenido
+                span.attachment-size (125kb.)
+            a.settings.icon.icon-edit(href="","Edit")
+            a.settings.icon.icon-drag-v(href="","Drag")
         a.more-attachments(href="", title="show atachments history")
             span + show atachments history
             span.more-attachments-num (3 more)

app/styles/modules/attachments.scss

@@ -23,6 +23,7 @@
 .single-attachment {
     @include table-flex();
     @extend %small;
+    align-items: center;
     border-bottom: 1px solid #cdcdcd;
     padding: 1rem 0 1rem 1rem;
     position: relative;
@@ -49,7 +50,50 @@
         color: $gray-light;
         display: none;
     }
+    .editable {
+        @include table-flex-child(10, 300px);
+        display: none;
+    }
+    .attachment-delete {
+        @include table-flex-child(1, 10px);
+    }
+    .icon-delete {
+        @extend %large;
+        color: $gray-light;
         &:hover {
+            color: $red;
+        }
+    }
+    .editable-attachment-deprecated {
+        padding-left: 1rem;
+        span {
+            color: $gray-light;
+        }
+        input {
+            margin-right: .5rem;
+            &:checked {
+                + span {
+                    color: $grayer;
+                }
+            }
+        }
+    }
+    .editable-attachment-comment {
+        input {
+            color: $white;
+        }
+    }
+    &.edit {
+        .settings,
+        .attachment-comment {
+            display: none;
+        }
+        .editable {
+            display: block;
+        }
+    }
+    &:hover {
+        &:not(.edit) {
             @include transition (background .2s ease-in);
             background: lighten($green-taiga, 60%);
             .settings {
@@ -66,6 +110,7 @@
                 right: 1rem;
             }
         }
+    }
 }
 
 .more-attachments {