[%site_config.title = c.loc('Device Management') -%]
[% UNLESS framed -%]
<div class="row">
    <span>
        <a class="btn btn-primary btn-large" href="[% c.uri_for('/back') %]"><i class="icon-arrow-left"></i> [% c.loc('Back') %]</a>
    </span>
</div>
[% back_created = 1 -%]
[% END -%]

<script>
function typeDynamicFields(selectedValue){
    $('.ngcp-devicetype').css("display","none");
    $('.ngcp-devicetype-'+selectedValue).css("display","block");
    if(selectedValue == 'phone'){
        vendor2bootstrapMethod();
    }
}
function bootstrapDynamicFields(selectedValue){
    $('.ngcp-bootstrap-config').css("display","none");
    $('.ngcp-bootstrap-config-'+selectedValue).css("display","block");
}
function type2formFields(){
    var typeFields = document.getElementsByName('type');
    var typeField;
    if(typeFields && typeFields.length){
        typeField = typeFields[0];//we will use default defined in Perl module to show linked fields
        if(typeField){
            var type = typeField.options[typeField.selectedIndex].value;
            typeDynamicFields(type);
        }
    }
}
function vendor2bootstrapMethod(vendorField){
    var bootstrapMethodField;
    if(!vendorField){//initial load - no vendor field passed at all
        bootstrapMethodFields = document.getElementsByName('bootstrap_method');
        if(bootstrapMethodFields && bootstrapMethodFields.length){
            bootstrapMethodField = bootstrapMethodFields[0];//we will use default defined in Perl module to show linked fields
            vendorField = bootstrapMethodField.form['vendor'];//for load after error - we will check if it's value isn't empty
        }
    }else{
       bootstrapMethodField = vendorField.form['bootstrap_method'];
    }
    var bootstrapMethod='';
    if(vendorField && vendorField.value){//onchange and on load after error
        var vendor = vendorField.value.toLowerCase();
        switch(vendor){
            case "cisco":
                bootstrapMethod = 'http';
                break;
            ;
            default:
                bootstrapMethod = 'redirect_'+vendor;
                break;
            ;
        }
        if(bootstrapMethod){
            var length = bootstrapMethodField.options.length;
            var found = false;
            for(var i=0; i < length; i++){
                if(bootstrapMethodField.options[i].value == bootstrapMethod){
                    bootstrapMethodField.options[i].selected = true;
                    found = true;
                    break;
                }
            }
            if(!found){
                bootstrapMethod = '';
            }
        }
    }
    if((!bootstrapMethod) && bootstrapMethodField){ //as said above - for initial load, to use Perl defined select default to show linked fields
        bootstrapMethod = bootstrapMethodField.options[bootstrapMethodField.selectedIndex].value;
    }
    bootstrapDynamicFields(bootstrapMethod);
}
$( document ).ready(function() {
    type2formFields();
});
</script>

<div class="row">
    [% FOREACH m IN messages -%]
        <div class="alert alert-[% m.type %]">[% m.text %]</div>
    [% END -%]
</div>

<div class="ngcp-separator"></div>

<div class="accordion" id="device_details">

    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#device_details" href="#collapse_devmod">[% c.loc('Device Models') %]</a>
        </div>
        <div class="accordion-body collapse" id="collapse_devmod">
            <div class="accordion-inner">
                [% UNLESS c.user.read_only -%]
                <span>
                    <a class="btn btn-primary btn-large" href="[% c.uri_for('/device/model/create') %]"><i class="icon-star"></i> [% c.loc('Create Device Model') %]</a>
                </span>
                <div class="ngcp-separator"></div>
                [% END -%]
