<ivdnt class="ivdnt">
    <div class="row">
        <div class="col s6">
            <h5>{data.label}</h5>
        </div>
        <div class="col s6 text-right">
            <a class="btn btn-flat"
                    target="_blank"
                    href={opts.settings.bonito_url +
                            "view?q=s" + query.conc +
                            (query.sample ? ("&q=r" + query.sample) : "") +
                            "&q=g" + query.conc +
                            "&q=L" + query.conc + "+-" + data.id +
                            "&corpname=" + opts.settings.corpname +
                            "&annotconc=" + query.conc}>
                annotate label
            </a>
            <a class="btn btn-floating btn-flat" onclick={close}>
                <i class="material-icons">close</i>
            </a>
        </div>
    </div>
    <div class="row no-bottom-margin">
        <div class="col s2" style="position: relative;">
            <label class="active" for="type"
                    style="position: absolute; top: -1.2rem;">Label type</label>
            <select class="browser-default" name="type" onchange={onptypeselect}>
                <option each={t in ["normal", "idiom", "proverb", "formula"]}
                        selected={t == label.type}>{t}</option>
            </select>
        </div>
        <div class="col s2 input-field">
            <input type="text" name="attitude" id="attitude" oninput={oninput}
                    onblur={autosave}
                    value={label.attitude} list="attitudes" />
            <label for="attitude" class="active">Attitude</label>
        </div>
        <div class="col s2 input-field">
            <input type="text" name="style" id="style" oninput={oninput}
                    onblur={autosave}
                    value={label.style} list="styles" />
            <label for="style" class="active">Style</label>
        </div>
        <div class="col s2 input-field">
            <input type="text" name="domain" id="domain" oninput={oninput}
                    onblur={autosave}
                    value={label.domain} list="domains" />
            <label for="domain" class="active">Domain</label>
        </div>
        <div class="col s2" style="position: relative;">
            <label class="active" for="variant"
                    style="position: absolute; top: -1.2rem;">Variant</label>
            <select class="browser-default" name="variant"
                    onchange={onvtypeselect} id="variant">
                <option value=""  selected={!label.variant}></option>
                <option each={v in variants} value={v.value}
                        selected={v.value == label.variant}>{v.text}</option>
            </select>
        </div>
        <div class="col s2" style="position: relative;">
            <label class="active" for="auxiliary"
                    style="position: absolute; top: -1.2rem;">Auxiliary</label>
            <select class="browser-default" name="auxiliary"
                    onchange={onatypeselect} id="auxiliary">
                <option value="" selected={!label.auxiliary}></option>
                <option each={a in auxiliaries} value={a}
                        selected={a == label.auxiliary}>{a}</option>
            </select>
        </div>
    </div>
    <table class="table">
        <tbody>
            <tr>
                <th></th>
                <td class="pointer slotid {idx == active_slot ? "active" : ""}"
                        onclick={selectSlot}
                        each={slot, idx in label.slots}>{idx+1}</td>
            </tr>
            <tr>
                <th style="width: 10rem;">Function</th>
                <td class="{palette[slot.type]}" each={slot, idx in label.slots}
                        onclick={selectSlot}>
                    <select class="browser-default"
                            name="type" onchange={ontypeselect}>
                        <option each={t in types} value={t.type}
                                selected={slot.type == t.type}>{t.str}</option>
                    </select>
                </td>
                <td if={label.slots.length < 21}>
                    <a href="javascript:void(0);" onclick={add_slot}>
                        <i class="material-icons">add</i>
                    </a>
                </td>
            </tr>
            <tr>
                <th>Semantic type</th>
                <td each={slot, idx in label.slots} class="{palette[slot.type]}"
                        onclick={selectSlot}>
                    <div each={st, idx2 in slot.semtype}
                            if={slot.type != "aux" && slot.type != "head" && slot.type != "se" && slot.type != "svp"}>
                        <input type="text" value={slot.semtype[idx2]}
                                name="semtype"
                                onkeyup={move_subslot.bind(this, slot.semtype, idx2, slot.semtype.length)}
                                list="semtypes"
                                style="width: 75%; margin-bottom: 0;"
                                onblur={autosave}
                                data-idx={idx} oninput={oninput} />
                        <a href="javascript:void(0);"
                                if={idx2 == slot.semtype.length-1}
                                onclick={add_subslot.bind(this, idx, idx2, "semtype")}>
                            <i class="material-icons tiny">add</i>
                        </a>
                        <a href="javascript:void(0);" if={idx2 > 0 && idx2 == slot.semtype.length-1}
                                onclick={del_subslot.bind(this, idx, idx2, "semtype")}>
                            <i class="material-icons tiny">delete</i>
                        </a>
                    </div>
                </td>
            </tr>
            <tr>
                <th>Fixed element</th>
                <td each={slot, idx in label.slots} class={palette[slot.type]}
                        onclick={selectSlot}>
                    <div if={slot.type != "head"}>
                        <input type="text" style="width: 50%;" data-idx={idx}
                                value={slot.fixed} name="fixed"
                                onblur={autosave}
                                oninput={oninput} />
                    </div>
                </td>
            </tr>
            <tr>
                <th>Dummy</th>
                <td each={slot, idx in label.slots} class={palette[slot.type]}
                        onclick={selectSlot}>
                    <div each={du, idx2 in slot.dummies}>
                        <input type="text" value={slot.dummies[idx2]}
                                name="dummies"
                                onkeyup={move_subslot.bind(this, slot.dummies, idx2, slot.dummies.length)}
                                list="vc_dummies"
                                style="width: 75%; margin-bottom: 0;"
                                onblur={autosave}
                                data-idx={idx} oninput={oninput} />
                        <a href="javascript:void(0);"
                                if={idx2 == slot.dummies.length-1}
                                onclick={add_subslot.bind(this, idx, idx2, "dummies")}>
                            <i class="material-icons tiny">add</i>
                        </a>
                        <a href="javascript:void(0);"
                                if={idx2 > 0 && idx2 == slot.dummies.length-1}
                                onclick={del_subslot.bind(this, idx, idx2, "dummies")}>
                            <i class="material-icons tiny">delete</i>
                        </a>
                    </div>
                </td>
            </tr>
            <tr>
                <th>Lexical set</th>
                <td each={slot, idx in label.slots} class={palette[slot.type]}
                        onclick={selectSlot}>
                    <div each={ls, idx2 in slot.lexset}
                            style="margin-bottom: .2rem;"
                            if={slot.type != "head" && slot.type != "aux"}>
                        <input type="text" value={slot.lexset[idx2]}
                                name="lexset"
                                onkeyup={move_subslot.bind(this, slot.lexset, idx2, slot.lexset.length)}
                                style="width: 75%; margin-bottom: 0;"
                                onblur={autosave}
                                data-idx={idx} oninput={oninput} />
                        <a href="javascript:void(0);"
                                if={idx2 == slot.lexset.length-1}
                                onclick={add_subslot.bind(this, idx, idx2, "lexset")}>
                            <i class="material-icons tiny">add</i>
                        </a>
                        <a href="javascript:void(0);" if={idx2 > 0 && idx2 == slot.lexset.length-1}
                                onclick={del_subslot.bind(this, idx, idx2, "lexset")}>
                            <i class="material-icons tiny">delete</i>
                        </a>
                    </div>
                </td>
            </tr>
            <tr>
                <th></th>
                <td each={slot, idx in label.slots} class={palette[slot.type]}
                        onclick={selectSlot}>
                    <div if={slot.type != "head"}>
                        <input type="checkbox" id="opt_{idx}" checked={slot.opt}
                                name="opt" onchange={onoptcheck} />
                        <label class="active" for="opt_{idx}">Opt</label>
                        <input type="checkbox" id="or_{idx}" checked={slot.or}
                                name="or"
                                onchange={onorcheck} if={idx < label.slots.length-1 || slot.or}/>
                        <label class="active" for="or_{idx}"
                                if={idx < label.slots.length-1 || slot.or}>OR</label>
                    </div>
                </td>
            </tr>
            <tr>
                <th></th>
                <td each={slot, idx in label.slots} class={palette[slot.type]}
                        onclick={selectSlot}>
                    <a href="javascript:void(0);" class="btn-flat btn-floating"
                            onclick={move_left} if={idx}>
                        <i class="material-icons">arrow_back</i>
                    </a>
                    <a href="javascript:void(0);" class="btn-flat btn-floating"
                            onclick={del_slot}>
                        <i class="material-icons">delete</i>
                    </a>
                    <a href="javascript:void(0);" class="btn-flat btn-floating"
                            style="float: right;"
                            onclick={move_right} if={idx<label.slots.length-1}>
                        <i class="material-icons">arrow_forward</i>
                    </a>
                </td>
            </tr>
        </tbody>
    </table>
    <div class="row">
        <div class="col s12 m6">
            <label class="active" for="meaning">Meaning</label>
            <input type="text" name="meaning" id="meaning" oninput={oninput}
                    onblur={autosave}
                    value={label.meaning} />
        </div>
        <div class="col s12 m6">
            <label class="active" for="synonym">Synonym</label>
            <input type="text" name="synonym" id="synonym" oninput={oninput}
                    onblur={autosave}
                    value={label.synonym} />
        </div>
    </div>
    <div class="row" each={ex, idx in (label.examples && label.examples.length) ? label.examples : [1]}>
        <div class="col s4">
            <label class="active" for="example_text_{idx}">Example {idx+1}
                <span class={blue-text: ex.toknum > -1}
                        title={opts.settings.corpname + ":" + ex.toknum}
                        if={ex.toknum && ex.toknum > -1}>linked</span></label>
                <span class="exattrs red-text" if={ex.domain || ex.style || ex.attitude}>
                    {((ex.domain || "") + " " + (ex.style || "") + " " + (ex.attitude || "")).trim(" ")}
                </span>
            <input type="text" name="example.text" oninput={oninput}
                    onblur={autosave}
                    id="example_text_{idx}" value={ex.text} data-idx={idx} />
        </div>
        <div class="col s2">
            <label class="active"
                    for="example_lexitem_{idx}">Lexical item {idx+1}</label>
            <input type="text" name="example.lexitem" oninput={oninput}
                    onblur={autosave}
                    id="example_lexitem_{idx}" value={ex.lexitem}
                    data-idx={idx} />
        </div>
        <div class="col s2">
            <label class="active">Slot</label>
            <select class="browser-default" onchange={onetypeselect}>
                <option selected={ex.slotid < 0}></option>
                <option each={slot, idx2 in label.slots}
                        value={idx2}
                        selected={ex.slotid == idx2}>{slot.type} ({idx2+1})</option>
            </select>
        </div>
        <div class="col s4">
            <a href="javascript:void(0);" onclick={add_example}
                    class="btn btn-flat" style="position: relative; top: 1.2em;">Add</a>
            <a href="javascript:void(0);" if={label.examples && label.examples.length}
                    onclick={del_example.bind(this, idx)}
                    class="btn btn-flat" style="position: relative; top: 1.2em;">Del</a>
            <a href="javascript:void(0);" onclick={show_pragma_menu}
                    class="btn btn-flat"
                    style="position: relative; top: 1.2em;">Pragmatics</a>
        </div>
        <div class="col s12" if={show_pragma == idx} style="padding: 1rem 0.75rem 1rem 4rem; position: relative;">
            <div class="col s2 input-field">
                <input name="example.attitude" id="example.attitude" oninput={oninput}
                        data-idx={idx}
                        onblur={autosave} value={ex.attitude} list="attitudes" />
                <label for="example.attitude" class="active">Attitude</label>
            </div>
            <div class="col s2 input-field">
                <input name="example.style" id="example.style" oninput={oninput}
                        data-idx={idx}
                        onblur={autosave} value={ex.style} list="styles" />
                <label for="example.style" class="active">Style</label>
            </div>
            <div class="col s2 input-field">
                <input type="text" name="example.domain" id="example.domain" oninput={oninput}
                        data-idx={idx}
                        onblur={autosave} value={ex.domain} list="domains" />
                <label for="example.domain" class="active">Domain</label>
            </div>
            <div class="col s2">
                <label class="active" for="example.variant"
                        style="position: absolute; top: -1.2rem;">Variant</label>
                <select class="browser-default" name="example.variant"
                        data-idx={idx}
                        onchange={onevtypeselect} id="example.variant">
                    <option value="" selected={!ex.variant}></option>
                    <option each={v in variants} value={v.value}
                            selected={v.value == ex.variant}>{v.text}</option>
                </select>
            </div>
        </div>
        <input type="hidden" name="example.toknum" value={ex.toknum} data-idx={idx} />
    </div>
    <div class="row">
        <div class="col s12 m6">
            <label class="active" for="comment">Comment</label>
            <input type="text" name="comment" id="comment" oninput={oninput}
                    onblur={autosave}
                    value={label.comment} />
        </div>
    </div>
    <div class="row">
        <div class="col s12">
            <p>Created on <em>{data.created}</em>,
            by <em>{data.creator}</em>,
            last edited on <em>{data.edited}</em>,
            by <em>{data.editor}</em>.</p>
        </div>
    </div>

    <datalist id="semtypes">
        <option each={st in semtypes} value={st} />
    </datalist>
    <datalist id="attitudes">
        <option each={att in attitudes} value={att} />
    </datalist>
    <datalist id="styles">
        <option each={sty in styles} value={sty} />
    </datalist>
    <datalist id="domains">
        <option each={dom in domains} value={dom} />
    </datalist>
    <datalist id="vc_dummies">
        <option each={vcd in vc_dummies} value={vcd} />
    <datalist>

    <style scoped>
        .exattrs {
            font-size: 0.8rem;
        }
        select.browser-default {
            margin: 0 0 20px 0;
        }
        table.table {
            table-layout: fixed;
            margin-bottom: 1rem;
        }
        tbody tr th,
        tbody tr td {
            vertical-align: top;
            border-radius: 0;
        }
        select {
            border: none;
            height: 2.3rem;
            outline: none;
            background-color: #EEE;
        }
        .s4.input-field div input {
            margin-bottom: 0.5em;
        }
        .text-right {
            text-align: right;
        }
        h6 {
            font-size: 1.2rem;
            font-variant: small-caps;
            font-weight: bold;
        }
        input {
            height: 2.2rem !important;
        }
        .sub {
            font-size: 80%;
        }
        [type="checkbox"] + label {
            padding-left: 1.5em !important;
        }
        .row {
            margin-bottom: 1em;
        }
        .input-field label.active,
        label {
            color: black;
        }
        .btn-floating i {
            color: #666;
        }
    </style>

    <script>
        this.edited = false
        this.skematag = this.root.parentNode.parentNode.parentNode.parentNode._tag
        this.styles = this.opts.settings.model.styles
        this.attitudes = this.opts.settings.model.attitudes
        this.auxiliaries = ["hebben", "zijn"]
        this.domains = this.opts.settings.model.domains
        this.medium = this.opts.settings.model.medium
        this.semtypes = this.opts.settings.model.semtypes
        this.data = this.opts.data
        this.label = this.opts.data.data
        this.query = this.opts.query
        this.types = [
            {type: "subject",      clr: "red lighten-4",         str: "Subject"},
            {type: "aux",          clr: "indigo lighten-3",      str: "Auxiliary"},
            {type: "head",         clr: "deep-purple lighten-4", str: "Head"},
            {type: "object",       clr: "light-blue lighten-4",  str: "Object"},
            {type: "indir_obj",    clr: "green lighten-4",       str: "Indirect object"},
            {type: "pc",           clr: "yellow lighten-4",      str: "Prepositional object"},
            {type: "ppc",          clr: "purple lighten-4",      str: "Preliminary prepositional object"},
            {type: "se",           clr: "blue lighten-4",        str: "Reflexive zich"},
            {type: "predc",        clr: "teal lighten-4",        str: "Predicative complement"},
            {type: "me",           clr: "lime lighten-4",        str: "Measure complement"},
            {type: "ld",           clr: "orange lighten-4",      str: "Location_direction complement"},
            {type: "svp",          clr: "deep-orange lighten-4", str: "Separated verbal part"},
            {type: "vc_dat_of",    clr: "amber lighten-4",       str: "VC dat of"},
            {type: "vc",           clr: "grey lighten-2",        str: "Verbal complement"},
            {type: "svp_part mwe", clr: "brown lighten-4",       str: "Separated part mwe"},
            {type: "predm",        clr: "grey lighten-4",        str: "Predicative modifier"},
            {type: "mod",          clr: "grey lighten-3",        str: "Adverbial"},
            {type: "psubject",     clr: "",                      str: "Preliminary subject"},
            {type: "poctbject",    clr: "",                      str: "Preliminary object"},
            {type: "nn",           clr: "",                      str: "Not specified"}
        ]
        this.vc_dummies = ["vc_inf", "vc_ti", "vc_oti", "vc_om te inf",
                "vc_ahi", "vc_dat", "vc_of", "vc_qw", "vc_als-zin",
                "vc_alsof-zin", "vc_rhd", "quote"
        ]
        this.active_slot = -1
        this.active_slot_type = ""
        this.palette = {}
        for (var i=0; i<this.types.length; i++) {
            this.palette[this.types[i].type] = this.types[i].clr
        }
        this.variants = [
            {"text": "(vooral) in Nederland", "value": "N"},
            {"text": "(vooral) in België", "value": "B"}
        ]
        this.template = {
            "variant": "",
            "auxiliary": "",
            "type": "",
            "head": "",
            "attitude": "",
            "style": "",
            "domain": "",
            "slots": [
                {
                    "type": "subject",
                    "opt": false,
                    "dummies": ["iemand"],
                    "semtype": ["Human", "Institution"],
                    "lexset": [""],
                    "or": false,
                    "fixed": ""
                },
                {
                    "type": "head", 
                    "opt": false,
                    "dummies": [""],
                    "semtype": [""],
                    "lexset": [""],
                    "or": false,
                    "fixed": ""
                }
            ],
            "comment": "",
            "meaning": "",
            "examples": [
                {
                    "text": "",
                    "toknum": -1,
                    "lexitem": "",
                    "slotid": -1,
                    "type": "",
                    "variant": "",
                    "style": "",
                    "domain": "",
                    "attitude": ""
                }
            ],
            "synonym": ""
        }

        sortExamples() {
            this.label.examples.sort(function (a, b) {
                if (a.hasOwnProperty("slotid") && a.slotid >= 0) {
                    if (b.hasOwnProperty("slotid") && a.slotid >= 0) {
                        return a.slotid - b.slotid
                    }
                    else {
                        return 1
                    }
                }
                else {
                    return -1
                }
            }.bind(this))
        }

        autosave() {
            this.edited && this.save()
        }

        save() {
            $.ajax({
                url: cgi + '/save_label',
                type: "POST",
                data: "qid=" + this.data.qid + "&lid=" + this.data.id + "&data=" + encodeURIComponent(JSON.stringify(this.label)) + "&corpname=" + this.opts.settings.corpname,
                success: function(payload) {
                    this.edited = false
                }.bind(this),
                error: (payload) => {
                    console.log('ERROR', payload.error)
                    this.edited = false
                },
                complete: function () {
                    this.skematag.tags.labels.labels_loaded = ""
                    this.skematag.tags.labels.loadLabels(this.query.query)
                    this.update()
                }.bind(this)
            })
        }

        if (!this.label.hasOwnProperty('slots')) {
            this.label = JSON.parse(JSON.stringify(this.template))
            this.save()
        }

        exCheck() {
            let ls = localStorage.getItem('SKEMA_NEW_EXAMPLE')
            if (ls) {
                let jls = JSON.parse(ls)
                if (jls.example && jls.annotconc && jls.annotconc == this.query.conc
                        && jls.label && jls.label == this.data.label
                        && jls.corpname && this.opts.settings.corpname == jls.corpname
                        && jls.toknum) {
                    let ne = {
                        text: jls.example,
                        toknum: jls.toknum,
                        slotid: this.active_slot,
                        lexitem: "",
                        type: this.active_slot_type,
                        variant: "",
                        attitude: "",
                        style: "",
                        domain: ""
                    }
                    if (this.label.examples.length && !this.label.examples[this.label.examples.length-1].text.trim()) {
                        this.label.examples[this.label.examples.length-1] = ne
                    }
                    else {
                        this.label.examples.push(ne)
                    }
                    this.sortExamples()
                    this.save()
                }
                localStorage.removeItem('SKEMA_NEW_EXAMPLE')
            }
            ls = localStorage.getItem('TBLEX_EXAMPLE')
            if (ls) {
                let jls = JSON.parse(ls)
                if (jls.annotconc && jls.annotconc == this.query.conc
                        && jls.corpname && this.opts.settings.corpname == jls.corpname
                        && jls.linegroup_id == this.data.id
                        && jls.coll && jls.toknum) {
                    let ne = {
                        text: jls.example,
                        toknum: jls.toknum,
                        slotid: this.active_slot,
                        lexitem: jls.coll,
                        type: this.active_slot_type,
                        variant: "",
                        attitude: "",
                        style: "",
                        domain: ""
                    }
                    if (this.label.examples.length && !this.label.examples[this.label.examples.length-1].text.trim()) {
                        this.label.examples[this.label.examples.length-1] = ne
                    }
                    else {
                        this.label.examples.push(ne)
                    }
                    this.sortExamples()
                    this.save()
                }
                localStorage.removeItem('TBLEX_EXAMPLE')
            }
        }
        window.exCheckInterval && clearInterval(window.exCheckInterval)
        window.exCheckInterval = setInterval(this.exCheck, 1000)

        onatypeselect(e) {
            this.label.auxiliary = e.target.value
            this.save()
        }

        onevtypeselect(e) {
            this.label.examples[e.item.idx].variant = e.target.value
            this.save()
        }

        onvtypeselect(e) {
            this.label.variant = e.target.value
            this.save()
        }

        onptypeselect(e) {
            this.label.type = e.target.value
            this.save()
        }

        ontypeselect(e) {
            if (e.target.value == "head" || e.target.value == "aux") {
                this.label.slots[e.item.idx].lexset = [""]
            }
            this.label.slots[e.item.idx].type = e.target.value
            this.save()
        }

        onetypeselect(e) {
            this.label.examples[e.item.idx].type = this.label.slots[parseInt(e.target.value)].type
            this.label.examples[e.item.idx].slotid = parseInt(e.target.value)
            this.sortExamples()
            this.save()
        }

        onorcheck(e) {
            this.label.slots[e.item.idx].or = e.target.checked
            this.save()
        }

        onoptcheck(e) {
            this.label.slots[e.item.idx].opt = e.target.checked
            this.save()
        }

        selectSlot(e) {
            this.active_slot = e.item.idx
            this.active_slot_type = e.item.slot.type
        }

        show_pragma_menu(e) {
            if (!this.show_pragma || this.show_pragma == -1) {
                this.show_pragma = e.item.idx
            }
            else {
                this.show_pragma = -1
            }
        }

        oninput(e) {
            this.edited = true
            let idx = e.target.dataset.idx ? e.target.dataset.idx : null
            let idx2 = e.item ? e.item.idx2 : null
            let name = e.target.name
            if (name == "meaning" && e.target.value == " ") {
                // use the current pattern string from labels tag
                let lbs = this.skematag.tags.labels.labels
                let lbi = this.skematag.tags.labels.opened_label
                this.label.meaning = lbs[lbi].pattern_string_flat
            }
            else if (name.indexOf("example") == 0) {
                if (!this.label.examples || !this.label.examples.length) this.label.examples = [{}]
                let exitem = e.target.name.split('.')[1]
                this.label.examples[idx][exitem] = e.target.value
                if (["style", "variant", "domain", "attitude"].indexOf(exitem) < 0) {
                    this.label.examples[idx].toknum = -1 // invalidate link to corpus
                }
            }
            else {
                if (name == "semtype" || name == "lexset" || name == "dummies") {
                    this.label.slots[idx][name][idx2] = e.target.value
                }
                else if (idx === null) {
                    this.label[name] = e.target.value
                }
                else {
                    this.label.slots[idx][name] = e.target.value
                }
            }
        }

        close() {
            clearInterval(window.exCheckInterval)
            this.skematag.tags.labels.opened_label = -1
            this.skematag.label = {}
            this.skematag.update()
        }

        unused_slot() {
            let used_slot_types = new Array()
            for (let i=0; i<this.label.slots.length; i++) {
                used_slot_types.push(this.label.slots[i].type)
            }
            for (let i=0; i<this.types.length; i++) {
                if (used_slot_types.indexOf(this.types[i].type) < 0) {
                    return this.types[i].type
                }
            }
            return ""
        }

        move_right(e) {
            let idx = e.item.idx
            var x = this.label.slots[idx]
            this.label.slots[idx] = this.label.slots[idx+1]
            this.label.slots[idx+1] = x
            for (let i=0; i<this.label.examples.length; i++) {
                if (this.label.examples[i].slotid) {
                    if (this.label.examples[i].slotid == idx) {
                        this.label.examples[i].slotid = idx+1
                    }
                    else if (this.label.examples[i].slotid == idx+1) {
                        this.label.examples[i].slotid = idx
                    }
                }
            }
            if (idx+1 == this.label.slots.length-1) {
                this.label.slots[idx+1].or = false
            }
            this.sortExamples()
            this.save()
        }

        move_subslot(slot, i, l, e) {
            if (e.altKey) {
                if (e.keyCode == 38) { // up
                    if (i > 0) {
                        let b = slot[i-1]
                        slot[i-1] = slot[i]
                        slot[i] = b
                        this.save()
                    }
                }
                else if (e.keyCode == 40) { // down
                    if (i < l-1) {
                        let b = slot[i+1]
                        slot[i+1] = slot[i]
                        slot[i] = b
                        this.save()
                    }
                }
            }
        }

        move_left(e) {
            let idx = e.item.idx
            var x = this.label.slots[idx]
            this.label.slots[idx] = this.label.slots[idx-1]
            this.label.slots[idx-1] = x
            for (let i=0; i<this.label.examples.length; i++) {
                if (this.label.examples[i].slotid) {
                    if (this.label.examples[i].slotid == idx) {
                        this.label.examples[i].slotid = idx-1
                    }
                    else if (this.label.examples[i].slotid == idx-1) {
                        this.label.examples[i].slotid = idx
                    }
                }
            }
            this.sortExamples()
            this.save()
        }

        del_slot(e) {
            for (let i=0; i<this.label.examples.length; i++) {
                if (this.label.examples[i].slotid && this.label.examples[i].slotid == e.item.idx) {
                    this.label.examples[i].slotid = -1
                    this.label.examples[i].type = ""
                }
            }
            this.label.slots.splice(e.item.idx, 1)
            this.save()
        }

        del_example(idx, e) {
            this.label.examples.splice(idx, 1)
            this.save()
        }

        add_example(e) {
            if (!this.label.examples) this.label.examples = []
            let new_ex = JSON.parse(JSON.stringify(this.template.examples[0]))
            this.label.examples.push(new_ex)
        }

        add_slot(e) {
            let new_slot = JSON.parse(JSON.stringify(this.template.slots[0]))
            new_slot.type = this.unused_slot()
            if (new_slot.type != "subject") {
                new_slot.dummies = [""]
                new_slot.semtype = [""]
            }
            this.label.slots.push(new_slot)
        }

        add_subslot(idx, idx2, name, e) {
            window.focus_after = [idx, name, e.target]
            this.label.slots[idx][name].push("")
        }

        del_subslot(idx, idx2, name, e) {
            this.label.slots[idx][name].splice(idx2, 1)
            this.save()
        }

        this.on('updated', function () {
            // focus the newly added input box
            if (window.focus_after) {
                let tri = 0
                if (window.focus_after[1] == "semtype") tri = 2
                if (window.focus_after[1] == "dummies") tri = 4
                if (window.focus_after[1] == "lexset")  tri = 5
                let tdi = window.focus_after[0] + 2
                let el = $(`table.table tr:nth-child(${tri}) td:nth-child(${tdi}) div`)
                el.last().find('input').focus()
                window.focus_after = null
            }
        })
    </script>
</ivdnt>
