#app
#errors(v-show="errors")
.error(v-for="(error, key) in errors" @click="removeError(key)") {{ error }}
#content
#services
.tile(v-if="tiles" v-for="tile in tiles" :style="tile.grid")
component(:is="tile.service.type" :emit="tile.emiter" :auth="tile.service.auth" :options="tile.options")
button#showManager(@click="toggleManager") {{ managerButton }}
#manager(v-show="showManager")
.newService
//TODO: change to select
input(v-model="newService" @keyup.enter="addService" placeholder="service")
#layout-select
.layout(v-for="(layout, id) in layouts.get().data")
template(v-if="layouts.get().selectedId == id")
input(:value="layout.name" @keyup.ctrl.delete="removeSelectedLayout()"
@keyup.enter="renameSelectedLayout($event.target.value)")
button(v-else @click="selectLayout(id)") {{ layout.name }}
.layout
button(@click="addLayout") +
.showService
select(@change="showService($event.target.value)")
option(selected disabled) ---
option(v-for="(service, key) in services.get()" :value="key")
| {{ service.name || service.type }}