<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>