template "widget[@type='ForEach']", mode="widget_defs" {
    param "hmi_element";
    const "widgets", "func:refered_elements($forEach_widgets)[not(@id = $forEach_widgets_ids)]";

    const "class","arg[1]/@value";

    const "base_path","path/@value";
    const "hmi_index_base", "$indexed_hmitree/*[@hmipath = $base_path]";
    const "hmi_tree_base", "$hmitree/descendant-or-self::*[@path = $hmi_index_base/@path]";
    const "hmi_tree_items", "$hmi_tree_base/*[@class = $class]";
    const "hmi_index_items", "$indexed_hmitree/*[@path = $hmi_tree_items/@path]"; 
    const "items_paths", "$hmi_index_items/@hmipath"; 
    |     index_pool: [
    foreach "$hmi_index_items" {
    |       «@index»`if "position()!=last()" > ,`
    }
    |     ],
    |     init: function() {
    const "prefix","concat($class,':')";
    const "buttons_regex","concat('^',$prefix,'[+\-][0-9]+')";
    const "buttons", "$hmi_element/*[regexp:test(@inkscape:label, $buttons_regex)]"; 
    foreach "$buttons" {
        const "op","substring-after(@inkscape:label, $prefix)";
    |         id("«@id»").setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_click('«$op»', evt)");
    }
    |
    |         this.items = [
    const "items_regex","concat('^',$prefix,'[0-9]+')";
    const "unordered_items","$hmi_element//*[regexp:test(@inkscape:label, $items_regex)]";
    foreach "$unordered_items" {
        const "elt_label","concat($prefix, string(position()))"; 
        const "elt","$unordered_items[@inkscape:label = $elt_label]";
        const "pos","position()";
        const "item_path", "$items_paths[$pos]";
    |           [ /* item="«$elt_label»" path="«$item_path»" */
        if "count($elt)=0" error > Missing item labeled «$elt_label» in ForEach widget «$hmi_element/@id»
        foreach "func:refered_elements($elt)[@id = $hmi_elements/@id][not(@id = $elt/@id)]" {
            if "not(func:is_descendant_path(func:widget(@id)/path/@value, $item_path))"
                error > Widget id="«@id»" label="«@inkscape:label»" is having wrong path. Accroding to ForEach widget ancestor id="«$hmi_element/@id»", path should be descendant of "«$item_path»".
    |             hmi_widgets["«@id»"]`if "position()!=last()" > ,`
        }
    |           ]`if "position()!=last()" > ,`
    }
    |         ]
    |     },
    |     item_offset: 0,
    |     on_click: foreach_onclick,
}

template "widget[@type='ForEach']", mode="widget_subscribe"{
    // param "hmi_element";
    |     sub: foreach_subscribe,
    |     unsub: foreach_unsubscribe,
    |     apply_cache: foreach_apply_cache,
}

emit "epilogue:foreach"
||
function foreach_unsubscribe(){
    for(let item of this.items){
        for(let widget of item) {
            unsubscribe.call(widget);
        }
    }
    this.offset = 0;
}

function foreach_widgets_do(new_offset, todo){
    this.offset = new_offset;
    for(let i = 0; i < this.items.length; i++) {
        let item = this.items[i];
        let orig_item_index = this.index_pool[i];
        let item_index = this.index_pool[i+this.item_offset];
        let item_index_offset = item_index - orig_item_index;
        for(let widget of item) {
            todo.call(widget, new_offset + item_index_offset);
        }
    }
}

function foreach_subscribe(new_offset=0){
    foreach_widgets_do.call(this, new_offset, subscribe);
}

function foreach_apply_cache() {
    foreach_widgets_do.call(this, this.offset, widget_apply_cache);
}

function foreach_onclick(opstr, evt) {
    new_item_offset = eval(String(this.item_offset)+opstr)
    if(new_item_offset + this.items.length > this.index_pool.length) {
        if(this.item_offset + this.items.length == this.index_pool.length)
            new_item_offset = 0;
        else
            new_item_offset = this.index_pool.length - this.items.length;
    } else if(new_item_offset < 0) {
        if(this.item_offset == 0)
            new_item_offset = this.index_pool.length - this.items.length;
        else
            new_item_offset = 0;
    }
    this.item_offset = new_item_offset;
    off = this.offset;
    foreach_unsubscribe.call(this);
    foreach_subscribe.call(this,off);
    update_subscriptions();
    need_cache_apply.push(this);
    jumps_need_update = true;
    requestHMIAnimation();
}

||