<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Knockout.aspx.cs" Inherits="WebFormsClient.Knockout" %>

<asp:Content runat="server" ID="HeadContent" ContentPlaceHolderID="HeadContent">
    <script src="Scripts/knockout-3.1.0.js"></script>
    <script src="Scripts/Booking/AvailabilityRequest.Knockout.js"></script>
</asp:Content>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
    <div class="content-container-wrapper">
        <div class="content-container" id="availability-request" data-bind='fadeVisible: isRequestViewVisible'>
            <h3>
                <asp:Literal runat="server" Text="<%$ Resources: Common, H_AvailabilityRequest %>" /></h3>

            <div class="alert alert-danger" id="invalid-parameters">
                <asp:Literal runat="server" Text="<%$ Resources: Common, Error_InvalidParameters %>" />
            </div>
            <div>
                <p class="form-label">
                    <asp:Literal runat="server" Text="<%$ Resources: Common, Origin %>" />
                </p>
                <asp:DropDownList runat="server" ID="ddlOrigin" AutoPostBack="False" ClientIDMode="Static" CssClass="combo" data-bind="value: selectedOrigin" />
            </div>
            <div>
                <p class="form-label">
                    <asp:Literal runat="server" Text="<%$ Resources: Common, Destination %>" />
                </p>
                <asp:DropDownList runat="server" ID="ddlDestination" AutoPostBack="False" ClientIDMode="Static" CssClass="combo" data-bind="value: selectedDestination" />
            </div>

            <div>
                <p class="form-label">
                    <asp:Literal runat="server" Text="<%$ Resources: Common, Dates %>" />
                </p>

                <div class="input-daterange input-group" id="dp-return">
                    <input type="text" class="input-sm form-control" name="departure" />
                    <span class="input-group-addon">
                        <asp:Literal runat="server" Text="<%$ Resources: Common, To %>" /></span>
                    <input type="text" class="input-sm form-control" name="return" />
                </div>
            </div>
            <div class="button-container">
                <button class="btn btn-primary" data-bind="click: checkAvailability">
                    <asp:Literal runat="server" Text="<%$ Resources: Common, BTN_CheckAvailability%>" />
                </button>
                <button class="btn btn-primary" data-bind="click: checkLastRequests">
                    <asp:Literal runat="server" Text="<%$ Resources: Common, BTN_LastRequests%>" />
                </button>
            </div>

        </div>
        <div class="content-container" id="availability-response" data-bind='fadeVisible: isResponseViewVisible'>
            <h3>
                <asp:Literal runat="server" Text="<%$ Resources: Common, H_AvailableBookings %>" /></h3>
            <div id="journey-content-wrapper">
                <h4>
                    <asp:Literal runat="server" Text="<%$ Resources: Common, H_InboundJourneys %>" /></h4>
                <div data-bind="foreach: inboundJourneys">
                    <div class="well">
                        <h5 data-bind="text: Carrier"></h5>
                        <div><span data-bind="text: DepartureStation.Name"></span> (<span data-bind="text: $root.formatDate($data.DepartureTime)"></span>)</div>
                        <div><span data-bind="text: ArrivalStation.Name"></span> (<span data-bind="text: $root.formatDate($data.ArrivalTime)"></span>)</div>
                    </div>
                </div>
                <h4>
                    <asp:Literal runat="server" Text="<%$ Resources: Common, H_OutboundJourneys %>" /></h4>
                <div data-bind="foreach: outboundJourneys">
                    <div class="well">
                        <h5 data-bind="text: Carrier"></h5>
                        <div><span data-bind="text: DepartureStation.Name"></span> (<span data-bind="    text: $root.formatDate($data.DepartureTime)"></span>)</div>
                        <div><span data-bind="text: ArrivalStation.Name"></span> (<span data-bind="    text: $root.formatDate($data.ArrivalTime)"></span>)</div>
                    </div>
                </div>
            </div>
            <div class="button-container">
                <button class="btn btn-primary" id="btnNewSearch">
                    <asp:Literal runat="server" Text="<%$ Resources: Common, BTN_NewSearch%>" />
                </button>
            </div>
        </div>
        <div class="content-container" id="last-requests" data-bind='fadeVisible: isLastRequestsViewVisible'>
            <h3>
                <asp:Literal runat="server" Text="<%$ Resources: Common, H_LastRequests %>" /></h3>
            <div data-bind="foreach: lastRequests" class="request-wrapper">
                <div class="well">
                    <div><span data-bind="text: Origin"></span>-> <span data-bind="    text: Destination"></span></div>
                    <div><span data-bind="text: $root.formatDate($data.DepartureDate)"></span>- <span data-bind="    text: $root.formatDate($data.ReturnDate)"></span></div>
                </div>
            </div>
            <div class="button-container">
                <button class="btn btn-primary" id="btnBackLastRequests">
                    <asp:Literal runat="server" Text="<%$ Resources: Common, BTN_BackLastRequests%>" />
                </button>
            </div>
        </div>
        <div class="btn-group" id="version-selector">
            <button type="button" class="btn btn-info" onclick="window.location.href='Default.aspx'">Classic</button>
            <button type="button" class="btn btn-info" onclick="window.location.href='Angular.aspx'">Angular</button>
            <button type="button" class="btn btn-info active">Knockout</button>
        </div>
    </div>
</asp:Content>
