<table class='table'>
              <tbody v-for="(area, index) in form.services_catalogs_areas_attributes">
                <tr>
                  <td colspan=2 align="left">
                      <font-awesome-icon :icon="area.icon" v-if="area.icon"/>
                    {{area.name}}
                  </td>
                  <td>
                    {{area.description}}
                  </td>
                  <td colspan=2 align="right">
                    <b-btn variant="link" @click="addItem(index)" >Add Item</b-btn>
                    <b-btn variant="link" @click="removeArea(index)" >Remove area</b-btn>
                  </td>
                </tr>
                <tr v-for="(item, item_index) in area.services_catalogs_items_attributes">
                  <td style="padding-left: 45px;">
                    <b-input-group left="@" v-if="!item.confirmed">
                      <b-input v-model='item.name' placeholder="Name" />
                    </b-input-group>
                    <span v-if="item.confirmed">
                      {{item.name}}
                    </span>
                  </td>
                  <td>
                    <the-mask class="form-control" mask="##:##" type="text" v-model="item.end_time" placeholder="End time" :masked='true' v-if="!item.confirmed" ></the-mask>
                    <span v-if="item.confirmed">
                      {{item.end_time}}
                    </span>
                  </td>
                  <td>
                    <the-mask class="form-control" mask="##:##" type="text" v-model="item.start_time" placeholder="Start time" :masked='true'  v-if="!item.confirmed" ></the-mask>
                    <span v-if="item.confirmed">
                      {{item.start_time}}
                    </span>
                  </td>
                  <td>
                      <the-mask class="form-control" mask="##:##" type="text" v-model="item.effort_time" :masked='true' placeholder="Effort time" v-if="!item.confirmed" ></the-mask>
                      <span v-if="item.confirmed">
                        {{item.effort_time}}
                      </span>
                    </td>
                  <td width="25%" align="right">
                    <b-btn variant="link" v-if="!item.confirmed" @click="confirmItem(index, item_index)" >Confirm</b-btn>
                    <b-btn variant="link" @click="removeItem(index, item_index)" >Remove Item</b-btn>
                  </td>
                </tr>
              </tbody>
          </table>