<%@ Page Title="Mail" MetaDescription="Telerik WebMail" MetaKeywords="telerik webmail,webmail,outlook inspired app" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="default.aspx.cs" Inherits="Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <link href="Styles/mail.css" rel="stylesheet" />
    <script src="Scripts/mail.js"></script>

    <style type="text/css">
        html .RadGrid .rgMasterTable {
            height: auto;
        }

        .subject {
            position: relative;
        }


    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FolderContent" runat="Server">
    <nav:FolderNavigationControl runat="server" ID="FolderNavigationControl" Category="Mail" />
    <nav:MobileNavigation runat="server" ID="MobileNavigation" Category="Mail" BreadCrumbText="Folders"></nav:MobileNavigation>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="Server">
    <telerik:RadNavigation runat="server" ID="contactNavigation" Skin="BlackMetroTouch" CssClass="secondaryMenu" OnClientNodeClicked="mail.nodeClicked" EnableViewState="false">
        <Nodes>
            <telerik:NavigationNode Text="New" NavigateUrl="new.aspx" SpriteCssClass="icon icon-Add-Circle">
            </telerik:NavigationNode>
            <telerik:NavigationNode Text="Reply">
                <Nodes>
                    <telerik:NavigationNode Text="Reply" NavigateUrl="new.aspx?action=reply"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Reply All" NavigateUrl="new.aspx?action=reply_all"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Forward" NavigateUrl="new.aspx?action=forward"></telerik:NavigationNode>
                </Nodes>
            </telerik:NavigationNode>
            <telerik:NavigationNode Text="Delete"></telerik:NavigationNode>
            <telerik:NavigationNode Text="Move">
                <Nodes>
                    <telerik:NavigationNode Text="Inbox"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Junk"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Drafts"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Deleted"></telerik:NavigationNode>
                </Nodes>
            </telerik:NavigationNode>
            <telerik:NavigationNode Text="Junk">
                <Nodes>
                    <telerik:NavigationNode Text="Report Spam"></telerik:NavigationNode>
                </Nodes>
            </telerik:NavigationNode>
            <telerik:NavigationNode Text="More">
                <Nodes>
                    <telerik:NavigationNode Text="Mark as read"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Mark as unread"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Print"></telerik:NavigationNode>
                </Nodes>
            </telerik:NavigationNode>
            <telerik:NavigationNode CssClass="rightScndNav">
                <NodeTemplate>
                    <span class="button horizontalBtn" data-command-name="bottom">
                        <span class="icon icon-View-ReadingPane-Down"></span>
                    </span>
                    <span class="button verticalBtn" data-command-name="right">
                        <span class="icon icon-View-ReadingPane-Right"></span>
                    </span>
                    <telerik:RadSearchBox runat="server" Skin="BlackMetroTouch" OnClientSearch="mail.onClientSearch" Width="340px" DropDownSettings-Height="300px" ID="mainSearch"
                        CssClass="hidden" ShowLoadingIcon="false" MaxResultCount="10">
                        <WebServiceSettings Path="api/messages" Method="search" UseHttpGet="false" />
                    </telerik:RadSearchBox>
                    <span class="button searchBtn">
                        <span class="icon icon-Search"></span>
                    </span>
                </NodeTemplate>
            </telerik:NavigationNode>
        </Nodes>
    </telerik:RadNavigation>
    <div class="scroller">

        <telerik:RadClientDataSource runat="server" ID="rcdsMessages">
            <ClientEvents OnDataParse="mail.dataParse" />
            <DataSource>
                <WebServiceDataSourceSettings BaseUrl="api/">
                    <Select Url="messages" RequestType="Get" DataType="JSON" />
                </WebServiceDataSourceSettings>
            </DataSource>
        </telerik:RadClientDataSource>

        <div class="gridWrapper">
            <telerik:RadGrid runat="server" ID="messages" ClientDataSourceID="rcdsMessages" GridLines="None" AutoGenerateColumns="false" Height="100%"
                EnableViewState="false" AllowMultiRowSelection="true" AllowSorting="true" ShowGroupPanel="true" AllowFilteringByColumn="false">
                <GroupingSettings ShowUnGroupButton="true"></GroupingSettings>
                <ClientSettings AllowDragToGroup="true" EnableRowHoverStyle="true" AllowKeyboardNavigation="false">
                    <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                    <Selecting AllowRowSelect="true" />
                    <ClientEvents OnRowContextMenu="mail.contextMenu" OnRowClick="mail.rowClick" OnDataBound="mail.dataBound"
                        OnRowDataBound="mail.rowDataBound" OnRowMouseOver="mail.showEmailActions" OnRowMouseOut="mail.hideEmailActions" />
                </ClientSettings>
                <MasterTableView GroupLoadMode="Client" ClientDataKeyNames="MessageID">
                    <GroupByExpressions>
                        <telerik:GridGroupByExpression>
                            <GroupByFields>
                                <telerik:GridGroupByField FieldAlias="Date" FieldName="Received" FormatString="{0:d/M/yyyy}" />
                            </GroupByFields>
                            <SelectFields>
                                <telerik:GridGroupByField FieldAlias="Date" FieldName="Received" FormatString="{0:d/M/yyyy}" />
                            </SelectFields>
                        </telerik:GridGroupByExpression>
                    </GroupByExpressions>
                    <Columns>
                        <telerik:GridClientSelectColumn HeaderText="Select" UniqueName="Select" HeaderStyle-Width="35px" />
                        <telerik:GridBoundColumn DataField="From" UniqueName="From" HeaderText="From" HeaderStyle-Width="200px" />
                        <telerik:GridBoundColumn DataField="Subject" UniqueName="Subject" HeaderText="Subject" ItemStyle-CssClass="subject" />
                        <telerik:GridBoundColumn DataField="Received" UniqueName="Received" HeaderText="Date" DataFormatString="{0:d/M/yyyy HH:mm:ss}" HeaderStyle-Width="200px" />
                        <telerik:GridBoundColumn DataField="FolderId" UniqueName="FolderId" HeaderText="FolderId" DataType="System.Int32" />
                        <telerik:GridTemplateColumn UniqueName="Compact">
                            <ClientItemTemplate>
                            <div class="mobile-column">
                                <span class="from">#=From #</span>
                                <span class="received">#=Received #</span>
                                <span class="subject-mobile">#=Subject #</span>
                            </div>
                            </ClientItemTemplate>
                        </telerik:GridTemplateColumn>
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>
        </div>

        <input type="hidden" id="clickedRowMessageId" />

        <telerik:RadContextMenu runat="server" ID="messagesContextMenu" ClientIDMode="Static" OnClientItemClicked="mail.contextMenuItemClicked">
            <Items>
                <telerik:RadMenuItem Text="Reply" NavigateUrl="new.aspx?action=reply" />
                <telerik:RadMenuItem Text="Reply All" NavigateUrl="new.aspx?action=reply_all" />
                <telerik:RadMenuItem Text="Forward" NavigateUrl="new.aspx?action=forward" />
                <telerik:RadMenuItem IsSeparator="true" />
                <telerik:RadMenuItem Text="Mark as unread" />
                <telerik:RadMenuItem Text="Mark as read" />
                <telerik:RadMenuItem Text="Delete" />
                <telerik:RadMenuItem Text="Junk" />
                <telerik:RadMenuItem IsSeparator="true" />
                <telerik:RadMenuItem Text="Print" />
            </Items>
        </telerik:RadContextMenu>

        <asp:Panel runat="server" ID="pnlMessage" CssClass="mailDetails" EnableViewState="false" ClientIDMode="Static">
            <div class="header">
                <div id="subject"></div>
                <div id="from"></div>
                <div id="recieved"></div>
            </div>
            <div id="body"></div>
        </asp:Panel>
    </div>

</asp:Content>
