<%@ Page Language="C#" AutoEventWireup="true" UICulture="auto" Culture="auto" meta:resourcekey="PageResource1" %>

<%@ Import Namespace="System.IO" %>
<%@ Import Namespace="System.Threading" %>
<%@ Import Namespace="System.Globalization" %>

<script runat="server">
    String version = WebAppVersion.GetWebAppVersion();

    //@Override this is suggested by Microsoft, overriding the initialize culture function (that is
    //automatically called by the aspx.
    //Checks if the cookie exists and sets the language correctly, otherwise will fall-back to the default language
    //(English).
    protected override void InitializeCulture()
    {
        HttpCookie lang = Request.Cookies["siteLanguage"];

        String selectedLanguage = (lang != null) ? lang.Value : "en";
        UICulture = selectedLanguage;
        Culture = selectedLanguage;

        Thread.CurrentThread.CurrentCulture = CultureInfo.CreateSpecificCulture(selectedLanguage);
        Thread.CurrentThread.CurrentUICulture = new CultureInfo(selectedLanguage);
        base.InitializeCulture();
    }
</script>

<%  
    //this prevents the browser from caching templates. (on IE the templates where cached with the old language
    //too, so the change language was not working, this is a workaround for that).

    Response.Cache.SetCacheability(HttpCacheability.NoCache);
    Response.Cache.SetExpires(DateTime.Now.AddMinutes(-30)); %>

<%--view template starts here (will be appended inside a row-fluid)--%>


<!-- Version 2 -->
<script id="assign_heat_cover" type="text/x-handlebars-template">
    <div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex items-center justify-center" id="my-modal">
        <div class="relative p-5 border w-1/5 shadow-lg rounded-md bg-white">
            <div class="flex flex-col h-full">
                <div class="pb-3 border-b">
                    <div class="flex justify-between items-center">
                        <h3 class="text-xl font-semibold text-gray-900">ASSIGN HEAT TO COVER</h3>
                        <button class="text-gray-400 hover:text-gray-500 close">
                            <svg class="h-6 w-6 " fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>
                </div>
                
                <div class="py-4 border-b flex justify-between">
                    <div id="coversSelectDiv" class="w-2/5">
                        <label for="covers" class="w-full text-sm font-medium text-gray-700 mb-2">Available Covers</label>
                        <select data-bind="value: coverId, options: covers" class="w-full h-12 border border-gray-300 rounded-md shadow-sm py-3 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm appearance-none" ></select>
                    </div>

                    <div id="heatNumberDiv" class="w-2/5">
                        <label for="heatNumber" class="w-full block text-sm font-medium text-gray-700 mb-2">Available Heats</label>
                        <select data-bind="value: HeatNumber, options: heats" class="w-full h-12 border border-gray-300 rounded-md shadow-sm py-3 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm appearance-none" ></select>
            
                    </div>
                </div>
                
                <div class="py-4 border-b flex justify-between start-datetime-row">
                    <div id="startDatetimeDiv" class="flex flex-col items-start w-1/2">
                        <label for="startDatetime" class="text-sm font-medium text-gray-700 mb-1">Start</label>
                        <input style="height:40px" type="datetime-local" id="startDatetime" data-bind="value: startDatetime" class="text-center w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
                    </div>
                    <div id="outOfCoverAlertDiv" class="w-2/5">
                        <label for="outOfCoverAlert" class="w-full text-sm font-medium text-gray-700 mb-2">Out of Cover Alert</label>
                        <select id="outOfCoverAlert" data-bind="value: outOfCoverAlertHours, options: outOfCoverAlertOptions" class="w-full h-12 border border-gray-300 rounded-md shadow-sm py-3 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm appearance-none"></select>
                    </div>
                </div>
                
                <div class="pt-4">
                    <div class="flex justify-end">
                        <button id="cancelBtn" class="px-4 py-2 bg-gray-300 text-gray-800 text-base font-medium rounded-md shadow-sm hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500">
                            CANCEL
                        </button>
                        <button id="acceptBtn" class="ml-3 px-4 py-2 bg-green-600 text-white text-base font-medium rounded-md shadow-sm hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500">
                            ASSIGN
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>