[%
    helper.name = c.loc('Device Model');
    helper.identifier = 'device_model';
    helper.data = devmod;
    helper.dt_columns = devmod_dt_columns;
    helper.length_change = 1;

    helper.close_target = close_target;
    helper.create_flag = devmod_create_flag;
    helper.edit_flag = devmod_edit_flag;
    helper.form_object = form;
    helper.ajax_uri = c.uri_for('/device/model/ajax');

    helper.dt_buttons = [
            { name = c.loc('Front Image'), uri = "/device/model/'+full.id+'/frontimage", class = 'btn-small btn-tertiary', icon = 'icon-picture',condition = 'full[\'front_image_exists\']' },
            { name = c.loc('MAC Image'), uri = "/device/model/'+full.id+'/macimage", class = 'btn-small btn-tertiary', icon = 'icon-picture', condition = 'full[\'mac_image_exists\']' },
    ];
    UNLESS c.user.read_only;
        helper.dt_buttons = helper.dt_buttons.merge([
            { name = c.loc('Delete'), uri = "/device/model/'+full.id+'/delete", class = 'btn-small btn-secondary', icon = 'icon-trash' },
            { name = c.loc('Edit'), uri = "/device/model/'+full.id+'/edit", class = 'btn-small btn-primary', icon = 'icon-edit' },
            { name = c.loc('Preferences'), uri = "/device/model/'+full.id+'/preferences", class = 'btn-small btn-primary', icon = 'icon-list' },
        ]);
    END;

    PROCESS 'helpers/datatables.tt';
-%]
            </div>
        </div>
    </div>

    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#device_details" href="#collapse_devfw">[% c.loc('Device Firmwares') %]</a>
        </div>
        <div class="accordion-body collapse" id="collapse_devfw">
            <div class="accordion-inner">
                [% UNLESS c.user.read_only -%]
                <span>
                    <a class="btn btn-primary btn-large" href="[% c.uri_for('/device/firmware/create') %]"><i class="icon-star"></i> [% c.loc('Upload Device Firmware') %]</a>
                </span>
                <div class="ngcp-separator"></div>
                [% END -%]
[%
    helper.name = c.loc('Device Firmware');
    helper.identifier = 'device_firmware';
    helper.data = devfw;
    helper.dt_columns = devfw_dt_columns;
    helper.length_change = 1;

    helper.close_target = close_target;
    helper.create_flag = devfw_create_flag;
    helper.edit_flag = devfw_edit_flag;
    helper.form_object = form;
    helper.ajax_uri = c.uri_for('/device/firmware/ajax');

    UNLESS c.user.read_only;
        helper.dt_buttons = [
            { name = c.loc('Delete'), uri = "/device/firmware/'+full.id+'/delete", class = 'btn-small btn-secondary', icon = 'icon-trash' },
            { name = c.loc('Edit'), uri = "/device/firmware/'+full.id+'/edit", class = 'btn-small btn-primary', icon = 'icon-edit' },
            { name = c.loc('Download'), uri = "/device/firmware/'+full.id+'/download", class = 'btn-small btn-tertiary', icon = 'icon-download-alt' },
        ];
    END;

    PROCESS 'helpers/datatables.tt';
-%]
            </div>
        </div>
    </div>

    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#device_details" href="#collapse_devconf">[% c.loc('Device Configurations') %]</a>
        </div>
        <div class="accordion-body collapse" id="collapse_devconf">
            <div class="accordion-inner">
                [% UNLESS c.user.read_only -%]
                <span>
                    <a class="btn btn-primary btn-large" href="[% c.uri_for('/device/config/create') %]"><i class="icon-star"></i> [% c.loc('Create Device Configuration') %]</a>
                </span>
                <div class="ngcp-separator"></div>
                [% END -%]
