Add remove CLIN button

js/components/forms/to_form.js

@@ -51,6 +51,12 @@ export default {
       ++this.clinIndex
     },
 
+    removeClin: function(clinIndex) {
+      if (this.clins > 0) {
+        console.log('removed CLIN')
+      }
+    },
+
     calculateClinAmounts: function(event) {
       this.clinChildren[event.id] = {
         amount: event.amount,

styles/sections/_task_order.scss

@@ -203,18 +203,6 @@
       }
     }
 
-    button.icon-link {
-      margin-top: 0;
-      margin-left: 0;
-      padding-left: 0;
-      font-size: $base-font-size;
-
-      &.icon-link__add-another-clin {
-        margin-top: 0;
-        margin-bottom: 0;
-      }
-    }
-
     .task-order__pdf-help-text {
       margin-bottom: 4 * $gap;
     }
@@ -257,6 +245,21 @@
       font-style: italic;
     }
   }
+
+  button.icon-link {
+    margin-top: 0;
+    margin-left: 0;
+    padding-left: 0;
+    font-size: $base-font-size;
+
+    &.icon-link__remove-clin {
+      margin: 0;
+      padding: 0;
+      right: $gap * 1.5;
+      position: absolute;
+      color: $color-gray;
+    }
+  }
 }
 
 .task-order__modal-cancel {
@@ -270,6 +273,7 @@
 
 .clin-card {
   width: 62rem;
+  position: relative;
 
   &__title.h4 {
     margin-top: 0;

templates/task_orders/step_3.html

@@ -27,7 +27,16 @@
     {% endif %}
     inline-template>
     <div class="clin-card">
-      <div class="card__title h4" v-html='clinTitle'></div>
+      <div class="card__title">
+        <span class="h4" v-html='clinTitle'></span>
+        <button
+          v-if='$parent.clins > 0'
+          class="icon-link icon-link__remove-clin"
+          v-on:click="$parent.removeClin(clinIndex)"
+          type="button">
+          {{ Icon(name='x') }}
+        </button>
+      </div>
       <div class="card">
         <div class="form-row">
           <div class="h4 clin-card__title">