<!DOCTYPE html>
<!--// $Id$ //-->
<html>
    <head>
        <meta name="GENERATOR" content="LMS {$layout.lmsv}">
        {include file="language.html"}
        <title>LMS – {if $layout.pagetitle != ""}{$layout.pagetitle}{/if}</title>
        {include file="jquery.html" language=Localisation::getCurrentHtmlLanguage() lms_language=Localisation::getCurrentUiLanguage()}
        <link href="css/style.css" rel="stylesheet" type="text/css">
        <script type="text/javascript" src="js/common.js"></script>
        <script type="text/javascript" src="js/autosuggest.js"></script>
    </head>
    <body class="light lms-ui-popup">
        {$xajax}
        <div id="overDiv" style="position:absolute; visibility:hidden; z-index:100;"></div>
        <script type="text/javascript" src="js/overlib.js"></script>
        {if !empty($producers)}
        <div id="autosuggest"><ul></ul></div>
        <form name="search" id="search" method="post" action="?m=choosenetdevmodel">
            <input type="submit" class="hiddenbtn">
            <table id="searchtable" cellpadding="5" width="100%">
                <tr class="dark">
                    <td class="fleftu nobr">
                        <img src="img/producer.gif" alt="">
                        <input type="text" name="search_producer" value="" size="40" onkeyup="document.search.submit();" {tip text="Enter producer name"}>
                    </td>
                </tr>
            </table>
        </form>
        <script type="text/javascript">
		<!--
			var AUTOSUGGEST_MAX_LENGTH = {ConfigHelper::getConfig('phpui.autosuggest_max_length', 40)};
			new AutoSuggest(document.forms['search'], document.forms['search'].elements['search_producer'], '?m=choosenetdevmodel&ajax=1&what=', 1);
		//-->
        </script>
        {/if}
        <table id="modeltable" width="100%" cellpadding="3">
            {if empty($producers)}
            <tr colspan="2">
                <td class="empty-table">
                    {trans("Network device models database is empty.")}
                </td>
            </tr>
            {else}
            <tr class="light" id="producer">
                <td width="1%">{trans("Producer")}:</td>
                <td width="99%">
                    <select id="producer_sel" name="producerid" onchange="change_producer(this)" {tip text="Select producer"} style="width: 100%">
                        <option value="0">{trans('None')}</option>
                        {foreach from=$producers item=item}
                        <option value="{$item.id}"{if $item.id == $data.producerid} selected{/if}>{$item.name}</option>
                        {/foreach}
                    </select>
                </td>
            </tr>
            <tr class="light" id="model" {if empty($models)}style="display: none;"{/if}>
                <td>{trans("Model")}:</td>
                <td>
                    <select id="model_sel" name="modelid" {tip text="Select model"} style="width: 100%">
                        {foreach from=$models item=item}
                        <option value="{$item.id}"{if $item.id == $data.modelid} selected{/if}>{$item.name}</option>
                        {/foreach}
                    </select>
                </td>
            </tr>
            <tr class="light">
                <td colspan="2" align="right" nowrap>
                    <a href="javascript:submit_model()" accesskey="s">{trans("Submit")} <img src="img/save.gif" alt=""></a>
                </td>
            </tr>
            {/if}
        </table>
        <script type="text/javascript">
            <!--

            function change_producer(elem)
            {
                var model = document.getElementById('model');
                model.style.display = 'none';
                xajax_select_producer(elem.value);
            }

            function search_producer(id)
            {
                var producer = document.getElementById('producer_sel');
                producer.options[id].selected = true;
                change_producer(producer);
            }

            function update_models(data)
            {

                var i, len;
                var models_select = document.getElementById('model_sel');

                models_select.options.length = 0;
                for (i = 0, len = data.length; i < len; i++) {
                    models_select.options[models_select.options.length] = new Option(data[i].name, data[i].id);
                }
                if (len > 0) {
                    var models_row = document.getElementById('model');
                    models_row.style.display = '';
                }

                resize_frame();
            }


            function submit_model()
            {
                var producer = document.getElementById('producer_sel');
                var model = document.getElementById('model_sel');
                var loc = window.parent.document.getElementById('location');

                if (producer.value !== '0') {
                    if (producer.value === '') {
                        window.parent.alertDialog($t("Producer is required!"));
                        return;
                    }
                    if (model.value === '') {
                        window.parent.alertDialog($t("Model is required"));
                        return;
                    }
                    netdevmodelform.elements[varname + '[producer]'].value = producer.options[producer.selectedIndex].text;
                    netdevmodelform.elements[varname + '[model]'].value = model.options[model.selectedIndex].text;
                    netdevmodelform.elements[varname + '[netdevicemodelid]'].value = model.value;
                } else {
                    netdevmodelform.elements[varname + '[producer]'].value = '';
                    netdevmodelform.elements[varname + '[model]'].value = '';
                    netdevmodelform.elements[varname + '[netdevicemodelid]'].value = '';
                }


                window.parent.popclick();
            }

            function resize_frame()
            {
                var st = document.getElementById('searchtable');
                var lt = document.getElementById('modeltable');
                var h = (st ? st.offsetHeight : 0) + lt.offsetHeight;

                autoiframe_setsize('autoiframe', 350, Math.max(h, 160));
            }

            var win = window.parent;
            var varname = '{$data.varname}';
            var formname = '{$data.formname}';
            var netdevmodelform = win.document.forms[formname];

            resize_frame();
            //-->
        </script>
    </body>
</html>
