<%@ Page Title="Contacts" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="contacts.aspx.cs" Inherits="Contacts" %>

<%@ Register Src="~/Controls/ContactEditForm.ascx" TagPrefix="contact" TagName="ContactEditForm" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <link rel="stylesheet" type="text/css" href="Styles/contacts.css" />
    <script src="Scripts/desktop.js"></script>
    <script src="Scripts/pako.min.js"></script>
    <script src="Scripts/contacts.js"></script> 
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="FolderContent" runat="Server">
    <nav:FolderNavigationControl runat="server" ID="FolderNavigationControl" Category="Contacts" />
    <nav:MobileNavigation runat="server" ID="MobileNavigation" Category="Contacts" BreadCrumbText="Groups"></nav:MobileNavigation>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="Server">

    <telerik:RadClientDataSource runat="server" ID="rcdsContacts">
        <DataSource>
            <WebServiceDataSourceSettings BaseUrl="api/">
                <Select Url="contacts" RequestType="Get" DataType="JSON" />
            </WebServiceDataSourceSettings>
        </DataSource>
    </telerik:RadClientDataSource>

    <telerik:RadNavigation runat="server" ID="contactsNavigation" Skin="BlackMetroTouch" CssClass="secondaryMenu" OnClientNodeClicked="contacts.clientNodeClicked">
        <Nodes>
            <telerik:NavigationNode Text="New" NavigateUrl="new-contact.aspx" SpriteCssClass="icon icon-Add-Circle" />
            <telerik:NavigationNode Text="Export">
                <Nodes>
                    <%--<telerik:NavigationNode Text="Export to Word" NavigateUrl="api/contacts/docx" />  // uncomment-out the following items, in to test the order Export to Docx, CSV and Xlsx formats
                    <telerik:NavigationNode Text="Export to CSV" NavigateUrl="api/contacts/csv" />
                    <telerik:NavigationNode Text="Export to Excel" NavigateUrl="api/contacts/xlsx" />--%>
                    <telerik:NavigationNode Text="Export to PDF" />
                </Nodes>
            </telerik:NavigationNode>
            <telerik:NavigationNode CssClass="rightScndNav">
                <NodeTemplate>
                    <span class="button listViewBtn selected">
                        <span class="icon icon icon-View-ListView"></span>
                    </span>
                    <telerik:RadSearchBox ID="RadSearchBox1" runat="server" Skin="BlackMetroTouch" OnClientSearch="contacts.onClientSearch" Filter="StartsWith"
                        Width="340px" CssClass="hidden">
                        <WebServiceSettings Path="api/contacts" 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:RadListView runat="server" ID="rlvContacts" ClientDataSourceID="rcdsContacts">
            <LayoutTemplate>
                <div class="RadListView RadListView_Default">
                    <ul id="itemPlaceholder" runat="server" class="contacts-list">
                    </ul>
                </div>
            </LayoutTemplate>
            <ClientSettings>
                <DataBinding>
                    <ItemTemplate>
                    <li>
                        <div class="itemTemplate" data-contact-id="#= Id #" data-contact-email="#= Email #">
                            <img class="photo" alt="#= Name #" src="Images/contacts/#= ImageUrl #" />
                            <div class="header">#= Name #</div>
                            <div class="content">
                                <p>
                                    <span class="label">Country:</span>
                                    <span class="info">#= Country #</span>
                                </p>
                                <p>
                                    <span class="label">City:</span>
                                    <span class="info">#= City #</span>
                                </p>
                                <p>
                                    <span class="label">Company:</span>
                                    <span class="info">#= Company #</span>
                                </p>
                                <p>
                                    <span class="label">Phone:</span>
                                    <span class="info">#= Phone #</span>
                                </p>
                            </div>
                        </div>
                        <div class="editTemplate" style="display:none;">
                            <telerik:RadTextBox runat="server" Text='#= Name #'></telerik:RadTextBox>
                        </div>
                    </li>
                    </ItemTemplate>
                </DataBinding>
            </ClientSettings>
        </telerik:RadListView>
    </div>

    <telerik:RadClientExportManager runat="server" ID="clientExportManager" />

    <contact:ContactEditForm runat="server" ID="ContactEditForm" />

    <div id="contactActionMenu">
        <ul>
            <li class="button mail">
                <span class="icon icon-Mail-Circle"></span>
            </li>
            <li class="button edit">
                <span class="icon icon-Edit-Circle"></span>
            </li>
            <li class="button delete">
                <span class="icon icon-Delete-Circle"></span>
            </li>
        </ul>
    </div>
</asp:Content>

