{if $view=='all'}
<h2>Образовательные технологии</h2>
<table class="table">
    <thead>
    <tr>
        <th class="col-1" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Позиция строки в таблице, нумеруйте сами для нужной сортировки">Поз.</th>
        <th class="col-10">Название</th>
        <th class="col-1"></th>
    </tr>
    </thead>
    <tbody id="table_body">
    <tr id="tr_0">
        <td><input class="form-control" id="pos_0" value="{$comp.pos}"></td>
        <td><input class="form-control" id="name_0" value="{$comp.name|escape}"></td>
        <td>
            <a href="#" class="btn btn-sm btn-success btnsaveTR" data-id="0" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Обновление строки"><i class="bi bi-save"></i></a>
            <a href="#" class="btn btn-sm btn-danger btndelTR" data-id="0" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Удаление строки"><i class="bi bi-trash"></i></a>
            <input type="HIDDEN" id="idr_0" value="0">
        </td>
    </tr>

    {if count($items)}
    {foreach from=$items item=item name=foo}
    {assign var=it value=$smarty.foreach.foo.iteration}
    <tr id="tr_{$item.id}">
        <td><input class="form-control" id="pos_{$item.id}" value="{$item.pos}"></td>
        <td><input class="form-control" id="name_{$item.id}" value="{$item.name|escape}"></td>
        <td>
            <a href="#" class="btn btn-sm btn-success btnsaveTR" data-id="{$item.id}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Обновление строки"><i class="bi bi-save"></i></a>
            <a href="#" class="btn btn-sm btn-danger btndelTR" data-id="{$item.id}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Удаление строки"><i class="bi bi-trash"></i></a>
            <input type="HIDDEN" id="idr_{$item.id}" value="{$item.id}">
        </td>
    </tr>
    {/foreach}
    {/if}
    </tbody>
</table>

{*<pre>{print_r($items)}</pre>*}
{literal}
<style>
    .inputModal{
        border-bottom: 1px solid #0a53be;
    }
</style>
<script>$(document).ready(function(){
    //Удаление строки
    $(document).on("click", ".btndelTR", function(){
        let id = $(this).data('id');
        let idr = $("#idr_"+id).val();
        $.ajax({url: '/rabprog/obrtech/',cache:false,datatype:'json',method:'post',
            data: 'ajdes=Dele_TR&idr='+idr,
            success:function(data){
                window.ToastShow1("Удаление записи",data.msg,data.err);
                if(data.err!=1) $("#tr_"+id).remove();
            }
        });
        return false;
    });
    //Сохранение строки
    $(document).on("click", ".btnsaveTR", function(){
        let id = $(this).data('id');
        let pos = $("#pos_"+id).val();
        let name = $("#name_"+id).val();
        let idr = $("#idr_"+id).val();
        $.ajax({url: '/rabprog/obrtech/',cache:false,datatype:'json',method:'post',
            data: 'ajdes=Save_TR&pos='+pos+'&name='+name+'&idr='+idr,
            success:function(data){
                window.ToastShow1("Сохранение записи",data.msg,data.err);
                if(data.err!=1) {
                    if(id==0){
                        let tr = add_tr(data.id, pos, name, descrip);
                        $("#table_body").append(tr);
                        let p = parseInt(pos, 10) + 1;
                        $("#pos_"+id).val(p);
                        $("#name_"+id).val(p);
                    }else {
                        $("#idr_" + id).val(data.id);
                    }
                }
            }
        });
        return false;
    });
    function add_tr(id,pos,name,descrip){
        let out = '<tr id="tr_'+id+'">\n' +
            '        <td><input class="form-control" id="pos_'+id+'" value="'+pos+'"></td>\n' +
            '        <td><input class="form-control" id="name_'+id+'" value="'+name+'"></td>\n' +
            '        <td>\n' +
            '            <a href="#" class="btn btn-sm btn-success btnsaveTR" data-id="'+id+'" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Обновление строки"><i class="bi bi-save"></i></a>\n' +
            '            <a href="#" class="btn btn-sm btn-danger btndelTR" data-id="'+id+'" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Удаление строки"><i class="bi bi-trash"></i></a>\n' +
            '            <input type="HIDDEN" id="idr_'+id+'" value="'+id+'">\n' +
            '        </td>\n' +
            '    </tr>';
        return out;
    }
    //Редактирование полей с большим текстом
    var inputEl = null;
    var inputModalEl = null;
    $(document).on("click", ".inputModal",function(){
        inputEl = $(this);
        let val = $(this).val();
        let options = { keyboard: false };
        inputModalEl = new bootstrap.Modal(document.getElementById('InputModal'), options);
        inputModalEl.toggle();
        $("#inputval").val(val);
    });
    $("#inputmodal_save").click(function(){
        inputEl.val($("#inputval").val());
        inputModalEl.hide();
    });

})</script>{/literal}

<div class="modal fade" id="InputModal" tabindex="-1" aria-labelledby="InputModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="InputModalLabel">Редактирование текста в поле ввода</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <textarea class="form-control" id="inputval" style="height:400px;"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
                <button type="button" class="btn btn-primary" id="inputmodal_save">Сохранить</button>
            </div>
        </div>
    </div>
</div>
{/if}