[%
    helper.name = c.loc('Device Configuration');
    helper.identifier = 'device_configuration';
    helper.data = devconf;
    helper.dt_columns = devconf_dt_columns;
    helper.length_change = 1;

    helper.close_target = close_target;
    helper.create_flag = devconf_create_flag;
    helper.edit_flag = devconf_edit_flag;
    helper.form_object = form;
    helper.ajax_uri = c.uri_for('/device/config/ajax');

    UNLESS c.user.read_only;
        helper.dt_buttons = [
            { name = c.loc('Delete'), uri = "/device/config/'+full.id+'/delete", class = 'btn-small btn-secondary', icon = 'icon-trash' },
            { name = c.loc('Edit'), uri = "/device/config/'+full.id+'/edit", class = 'btn-small btn-primary', icon = 'icon-edit' },
            { name = c.loc('Download'), uri = "/device/config/'+full.id+'/download", class = 'btn-small btn-tertiary', icon = 'icon-download-alt' },
        ];
    END;

    PROCESS 'helpers/datatables.tt';
-%]
            </div>
        </div>
    </div>

    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#device_details" href="#collapse_devprof">[% c.loc('Device Profiles') %]</a>
        </div>
        <div class="accordion-body collapse" id="collapse_devprof">
            <div class="accordion-inner">
                [% UNLESS c.user.read_only -%]
                <span>
                    <a class="btn btn-primary btn-large" href="[% c.uri_for('/device/profile/create') %]"><i class="icon-star"></i> [% c.loc('Create Device Profile') %]</a>
                </span>
                <div class="ngcp-separator"></div>
                [% END -%]
[%
    helper.name = c.loc('Device Profile');
    helper.identifier = 'device_profile';
    helper.data = devprof;
    helper.dt_columns = devprof_dt_columns;
    helper.length_change = 1;

    helper.close_target = close_target;
    helper.create_flag = devprof_create_flag;
    helper.edit_flag = devprof_edit_flag;
    helper.form_object = form;
    helper.ajax_uri = c.uri_for('/device/profile/ajax');

    UNLESS c.user.read_only;
        helper.dt_buttons = [
            { name = c.loc('Delete'), uri = "/device/profile/'+full.id+'/delete", class = 'btn-small btn-secondary', icon = 'icon-trash' },
            { name = c.loc('Edit'), uri = "/device/profile/'+full.id+'/edit", class = 'btn-small btn-primary', icon = 'icon-edit' },
            { name = c.loc('Preferences'), uri = "/device/profile/'+full.id+'/preferences", class = 'btn-small btn-primary', icon = 'icon-list' },
        ];
    END;

    PROCESS 'helpers/datatables.tt';
-%]
            </div>
        </div>
    </div>

    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#device_details" href="#collapse_fielddev">[% c.loc('Deployed Devices') %]</a>
        </div>
        <div class="accordion-body collapse" id="collapse_fielddev">
            <div class="accordion-inner">
[%
    helper.name = c.loc('Deployed Device');
    helper.identifier = 'field_device';
    helper.data = fielddev;
    helper.dt_columns = fielddev_dt_columns;
    helper.length_change = 1;
    helper.edit_flag = 0;
    helper.create_flag = 0;

    helper.ajax_uri = c.uri_for('/device/device/ajax');

    UNLESS c.user.read_only;
        helper.dt_buttons = [
            { name = c.loc('Delete'), uri = "/customer/' + full.contract_id + '/pbx/device/'+full.id+'/delete", class = 'btn-small btn-secondary', icon = 'icon-trash' },
            { name = c.loc('Customer'), uri = "/customer/' + full.contract_id + '/details", class = 'btn-small btn-tertiary', icon = 'icon-user' },
            { name = c.loc('Config'), uri = "/device/autoprov/config/' + full.identifier + '", class = 'btn-small btn-primary', icon = 'icon-edit' },
            { name = c.loc('Preferences'), uri = "/customer/' + full.contract_id + '/pbx/device/' + full.id + '/preferences", class = 'btn-small btn-primary', icon = 'icon-list' }
        ];
    ELSE;
        helper.dt_buttons = [
            { name = c.loc('Customer'), uri = "/customer/' + full.contract_id + '/details", class = 'btn-small btn-tertiary', icon = 'icon-user' },
        ];
    END;

    PROCESS 'helpers/datatables.tt';
-%]
            </div>
        </div>
    </div>



</div>
[% # vim: set tabstop=4 syntax=html expandtab: -%]
