<ul uk-accordion> <li v-for="(server, index) of availableServers(routeData)" @mouseover="editRouteSelectedServer = server" :key="`server-${server.id}-${routeData.user.id}`"> <div class="uk-accordion-title esm-text-color-white clickable" :style="{ 'border-bottom': '1px solid #1E354D', 'padding-bottom': '0.5em' }"> {{ server.name }} <div class="uk-float-right"> <button type="button" class="uk-button uk-button-small esm-button-danger" @click="ajaxDeleteAllTypes(routeData, server)">Delete all</button> </div> </div> <div class="uk-accordion-content"> <table class="uk-table uk-table-small uk-table-striped uk-table-middle"> <tbody> <tr v-for="type of availableTypes(server)" :key="type.id"> <td style="width: 1%;"> <div class="uk-inline-block" style="margin-top: 3px;"> <label class="uk-switch uk-light" :uk-tooltip="typeTooltip('enable', type, routeData)"> <input type="checkbox" v-model="type.enabled" :value="type.enabled" @click="ajaxUpdateRouteType(type)" v-if="type.editable"> <div class="uk-switch-slider uk-switch-on-off round"></div> </label> </div> </td> <td class="uk-width-expand" :class="{ 'esm-text-subtle': !type.editable }"> <span class="esm-text-color-white">{{ type.name }}</span> <br> <small class="esm-text-color-red" v-if="!type.editable"> <i>Pending acceptance</i> </small> </td> <td style="width: 1%;"> <button type="button" class="uk-button uk-button-small esm-button-danger" :uk-tooltip="typeTooltip('delete', type, routeData)" @click="ajaxDeleteRoute(routeData, type)" > Delete </button> </td> </tr> </tbody> </table> </div> </li> </ul>