<script id="unassign_cover" type="text/x-handlebars-template">
    <div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex items-center justify-center" id="unassignModal">
        <div class="relative p-5 border w-1/5 shadow-lg rounded-md bg-white">
            <div class="flex flex-col h-full">
                <div class="pb-3 border-b">
                    <div class="flex justify-between items-center">
                        <h3 class="text-xl font-semibold text-gray-900">UNASSIGN HEAT</h3>
                        <button class="text-gray-400 hover:text-gray-500 close">
                            <svg class="h-6 w-6 " fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>
                </div>
                
                <div class="py-4 border-b flex justify-between">
                    <div id="coversSelectDiv" class="w-2/5">
                        <label for="covers" class="w-full text-sm font-medium text-gray-700 mb-2">Cover Number</label>
                        <input disabled style="height:48px;" type="text" class="text-center w-2/3 h-12 border border-gray-300 rounded-md shadow-sm py-3 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm appearance-none" data-bind="value: CoverNumber" >
                    </div>

                    <div id="heatNumberDiv" class="w-2/5">
                        <label for="heatNumber" class="w-full block text-sm font-medium text-gray-700 mb-2">Heat Number</label>
                        <input disabled style="height:48px;" type="text" class="text-center w-full h-12 border border-gray-300 rounded-md shadow-sm py-3 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm appearance-none" data-bind="value: HeatNumber" >
                    </div>
                </div>
                
                <div class="pt-4">
                    <div class="flex justify-end">
                        <button id="cancelBtn" class="px-4 py-2 bg-gray-300 text-gray-800 text-base font-medium rounded-md shadow-sm hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500">
                            CANCEL
                        </button>
                        <button id="acceptBtn" class="ml-3 px-4 py-2 bg-red-600 text-white text-base font-medium rounded-md shadow-sm hover:bg-red-500 focus:outline-none focus:ring-2 focus:ring-blue-500">
                            UNASSIGN
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>

<script id="edit_out_of_cover_alert" type="text/x-handlebars-template">
    <div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex items-center justify-center" id="edit-alert-modal">
        <div class="relative p-5 border w-1/5 shadow-lg rounded-md bg-white">
            <div class="flex flex-col h-full">
                <div class="pb-3 border-b">
                    <div class="flex justify-between items-center">
                        <h3 class="text-xl font-semibold text-gray-900">Edit Out of Cover Alert</h3>
                        <button class="text-gray-400 hover:text-gray-500 close">
                            <svg class="h-6 w-6 " fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>
                </div>
                <div class="py-4 border-b flex justify-between">
                    <div id="editAlertCoverDiv" class="w-2/5">
                        <label class="w-full text-sm font-medium text-gray-700 mb-2">Cover</label>
                        <input disabled type="text" class="text-center w-2/3 h-12 border border-gray-300 rounded-md shadow-sm py-3 px-3 sm:text-sm" data-bind="value: CoverNumber" />
                    </div>
                    <div id="editAlertHeatDiv" class="w-2/5">
                        <label class="w-full block text-sm font-medium text-gray-700 mb-2">Heat</label>
                        <input disabled type="text" class="text-center w-full h-12 border border-gray-300 rounded-md shadow-sm py-3 px-3 sm:text-sm" data-bind="value: HeatNumber" />
                    </div>
                </div>
                <div class="py-4 border-b">
                    <div id="editAlertThresholdDiv" class="w-2/5">
                        <label for="editOutOfCoverAlertThreshold" class="w-full text-sm font-medium text-gray-700 mb-2">Out of Cover Alert</label>
                        <select id="editOutOfCoverAlertThreshold" data-bind="value: outOfCoverAlertHours, options: outOfCoverAlertOptions" class="w-full h-12 border border-gray-300 rounded-md shadow-sm py-3 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm appearance-none"></select>
                    </div>
                </div>
                <div class="pt-4">
                    <div class="flex justify-end">
                        <button id="cancelBtn" class="px-4 py-2 bg-gray-300 text-gray-800 text-base font-medium rounded-md shadow-sm hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500">CANCEL</button>
                        <button id="saveAlertBtn" class="ml-3 px-4 py-2 bg-green-600 text-white text-base font-medium rounded-md shadow-sm hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500">SAVE</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>


    