div.recursiveList
div.right(v-if='toggle_formats')
span(v-for='f in formats' style='padding-left: 50px')
a( href='#' @click="setFormat(f)")
b.text-xs(v-if='myFormat === f') {{f}}
span.text-xs(v-else) {{f}}
hr
div(style='float: left')(v-else)
a(v-if='myFormat==="List"' @click.prevent='setFormat("Tree")')
v-btn.btn-primary(x-small icon)
v-icon(small) edit
span(v-show='title')
u
h4 {{title}} [{{selected_count}} / {{total_count}} selected]
span(style='color:green; font-weight: bold' v-show='edits.turnedOn.length') Add: {{edits.turnedOnName.join(', ')}}
span(style='color:red; font-weight: bold' v-show='edits.turnedOff.length') Remove: {{edits.turnedOffName.join(', ')}}
span(v-if="newItems && promptNew")
b.unknown {{newItems}}
i New {{options.label}} option(s) available:
span {{Object.keys(newItem).join(', ')}}
div(v-if='myFormat==="List"')
v-layout.justify-left
ul(style='list-style-type: none; text-align: left')
li(v-if='!currentList || !currentList.length') Nothing selected in list yet
li(v-for='picked in currentList') {{picked.alias || picked.name}}
span(v-if='options.annotations && options.annotations[picked.id]' style='color: black') {{options.annotations[picked.id]}}
div(v-else-if='myFormat==="Tree"')
v-layout.justify-left
ul(style='list-style-type: none; text-align: left;')
li(v-for="item in reOrderedList" v-show="openItems['id' + item.parent_id] === true" :style='spacing(item)')
span(v-if="selectable")
span(v-if='edits.turnedOn && (edits.turnedOn.indexOf(item[idKey]) >=0)')
a(href='#' @click.prevent="deselectMe(item)")
span
//- v-btn.btn-danger(x-small)
v-icon(name='minus' small) remove
v-icon(color='green' small) check_circle
span(v-else-if='edits.turnedOff && (edits.turnedOff.indexOf(item[idKey]) >=0)')
a(href='#' @click.prevent="selectMe(item)")
span
//- v-btn.btn-danger(x-small)
v-icon(name='minus' small) remove
v-icon(color='green' small) cancel
span(v-else-if='select[item[idKey]]')
a(href='#' @click.prevent="deselectMe(item)")
span
//- v-btn.btn-danger(x-small)
v-icon(name='minus' small) remove
v-icon(color='green' small) check
span(v-else-if='newItem[nameKey]')
a(href='#' @click.prevent="selectMe(item)")
span
v-icon.midline(name='plus' color='orange' small) help
span(v-else)
a(href='#' @click.prevent="selectMe(item)")
span
//- v-btn.btn-primary(x-small)
v-icon(name='plus' small) add
v-icon(color='red' small) close
span(v-if='edits.turnedOn.indexOf(item[idKey]) >= 0')
a(href='#' v-if='onClick' @click.prevent="myClick(item)")
b(style='color:green') {{item.alias || item[nameKey]}}
b(v-else style='color:green') {{item.alias || item[nameKey]}}
span(v-else-if='edits.turnedOff.indexOf(item[idKey]) >= 0')
a(href='#' v-if='onClick' @click.prevent="myClick(item)")
b(style='color:orange') {{item.alias || item[nameKey]}}
b(v-else style='color:orange') {{item.alias || item[nameKey]}}
span(v-else-if='select[item[idKey]]')
a(href='#' v-if='onClick' @click.prevent="myClick(item)")
b(style='color:blue') {{item.alias || item[nameKey]}}
b(v-else style='color:blue') {{item.alias || item[nameKey]}}
span(v-else-if='isAlive[item.id]')
a(href='#' v-if='onClick' @click.prevent="myClick(item)")
span(style='color:green') {{item[nameKey]}}
span(v-else style='color:green') {{item.alias || item[nameKey]}}
span(v-else-if='newItem[nameKey]')
a(href='#' v-if='onClick' @click.prevent='myClick(item)')
b(style='color:orange') {{item[nameKey]}}
b(style='color:orange' v-else) go {{item.alias || item[nameKey]}}
span(v-else)
a(v-if='onClick' @click.prevent='myClick(item)')
span(style='color:red') {{item[nameKey]}}
span(v-else style='color:red') go {{item.alias || item[nameKey]}}
span(v-if='options.annotations && options.annotations[item[idKey]]' style='color: black') {{options.annotations[item[idKey]]}}
//- Additional (optional) clickable link following item
span(v-if='onSecondarySelect && showSecondarySelect')
a(href='#' v-if='onSecondarySelect' @click.prevent='mySecondarySelect(item)')
b {{selectText}}
span(v-else-if='showSecondarySelect')
a(href='#' v-if='onSecondarySelect' @click.prevent='mySecondarySelect(item)')
b {{selectText}}
span(v-else-if='!selectable')
//- Read only
b {{item[nameKey]}}
span
a(href='#' @click.prevent="toggleProgeny(item.id)" v-if="openItems['id' + item.id] && under[item.id]")
v-icon.midline(name='compress') zoom_out
a(href='#' @click.prevent="toggleProgeny(item.id)" v-if="openItems['id' + item.id] === false && under[item.id]")
span.expand-text (+ {{choseUnder[item.id].length}}/{{under[item.id].length}})
v-icon.midline(name='expand') zoom_in
p
v-row.justify-left
v-btn.btn.btn-primary(v-if='saveOnChange && (edits.turnedOn.length || edits.turnedOff.length)' @click.prevent='saveChanges()' small) Save {{edits.turnedOn.length + edits.turnedOff.length}} Changes:
v-btn.btn.btn-primary(v-else-if='myFormat==="Tree"' @click.prevent='setFormat("List")' x-small icon)
v-icon() expand_less
v-row.justify-space-around(v-if='!onChange')
b.added(v-if='edits.turnedOn.length' style="color: green") Added: {{edits.turnedOnName.join(', ')}}
b.removed(v-if='edits.turnedOff.length' style="color: orange") Removed: {{edits.turnedOffName.join(', ')}}
v-row(v-if='debug')
h6 L: {{list}}
h6 S: {{select}}
v-dialog(v-model='showListItem')
v-card
v-card-text
h3 Dialog: here
slot