[% META title="Initial Screen" %]
<!-- BEGIN [% template.name %] -->

    [% # PROCESS dumper.tt dump = screen_categories %]

    [% IF dfv_errors %]
        <p class="error">[% c.config('msg').dfv_errors %]</p>
    [% END %]

    [%
        category_ids = []; # for showhide_screens() function
        FOREACH entry IN screen_categories;
            NEXT UNLESS entry.is_active.match('yes');
            category_ids.push(entry.id);
        END;
    %]			
	<script language="javascript" type="text/javascript">
	<!--
		function showhide_screens(f,v) {
			var t = f.screen_id;
            var categoryIds = [ [% category_ids.join(',') %] ];

			// does value of 'v' match any of categoryIds array:
			match = jQuery.grep(categoryIds, function (a) { return a == v; }); // alert(match);

			if (match.length) { // ie contains the value of category_id
				t.style.visibility='visible';
			}
			else {
				t.style.visibility='hidden';
			}			
		}

		// use addLoadEvent function in common.js for onload:
		addLoadEvent(
			function() { 
				document.initialScreen.screen_id.style.visibility='hidden';
			}
		);

		// screen_category onChange event for screen_id select menu
		$(document).ready(function () {
			$('#screen_category').change( function() {
				$('#screen_name').load('[% app_url %]/screen/screen_terms', {
					category_id: $('#screen_category').val()	
				})
			})
		});		
	-->
	</script>

    <h2>Screen record:</h2>
    
    <div class="indent">
    [% PROCESS request/summary_display.tt # expects 'data' object %]
    </div>
    
    [% initial_screen_dfv_js %]

    [% INCLUDE site/previous_cases.tt # 'PROCESS' clobbers 'data'  %]

    <span class="spacer">&nbsp;</span>

    <form method="post" action="[% app_url %]/screen/do_initial_screen/[% data.id %]"
            [% initial_screen_onsubmit %] name="initialScreen" id="initialScreen">

        <table class="indent">
            <tr>
                <td class="label">Screen category:</td>
                <td class="content">
                    <select name="screen_category" id="screen_category"
                            onchange="showhide_screens(this.form,this.value)">
                        <option value="">&nbsp;</option>
                        [% FOREACH entry IN screen_categories;
                            NEXT UNLESS entry.is_active.match('yes') %]
                            <option value="[% entry.id %]">
                               [% entry.name %]
                            </option>
                        [% END %]
                    </select>
                    [% error_screen_category %]
                    
                    <!-- // replaced by ajax output after selection of screen_category: -->
                    <select name="screen_id" id="screen_name">			
                        <option value="">--select one--</option>
                    </select>
                    [% error_screen_id %]
                </td>
                <td rowspan="2" class="borderless">
                    [% site.html.submit %] [% site.html.reset %]
                </td>
            </tr>
            [% IF audit_categories.size # only if settings.have_request_audit %]
            <tr>
                <td class="label">Reason for request:</td>
                <td class="content">
                    <select name="option_id">
                        <option value="">&nbsp;</option>
                        [% FOREACH group IN audit_categories %]
                        <optgroup label="[% group.description | upper %]">
                            [% FOREACH item IN request_audit %]
                            [% NEXT UNLESS
                                item.category.description.match(group.description) %]
                            <option value="[% item.id %]">
                                [% item.description %]
                            </option>
                            [% END %]
                        </optgroup>
                        [% END %]
                    </select>
                    [% error_option_id %]
                </td>
            </tr>
            [% END %]
        </table>
    </form>
<!-- END [% template.name %] -->