<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fluid UI - Mobile app prototyping for iPhone, iPad, Android and Windows 8</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<meta name="Description" content="Fluid UI is the fastest mobile app prototyping tool available. Design and test low and high fidelity app mockups on a mobile device with ease. Simple and UX oriented, this UI tool helps unlock creativity and will save your team time and money while gathering app requirements.">
<meta name="Keywords" content="mobile, prototyping, mockup, iphone, android, iPad, windows 8">
<meta name="google-site-verification" content="DoJIkzlOQiUCNp7zMwHDHGeitlt855fHAjtzshA8vB8" />
<script type="text/javascript">var api_version_date='5/19/2017 7:57:30 AM';</script>

	




<link rel="stylesheet" href="./css/dist/concat-1preview.7900b236506ad642728ababa48169957.compact.css" type="text/css" media="all">

<meta id="metaViewport" name="viewport"	content="width=device-width, height=device-height, minimum-scale=1, maximum-scale=1, initial-scale=1, user-scalable=0">
	

<!-- target-densitydpi=device-dpi,  -->

<meta name="apple-mobile-web-app-capable" content="yes">


<!--<script id="default-branding-links" type="x-jquery-temp">-->
<script id="default-branding-links" type="text/x-jquery-tmpl">
	<!-- iPad (Retina) -->
	<link rel="apple-touch-icon" sizes="144x144" href="img/apple-touch-icon-144.png" />
	<!-- iPad --> 
	<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-144.png" />
	<!-- iPhone (Retina) --> 
	<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114.png" />
	<!-- Older iPhones --> 
	<link rel="apple-touch-icon" href="img/apple-touch-icon-114.png" />

	<!-- iPhone -->
	<link rel="apple-touch-startup-image" href="img/fluidLoading320x460.png"
		media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)">
	<!-- iPhone (Retina) -->
	<link rel="apple-touch-startup-image" href="img/fluidLoading640x920.png"
		media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)">
	<!-- iPhone 5 -->
	<link rel="apple-touch-startup-image" href="img/fluidLoading640x1096.png"
		media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)">
	<!-- iPad (portrait) -->
	<link rel="apple-touch-startup-image" href="img/fluidLoading768x1004.png"
		media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)">
	<!-- iPad (landscape) -->
	<link rel="apple-touch-startup-image" href="img/fluidLoading1024x748.png"
		media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)">
	<!-- iPad (Retina, portrait) -->
	<link rel="apple-touch-startup-image" href="img/fluidLoading1536x2008.png"
		media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)">
	<!-- iPad (Retina, landscape) -->
	<link rel="apple-touch-startup-image" href="img/fluidLoading2048x1496.png"
		media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)">
</script>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
	


	


<script id="tmplWidget2" type="text/x-jquery-tmpl">
<div id="{{if isLibaryWidget}}${id}{{else isHelperWidget}}helper-${id}{{/if}}" class="pageWidget{{if isRootwidget}} rootWidget{{/if}}{{if isSegmentRoot}} segmentRootWidget{{/if}}{{if wg}} replacableWidget{{/if}}{{if isBackgroundWidget}} backgroundWidget{{/if}}{{if isLockedWidget}} lockedWidget{{/if}}{{if dm}} hotspotWidget{{/if}}" 
	data-lockto="${lockTo}" 
	{{if segment}}data-segment="${segment}"{{/if}} 
	{{if segmentRoot}}data-segment-root="${segmentRoot}"{{/if}} 
	//{{if isStatic}}data-position="fixed"{{/if}} 
	style="top:${absTLWH[0]}px;left:${absTLWH[1]}px;width:${absTLWH[2]}px;height:${absTLWH[3]}px;">
	{{if includeCanvasOrImage}}
		{{if useCanvas}}<canvas width="100%" height="100%" style="width:100%;height:100%"></canvas>
		{{else}}<img width="100%" height="100%" style="width:100%;height:100%;">{{/if}}
	{{/if}}
	{{if isText}}
	    <svg class="text-widget" xmlns="http://www.w3.org/2000/svg" width="${absTLWH[2]}" height="${absTLWH[3]}" viewBox="0 0 ${absTLWH[2]} ${absTLWH[3]}" style="${opacity}">
	        {{if fontData}}
	        <defs>
              <style type="text/css"><![CDATA[
                @font-face {
                  font-family: ${fontFamily};
                  font-style: normal;
                  font-weight: 400;
                  src: url(data:application/font-woff2;charset=utf-8;base64,${fontData.woff2}) format('woff2'),
         url(data:application/font-woff;charset=utf-8;base64,${fontData.woff}) format('woff');
                }

                p {clear: both; white-space: pre-wrap; margin: 0; font-family: inherit; font-size: inherit; letter-spacing: inherit; line-height: inherit; -webkit-transform: none; transform: none;}
                p:empty{text-decoration: none; float: left;}
                p:empty::after{text-decoration: none; content: ' ';}
                .svgWidgetText{display: flex !important; overflow: hidden; -webkit-transform: none; transform: none;}
              ]]></style>
            </defs>
            {{else}}
                <style type="text/css"><![CDATA[
                p {clear: both; white-space: pre-wrap; margin: 0; font-family: inherit; font-size: inherit; letter-spacing: inherit; line-height: inherit; -webkit-transform: none; transform: none;}
                p:empty{text-decoration: none; float: left;}
                p:empty::after{text-decoration: none; content: ' ';}
                .svgWidgetText{display: flex !important; overflow: hidden; -webkit-transform: none; transform: none;}
              ]]></style>
            {{/if}}
            <foreignObject width="${absTLWH[2]}" height="${absTLWH[3]}">
                <div xmlns="http://www.w3.org/1999/xhtml" class="svgWidgetText align-to-${textHorizontalAlign} align-to-${textVerticalAlign}" style="${ts};">
                    <span style="flex: 0 0 auto; height: auto; -webkit-transform: none; transform: none;">${tc}</span>
                </div>
            </foreignObject>
        </svg>
	{{/if}}

</div> 
</script>

<!-- <div class="widgetText align-to-${textHorizontalAlign} align-to-${textVerticalAlign}" style="${ts}{{if addWH}};width:100%;height:100%;{{/if}}">
            <span style="white-space: pre-{{if isFirefox}}line{{/if}}{{if !isFirefox}}wrap{{/if}};{{if isUnderline}}text-decoration: underline;{{/if}}">${tc}</span>
        </div> -->

		

	<!--  style="width:${width}px;height:${height}px" -->
	<script id="tmplPreviewPage" type="text/x-jquery-tmpl">
		<div data-role="page" id="${pageId}" class="page previewPage" style="background-color:${bgColor}; height: 100%;">
			<!--div data-role="header" data-position="fixed" class="fixedWidgetHolderBack"></div-->
			<div data-role="content" class="widgetHolder" style="width:${width}px;height:${height}px;{{if top}}top:${top}px;{{/if}}{{if left}}left:${left}px;{{/if}}">
				<div class="flowText" style="width:${width}px;height:${height}px"><!-- Manages the w/h of the scroller.--></div>
						
			</div>
			<div data-role="header" data-position="fixed" class="fixedWidgetHolderFront"></div>
		</div>
	</script>

	<!-- PREVIEW LINK VERSION: error screen seen when accessing the main editor page -->	
	<script id="tmplInvalid" type="text/x-jquery-tmpl" >
	<div style="width:350px;height:220px;position:absolute;left:35%;top:10%;">
		<img title="Fluid UI Logo" alt="Fluid UI Logo" src="img/FluidUI-logo-larger.png" width="197" height="91" /><br><br>
		<span style="color:#02a2c9;font:bold 14px/18px helvetica;">Your browser is not currently supported</span><br>
		<span style="color:#999;font:12px/14px helvetica;">Sorry, we&apos;re just too little to support this browser at this time but we will as soon as we can. In the meantime, you can try Fluid UI with another browser.</span><br><br><br>

		<a href="http://www.google.com/chrome" title="Download Google Chrome" alt="Download Google Chrome" target="_blank" style="color:#999;font:12px/12px helvetica;">
			<img alt="Chrome" src="img/CHROME.png" width="200" height="53" />
			<br>
			http://www.google.com/chrome
		</a>

		<br><br>

		<a href="http://www.firefox.com" title="Download Mozilla Firefox" alt="Download Mozilla Firefox" target="_blank" style="color:#999;font:12px/12px helvetica;">
			<img alt="Firefox" src="img/firefox.png" width="151" height="145" />
			<br>
			http://www.firefox.com
		</a>

		<br><br>

		<a href="http://www.apple.com/safari" title="Download Apple Safari" alt="Download Apple Safari" target="_blank" style="color:#999;font:12px/12px helvetica;">
			<img src="img/SAFARI.png" alt="Safari" width="50" height="50" />
			<br>
			http://www.apple.com/safari</a>
		</a>
		<br>
	</div>
	</script>

	<script id="projectInactive" type="text/x-jquery-tmpl" >
	<div class="sleeper">
		<span class="sleeper-z sleeper-z-1">Z</span>
		<span class="sleeper-z sleeper-z-2">Z</span>
		<span class="sleeper-z sleeper-z-3">Z</span>
		<img src="img/inactive-project.svg">
		 <div class="sleeper-div">
		 This project is not active now.
		 </div>
		 <div class="sleeper-div">
		 Please contact the owner.
		 </div>
	</div>
	</script>




<script id="uploads-dropdown-option-tpl" type="text/x-underscore">
	<option class="lib-dropdown-option" value="{{id}}">{{name}} ({{count}})</option>
</script>
<script id="uploads-dropdown-options-tpl" type="text/x-underscore">
<option class="lib-dropdown-option sg-customDropdownHeader" value="all">All uploads</option>
<option class="lib-dropdown-option sg-customDropdownHeader" value="{{thisProjectId}}">In this project ({{count}})</option>
<option class="lib-dropdown-option sg-customDropdownHeader" value="unused">In no project</option>
{{#hasOtherProjects}}
<optgroup class="lib-dropdown-label lib-other-projs sg-customDropdownHeader" label="In another project">
{{#otherProjects}}
    <option class="lib-dropdown-option sg-customDropdownCategory" value="{{id}}">{{name}} ({{count}})</option>
{{/otherProjects}}
</optgroup>
{{/hasOtherProjects}}
</script>

<script id="uploads-groups-tpl" type="text/x-underscore">
{{#groups}}
<ul class="uploads-group sg-spacer-5" data-id="{{id}}">
{{#useMarkup}} {{{markup}}} {{/useMarkup}}
{{^useMarkup}}
    {{#uploads}}<li data-id='{{id}}' class="libraryWidget upload-lib-widget" title="Click or drag-and-drop to add">
		<div class="pageWidget" style="">
			{{#uploadThumbsCacheExists}}
			<img width="130" height="85" data-id="{{id}}-thumb" src="{{src}}"/>
			{{/uploadThumbsCacheExists}}
			{{^uploadThumbsCacheExists}}
			<canvas class="toLoad" width="130" height="85" data-id="{{id}}-thumb"></canvas>
			{{/uploadThumbsCacheExists}}
			<div class="widgetTitle">{{title}}</div>
			<div class="del-btn">
			    <svg class="svg-icon" viewBox="0 0 100 100"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-bin-gray"></use></svg>
			</div>
		</div>
	</li>{{/uploads}}
{{/useMarkup}}
</ul>
{{/groups}}
</script>

<script id="uploadTabsTpl" type="text/x-underscore">
<section class="setHeader">
	<header>
		<h2>Uploads</h2>
		<h6>Hide</h6>
	</header>
	<ol id="uploadTabs">
		<li class="tabTrigger {{#openAllUploads}}active{{/openAllUploads}} allUploads">
			<div class="tab-button">
				<svg class="svg-icon whenActive" viewBox="0 0 100 100"> <use xlink:href="#icon-all-uploads-blue"> </use> </svg>
				<svg class="svg-icon whenInactive" viewBox="0 0 100 100"> <use xlink:href="#icon-all-uploads-gray"> </use> </svg>
				<span>All uploads</span>
			</div>
			<ul data-groupName="Uploads" class="childContainer">
			{{#allUploads}}
				{{& allUploads}}
			{{/allUploads}}
			</ul>
		</li>
		<li class="tabTrigger perProjects {{^openAllUploads}}active{{/openAllUploads}}">
			<div class="tab-button">
				<svg class="svg-icon whenActive" viewBox="0 0 100 100"> <use xlink:href="#icon-view-by-project-blue"> </use> </svg>
				<svg class="svg-icon whenInactive" viewBox="0 0 100 100"> <use xlink:href="#icon-view-by-project-gray"> </use> </svg>
				<span>View by project</span>
			</div>
			<ul id="perProjectGroupContainer" class="childContainer">
				<li class="uploadSpacer"></li>
			</ul>
		</li>
	</ol>
</section>
</script>
<script id="uploadTabsProject" type="text/x-underscore">
	<li id="project-{{id}}" class="projectTab{{#empty}} empty{{/empty}}{{#currentProject}} current{{/currentProject}}{{#activeProject}} active{{/activeProject}}{{#notInAny}} notInAnyProject{{/notInAny}}">
		<div class="tab-button">
			<span class="tab-count">{{count}}</span>
			<span class="tab-name">{{name}}</span>

			{{! these are shown for normal project tab }}
			{{^notInAny}}
			<svg class="svg-icon whenActive" viewBox="0 0 100 100"> <use xlink:href="#icon-project-open-blue"> </use> </svg>
			<svg class="svg-icon whenInactive" viewBox="0 0 100 100"> <use xlink:href="#icon-project-closed-gray"> </use> </svg>
			{{/notInAny}}
			
			{{! these are shown for not-in-any-project tab }}
			{{#notInAny}}
			<svg class="svg-icon whenActive" viewBox="0 0 100 100"> <use xlink:href="#icon-not-in-any-project-blue"> </use> </svg>
			<svg class="svg-icon whenInactive" viewBox="0 0 100 100"> <use xlink:href="#icon-not-in-any-project-gray"> </use> </svg>
			{{/notInAny}}

		</div>
		
		<ul class="uploadTabs-project">
		{{#uploads}}
		<li data-id='{{id}}' class="libraryWidget" title="Click or drag-and-drop to add" style="background-image: none;">
			<div class="pageWidget" style="top:2px;left:2px;width:50px;height:50px;">
				{{#imgData}}
				<img width="50" height="50" data-id="{{id}}-thumb" src="{{imgData}}"/>
				{{/imgData}}
				{{^imgData}}
				<canvas class="toLoad" width="50" height="50" data-id="{{id}}-thumb"></canvas>
				{{/imgData}}
				<div class="widgetTitle">{{title}}</div>
			</div>
		</li>
		{{/uploads}}
		</ul>
	</li>
</script>
<!--<script id="uploadMarkup" type="text/x-underscore">
	<li data-id='{{id}}' class="libraryWidget bbb" title="Click or drag-and-drop to add" style="background-image: none;">
		<div class="pageWidget" style="top:2px;left:2px;width:50px;height:50px;">
			{{#uploadThumbsCacheExists}}
			<img width="50" height="50" data-id="{{id}}-thumb" src="{{src}}"/>
			{{/uploadThumbsCacheExists}}
			{{^uploadThumbsCacheExists}}
			<canvas class="toLoad" width="50" height="50" data-id="{{id}}-thumb"></canvas>
			{{/uploadThumbsCacheExists}}
			<div class="widgetTitle">{{title}}</div>
		</div>
	</li>
</script>-->
<script id="widgetMarkup" type="text/x-underscore">
	<li id="{{id}}" class="libraryWidget {{widgetClass}}" title="Click or drag-and-drop to add"><div class="widgetTitle">{{title}}</div></li>
</script>

<script id="tipTemplate" type="text/x-underscore">
	<section class="tip">
		<div class="tipBg"></div>
		<div class="tipFg"></div>
		<div class="container">
			<span class="sg-smallText sg-textWhite">
			Pay Annually - Save 17% and get two extra projects on Solo and Pro accounts
			</span>
		</div>
	</section>
</script>

<script id="upgradeErrorTemplate" type="text/x-underscore">
    <div id="upgradeError" class="modalWindowContentFrame">
        <div id="upgrade-error-header">
            Sorry, we were unable to process your payment at this time :(
        </div>

        <div class="msg-1">Please retry in 2-3 minutes or try again with a different card</div>
        <div class="msg-2">Otherwise, please contact <a href="support@fluidui.com">support@fluidui.com</a> and we can work to get your account upgraded properly. Please send us message and we'll be happy to assist you.</div>

        <div class="try-again-box">
            <a id="tryAgain">Try Again</a>
        </div>

        <form id="errorContact">
            <label>Give us your feedback</label>
            <textarea id="content" name="content" rows="5" placeholder="" required></textarea>
            <input type="submit" class="userSettingsButton sg-actionButton buttonSubmit" value="Send message" />
         </form>

    </div>
</script>

<script id="validationErrorTemplate" type="text/x-underscore">
<div class="validationError">
{{message}}
</div>
</script>

<script id="projectCopyTemplate" type="text/x-underscore">
    <div id="projectCopy" class="modalWindowContentFrame">
        <div class="menuMain-medium">
            <div class="menuHeader menuHeaderLarge">
                <div class="menuIcon iconLarge">
                    <svg class="svg-icon" viewBox="0 0 100 100">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-clone-sheep-blue"></use>
                    </svg>
                </div>

                <div class="menuHeaderText">
                    <span class="largeText">Make a copy</span>
                </div>
            </div>

            <div class="menuSection large">
                <input id="clonedProjectTitle" class="sg-inputAreas" title="Name of new project" type="text" placeholder="Copy of" value="Copy of" required/>
            </div>

            <div class="menuSection large futureFeature">
                <input id="shareWithPeople" type="checkbox" style="float:left;margin-right:10px;margin-top:12px;" required/>

                <div class="menuText">Share with same people</div>
            </div>

            <div class="menuSection large sg-errorSection">
                <div id="" class="sg-errorTextStyle"></div>
            </div>

            <div id="cloneProjectBtn" class="menuSection large sg-actionButton sg-green1">
                <div class="sg-textWhite sg-largeButtonText sg-centeredText">Copy</div>
            </div>

            <div class="menuSection large">
                <div id="clonedProjectUpgradeErrorMsg" class="sg-smallText sg-textGrey sg-centeredText" title="Copy a project">Note: you will be asked to upgrade first.</div>
            </div>
        </div>
    </div>
</script>

<script id="changeNameAndPhotoTemplate" type="text/x-underscore">
    <div id="changeNameAndPhoto" class="modalWindowContentFrame modalWindowContentFrameMedium">
        <div class="menuHeader menuHeaderLarge">
            <div class="menuHeaderText ">
                {{#forCollab}}
                <span class="mediumText">Set name and photo</span>
                {{/forCollab}}
                {{^forCollab}}
                <span class="mediumText">Set name and photo</span>
                {{/forCollab}}
            </div>
        </div>
        <div class="clear"></div>
    	<div class="grid">
    		<div class="g-4 leftPart">
    			<div id="currentPhoto">
    				{{#photo}}
    					<img src="{{photo}}">
    				{{/photo}}
    				{{^photo}}
    					{{firstLetter}}
    				{{/photo}}
    			</div>
    			{{#uploadButton}}
    				{{> button}}
				{{/uploadButton}}
    		</div>
    		<div class="g-8 rightPart">
	            {{#saveChangesInput}}
	            	{{> textbox}}
	            {{/saveChangesInput}}

	            {{#saveChangesButton}}
    				{{> button}}
				{{/saveChangesButton}}
    		</div>
    		
    	</div>
    </div>
</script>

<script id="projectListTemplate" type="text/x-underscore">
	<div id="projectList" class="modalWindowContentFrame modalWindowContentFrameLarge">
		<div class="menuHeader menuHeaderLarge">
			<div class="menuIcon iconLarge">
				<svg class="svg-icon" viewBox="0 0 100 100"><use xlink:href="#icon-open-project-blue"/></svg>
			</div>

			<div class="menuHeaderText">
				<span id="projectListLabel" class="largeText">Active projects</span>

				<div class="projectSettingsSearchBox">
				<input type="text" class="sg-inputAreas" id="projectSettingsSearchBoxInput" placeholder="Search, filter and sort projects" />
				<div id="projectSettingsFilter" class="menuOptions down">
					<ul>
						<li class="activeMenuOption" data-group="active">Active projects</li>
						<li data-group="archived">Archived projects</li>
						<li data-group="my shared">My shared projects</li>
						<li data-group="shared with me">Projects shared with me</li>
						<li class="separator"><hr/></li>
						<li class="activeMenuOption" data-sort="updated" data-order="asc">Sort by last update date</li>
						<li data-sort="name" data-order="asc">Sort by name</li>
						<li data-sort="created" data-order="asc">Sort by creation date</li>
						<li class="separator"><hr/></li>
						<li class="group" data-group="deleted">Deleted projects</li>
					</ul>
				</div>
			</div>
			</div>
		</div>

		<hr>

        <div id="new-project_btn" class="new-project sg-button">
            <svg class="svg-icon" viewBox="0 0 22 22">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#folder-add"></use>
            </svg>
            <span>New project</span>
        </div>

		<div class="viewportRoot">

			<div class="viewport" tabindex="0">

			    <div id="project-list-button-wrapper" class="centered-buttons-wrapper">
			        <div class="msg msg1">You don't have active projects</div>
                    <div class="new-project sg-actionButton sg-blue1">
                        <span class="sg-largeButtonText sg-textWhite">
                            Create new project
                        </span>
                    </div>
                </div>

				<div class="overview">
					<div id="projectSettingsMainContent" class="projectSettingsMainContent"></div>
				</div>
			</div>
		</div>
	</div>
</script>

<script id="teamManagementTemplate" type="text/x-underscore">
	<form id="teamManagement" class="modalWindowContentFrame modalWindowContentFrameLarge">
		<div class="menuHeader menuHeaderLarge">
			<div class="menuIcon iconLarge">
				<svg class="svg-icon" viewBox="0 0 100 100"><use xlink:href="#icon-teams"/></svg>
			</div>

			<div class="menuHeaderText">
				<span class="largeText">My team</span>
			</div>

			<div id="shareAllProjectsBtn" class="sg-toggleButtonLarge futureFeature" alt="" title="">
				<div class="sg-toggleButtonLargeCaption sg-toggleButtonTextRight">Yes</div>
				<div class="sg-toggleButtonLargeCaption sg-toggleButtonTextLeft">No</div>
				<div class="sg-toggleButtonLargePointer"></div>
			</div>

			<div class="menuText futureFeature" style="float:right;margin-right:10px;">
				Share all projects
			</div>
		</div>
		{{#canAddTeammates}}
		<div id="addTeammateSection" class="menuSection menuSectionForm addTeammateSection">
			<div id="addTeammateIcon" class="menuIcon">
				<svg class="svg-icon" viewBox="0 0 100 100"><use xlink:href="#icon-add-collaborators-grey"/></svg>
			</div>

			<input id="teammateEmail" class="sg-inputAreas" type="text" placeholder="email@example.com" required/>

			<div id="addTeammate" class="sg-actionButton sg-green1">
				<div class="sg-textWhite sg-largeButtonText sg-centeredText">Add to team</div>
			</div>

			<div class="error">Invalid email address</div>
		</div>
		{{/canAddTeammates}}

		<div id="teamList" class="menuSection large"></div>

		<div>
            <input id="fluid-menu-upgrade-for-team" type="button" value="Upgrade to a team account" class="menuSection large sg-actionButton sg-green1 sg-textWhite sg-largeButtonText sg-centeredText">

            <div class="menuSection large">
                <div id="teamUpgradeErrorMsg" class="sg-smallText sg-textGrey sg-centeredText" title="Upgrade needed">Note: you must be on a team account to invite team members.</div>
            </div>
        </div>
	</form>
</script>

<script id="newProjectTemplate" type="text/x-underscore">
    <div id="newProject" class="modalWindowContentFrame">
        <div class="menuMain-medium">
            <div class="menuHeader menuHeaderLarge">
                <div class="menuIcon iconLarge">
                    <svg class="svg-icon" viewBox="0 0 100 100">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-add-project-blue"></use>
                    </svg>
                </div>

                <div class="menuHeaderText">
                    <span class="largeText">New project</span>
                </div>
            </div>

            <form id="newProjectForm">
                <div class="menuSection large">
                    <input id="newProjectTitle" type="text" pattern="\s*(?:\S+\s*)+" class="sg-inputAreas" required title="Name of new project" name="newProjectName" placeholder="Project name">
                </div>

                <div class="menuSection large">
                    <select id="newProjectDeviceType" class="sg-inputAreas" name="projectDeviceType" required title="Choose device resolution">
                        <option value="" selected>I'm designing for...</option>
                    </select>
                </div>

                <div id="newProjectOrientationSelector" class="menuSection large">
                    <label id="columnOrientation" class="sg-column" title="Portrait orientation">
                        <input class="sg-radioButton" type="radio" value="Portrait" name="projectOrientationForm" checked>

                        <div class="menuText">Portrait</div>
                    </label>

                    <label class="sg-column" title="Landscape orientation">
                        <input class="sg-radioButton" type="radio" value="Landscape" name="projectOrientationForm">

                        <div class="menuText">Landscape</div>
                    </label>
                </div>

                <div class="menuSection large futureFeature">
                    <div id="shareWithTeamCaption" class="menuText" style="width:130px;">Share with team</div>

                    <div id="shareWithTeamBtn" class="sg-toggleButtonLarge" alt="" title="">
                        <div class="sg-toggleButtonLargeCaption sg-toggleButtonTextRight">Yes</div>
                        <div class="sg-toggleButtonLargeCaption sg-toggleButtonTextLeft">No</div>
                        <div class="sg-toggleButtonLargePointer"></div>
                    </div>
                </div>


                <div class="menuSection large sg-errorSection">
                    <div id="newProjectSystemErrorMsg" class="futureFeature sg-errorTextStyle"></div>
                </div>

                <input id="fluid-menu-add-project" type="submit" value="Create" class="menuSection large sg-actionButton sg-green1 sg-textWhite sg-largeButtonText sg-centeredText">

                <div class="menuSection large">
                    <div id="newProjectUpgradeErrorMsg" class="sg-smallText sg-textGrey sg-centeredText" title="Create a new project">Note: you will be asked to upgrade first.</div>
                </div>
            </form>
        </div>
    </div>
</script>


<script id="accountSettingsTemplate" type="text/x-underscore">
    <div id="accountSettings" class="">
        <div class="left-panel">
            <div id="currentPhoto" class="user-info">
                {{#avatar}}
                	<img class="user-avatar" src="{{avatar}}"/>
                {{/avatar}}
				
                {{^avatar}}
					<div class="user-no-avatar">
						<div class="no-avatar-text">
							no avatar
						</div>
					</div>
                {{/avatar}}
                
                <div data-component-id="uploadButton" data-nobounce="">
                    <label>
                        <div class="avatar-upload" data-nobounce="">
                            <svg class="avatar-upload-icon" viewBox="-25 -25 150 150">
                                <use xlink:href="#icon-smart-cam-white"/>
                            </svg>
                            
                            <input data-id="photo-upload" accept="image/*" name="photo-upload" type="file" hidden="">
                        </div>
                    </label>
                </div>
				
                <div class="user-name">{{name}}</div>
				
                <div class="user-email">{{email}}</div>
            </div>
            
            <button id="userSettingsPersonalDetails" class="panel-link" data-panel-name="personalDetails">
                <svg class="sg-icon sg-settingsIcon" viewBox="-25 -25 150 150">
                    <use xlink:href="#icon-team-member-grey"/>
                </svg>
				
                <span>Personal details</span>
            </button>
			
            <button id="userSettingsTeammates" class="panel-link" data-panel-name="teammates">
                <svg class="sg-icon sg-settingsIcon" viewBox="-25 -25 150 150">
                    <use xlink:href="#icon-users"/>
                </svg>
				
                <span>Teammates</span>
            </button>
			
            <button id="userSettingsBillingInformation" class="panel-link" data-panel-name="billingInformation">
                <svg class="sg-icon sg-settingsIcon" viewBox="-25 -25 150 150">
                    <use xlink:href="#icon-card-details-grey"/>
                </svg>
				
                <span>Receipts and billing</span>
            </button>
            
            <div title="Sign out" alt="Sign out" id="logout" class="signout-button menuSection sg-hoverMenus">
				Sign out
			</div>
        </div>
        
        <div class="right-panel ps-container"></div>
    </div>
</script>

<script id="personalDetailsTemplate" type="text/x-underscore">
    <div id="personalDetails" class="dialog-panel">
        <div class="dialog-panel-header">Personal details</div>
        
        <hr>
        
        <div class="section-title">Name</div>
        
        <form id="changeNameForm" data-name="setUserName" method="post" action="" onsubmit="return false;">
            <div class="form-group">
                <div class="dialog-panel-label">Your name</div>
                
                <input id="userSettingsChangeName" class="dialog-panel-input-text sg-inputAreas" type="text" name="name" value="{{name}}" placeholder="Your name" alt="Enter your name" title="Enter your name" required>
            </div>
            
            <div class="validationContainer top-10">
                <div class="validationMessage"></div>
            </div>
            
            <div id="userSettingsChangeNameBottom" class="dialog-panel-button top-10">
                <input id="userSettingsChangeNameSubmit" type="submit" class="dialog-panel-button-text top-10 buttonSubmit sg-actionButton sg-largeButtonText sg-textWhite sg-blue2" alt="Change Name" title="Change Name" value="Save" />
            </div>
        </form>
        
        <div class="blank-margin"></div>
        
        <hr>
        
        <div class="section-title">Email</div>
        
        <form id="changeEmailForm" data-name="changeEmail" method="post" action="" onsubmit="return false;">
            <div class="form-group">
                <div class="dialog-panel-label">New email address</div>
                
                <input id="userSettingsChangeEmailNew" class="dialog-panel-input-text sg-inputAreas" type="email" name="email" value="{{email}}" placeholder="you@example.com" alt="Enter New E-mail Address" title="Enter New E-mail Address" required>
            </div>
            
            <div class="form-group top-20">
                <div class="dialog-panel-label">Password</div>
                
                <input id="userSettingsChangeEmailPass" type="password" class="dialog-panel-input-password sg-inputAreas" name="pass" placeholder="************" value="" alt="Enter Password" title="Enter Password" required>
            </div>
            
            <div class="validationContainer top-10">
                <div class="validationMessage"></div>
            </div>
            
            <div id="userSettingsChangeEmailBottom" class="dialog-panel-button top-10">
                <input type="submit" class="dialog-panel-button-text top-10 buttonSubmit sg-actionButton sg-largeButtonText sg-textWhite sg-blue2" alt="Change E-mail" title="Change E-mail" value="Save" />
            </div>
        </form>
        
        <div class="blank-margin"></div>
        
        <hr>
        
        <div class="section-title">Password</div>
        
        <form id="changePassForm" data-name="changePass" method="post" action="" onsubmit="return false;">
            <div class="form-group">
                <div class="dialog-panel-label">Current Password</div>
                
                <input id="userSettingsChangePasswordOld" class="dialog-panel-input-password sg-inputAreas" type="password" name="pass" placeholder="************" value="" required>
            </div>
			
            <div class="form-group top-20">
                <div class="dialog-panel-label">New Password</div>
                
                <input id="userSettingsChangePasswordNew" class="dialog-panel-input-password sg-inputAreas" type="password" name="pass2" placeholder="************" value="" required>
            </div>
            
            <div class="validationContainer top-10">
                <div class="validationMessage"></div>
            </div>
			
            <div class="dialog-panel-button top-10">
                <input type="submit" class="dialog-panel-button-text buttonSubmit sg-actionButton sg-largeButtonText sg-textWhite sg-blue2" alt="Change Password" title="Change Password" value="Save" />
            </div>
        </form>
        
        <div class="blank-margin"></div>
        
        <div class="blank-margin"></div>
    </div>
</script>

<script id="teammatesTemplate" type="text/x-underscore">
	<div>
		<form id="teammates" class="dialog-panel">
			<div class="dialog-panel-header">Teammates</div>
			
			<hr>
			
			{{^teamMember}}
				<div class="section-empty-icon top-50">
                    <svg viewBox="-25 -25 150 150">
                        <use xlink:href="#icon-users-blue"/>
                    </svg>
                </div>
				
				<div class="section-empty-title">Get your entire team on board</div>
				
				<div class="section-empty-description">Design is collaborative. Add up to 4 extra teammates and<br>work together in real time on your designs.</div>
				
				<div class="dialog-upgrade-button top-50">
					<input id="upgradeForTeam" type="button" class="dialog-upgrade-button-text buttonSubmit sg-actionButton sg-largeButtonText sg-textWhite sg-blue2" alt="Upgrade to a team 5 account" title="Upgrade to a team 5 account" value="Upgrade to a team 5 account">
				</div>
                
                <div class="section-empty-note top-15">Need more than 5 users? <span id="openIntercom">Contact us</span>.
                </div>
			{{/teamMember}}
			
			{{#teamMember}}

				<div id="addToTeamSection" class="menuSection menuSectionForm addToTeamSection top-20">
					{{#canAddTeammates}}
					<div class="grid">
						<div class="g-8">
							<input id="addToTeam" class="dialog-panel-input-text sg-inputAreas" type="text" placeholder="email@example.com" required/>
						</div>
						
						<div class="g-4">
							<div data-component-id="addToTeamButton" class="dialog-panel-button component component-button" data-nobounce="">
								<input id="addToTeamButton" type="submit" class="dialog-panel-button-text buttonSubmit sg-largeButtonText" alt="Change Password" title="Change Password" value="Add to team" />
							</div>
						</div>
					</div>
					<div class="error">Invalid email address</div>
                    
                    <div id="teammatesList" class="canAdd menuSection large top-20"></div>
					{{/canAddTeammates}}
                    
                    {{^canAddTeammates}}
					   <div id="teammatesList" class="canNotAdd menuSection large top-20"></div>
                    {{/canAddTeammates}}
				</div>
				
				<div class="blank-margin"></div>
				
				<div class="blank-margin"></div>
			{{/teamMember}}
		</form>
	</div>
</script>

<script id="billingInformationTemplate" type="text/x-underscore">
    <div id="billingInformation" class="dialog-panel">
        <div class="dialog-panel-header">Receipts and billing</div>
        
        <hr>
		
		{{^isFreeAccount}}
            <div class="section-title">Details</div>

			<div id="billingInformationDataList">

			</div>

			<div id="billingInformationDataList2">
                <div class="grid data-list-item top-30">
					<div class="g-6">
						<div class="data-list-label">Current account type</div>
					</div>
					
					<div class="g-6">
						<div class="data-list-value">{{accType}}</div>
					</div>
				</div>
				
                <div class="grid data-list-item top-30">
					<div class="g-6">
						<div class="data-list-label">Last payment date</div>
					</div>
					
					<div class="g-6">
						<div class="data-list-value"><span class="last-payment-result">{{lastPaymentResult}}</span>&nbsp;&nbsp;&nbsp;{{lastPaymentDate}}</div>
					</div>
				</div>

				{{#scheduledDowngradeDate}}
				    <div class="grid data-list-item top-30">
                        <div class="g-6">
                            <div class="data-list-label">Scheduled downgrade date</div>
                        </div>

                        <div class="g-6">
                            <div class="data-list-value">{{scheduledDowngradeDate}}</div>
                        </div>
                    </div>
				{{/scheduledDowngradeDate}}
				{{^scheduledDowngradeDate}}
				    <div class="grid data-list-item top-30">
                        <div class="g-6">
                            <div class="data-list-label">{{#hasDowngradeDate}}Upgrade date{{/hasDowngradeDate}}{{^hasDowngradeDate}}Next payment date{{/hasDowngradeDate}}</div>
                        </div>

                        <div class="g-6">
                            <div class="data-list-value">{{#hasUpgradeDate}}{{upgradeDate}}{{/hasUpgradeDate}}{{^hasUpgradeDate}}{{nextPaymentDate}}{{/hasUpgradeDate}}</div>
                        </div>
                    </div>
				{{/scheduledDowngradeDate}}
			</div>
        	
			<div class="blank-margin"></div>
            
            {{#hadPayment}}
            <hr>
            
        	<div class="section-title">Receipts</div>
        	
        	<form id="" method="post" action="" onsubmit="return false;">
                <div class="grid toggleGrid">
					<div class="g-9">
						<div class="dialog-panel-toggle-label">Turn on monthly email receipts</div>
					</div>
					
					<div class="g-3">
						<div class="dialog-panel-toggle-button">
							<label class="billingSwitch">
								<input id="billingSwitch" type="checkbox" class="{{#monthlyReceipts}}pressed{{/monthlyReceipts}}" {{#monthlyReceipts}}checked{{/monthlyReceipts}}>
								
								<div class="billingSlider billingRound"></div>
							</label>
						</div>
					</div>
				</div>
            	
				<div id="billingMonthlySection" class="{{#monthlyReceipts}}show{{/monthlyReceipts}}">
					<div id="emailForReceiptsForm">
						<div class="form-group top-10">
							<div class="dialog-panel-label">Enter an email address for each recipient</div>
							
							<input id="emailForReceipts" type="text"  class="dialog-panel-input-text sg-inputAreas" name="billingEmails" placeholder="lorem@example.com, ipsum@example.com" value="" required pattern="((\S+@\S+\.\S+),?\s?)+">
						</div>
						
						<div class="validationContainer top-10">
							<div class="validationMessage"></div>
						</div>
						
						<div class="dialog-panel-button top-10">
							<input id="emailForReceiptsButton" class="dialog-panel-button-text buttonSubmit sg-actionButton g-textWhite sg-blue2" type="submit" value="Save"/>
						</div>
					</div>
				</div>
            </form>
			
			<div>
				<div id="receiptList">
					<div class="scrollbar"><div class="track">
						<div class="thumb">
							<div class="end"></div>
						</div>
					</div>
				</div>
				
				<div class="viewport">
					<div class="dialog-panel-button top-40">
						<input id="downloadAllReceiptsButton" type="button" class="dialog-panel-button-text buttonSubmit sg-actionButton g-textWhite sg-blue2" type="button" value="Download all" alt="Download All" title="Download All"/>
					</div>
					
					<div class="overview top-20"></div>
				</div>
			</div>
        	
			<div class="blank-margin"></div>
			
			<hr>
			
			<div class="section-title">Billing</div>
			
			<div id="changeBillingAdressButton" class="dialog-panel-button top-20">
				<input id="" type="submit" class="dialog-panel-button-text buttonSubmit sg-actionButton sg-largeButtonText sg-textWhite sg-blue2" value="Change billing address" />
			</div>
			
			<div id="updateCardDetailsButton" class="dialog-panel-button top-20">
				<input id="" type="submit" class="dialog-panel-button-text buttonSubmit sg-actionButton sg-largeButtonText sg-textWhite sg-blue2" value="Update card details" />
			</div>
           		
				{{^scheduledDowngradeDate}}
					<div id="cancelBillingButton" class="dialog-panel-button top-20">
						<input id="" type="submit" class="dialog-panel-button-text buttonSubmit sg-actionButton sg-largeButtonText sg-textWhite sg-red" value="Cancel billing" />
					</div>
				{{/scheduledDowngradeDate}}
		    {{/hadPayment}}
			
            {{^hadPayment}}
				{{#canDowngrade}}
					{{^scheduledDowngradeDate}}
						<div id="cancelBillingButton" class="dialog-panel-button top-20">
							<input id="" type="submit" class="dialog-panel-button-text buttonSubmit sg-actionButton sg-largeButtonText sg-textWhite sg-red" value="Cancel billing" />
						</div>
					{{/scheduledDowngradeDate}}
				{{/canDowngrade}}
			{{/hadPayment}}
			
			<div class="blank-margin"></div>
			
			<div class="blank-margin"></div>
			
		{{/isFreeAccount}}
		
        {{#isFreeAccount}}
            <div class="section-empty-title">Unlock your creativity</div>

            <div class="section-empty-description">Get unlimited access to all editing and sharing features including<br>uploads, libraries, collaboration and live video calling!</div>
				
			<div class="dialog-upgrade-button top-40">
            	<input id="upgradeForBilling" type="button" class="dialog-upgrade-button-text buttonSubmit sg-actionButton sg-largeButtonText sg-textWhite sg-blue2" alt="Change account type" title="Change account type" value="Upgrade now">
			</div>
            
            <div class="section-empty-note top-15">30-day money-back guarantee that starts after your first payment.</div>
		{{/isFreeAccount}}
    </div>
</script>

<script id="changeBillingAddressTemplate" type="text/x-underscore">
    <div id="changeBillingAddress" class="">
		<div class="dialog-panel-header">Billing Address</div>
        
        <hr>
		
        <form id="changeBillingAddressForm" data-name="changeBillingAddress" method="post" action="" onsubmit="return false;">
            <div id="userSettingsBillingTop">
                <div class="form-group">
                    <div class="dialog-panel-label">Company</div>
                    
                    <input id="userSettingsBillingCompany" type="text" class="dialog-panel-input-text sg-inputAreas" name="company" placeholder="Company Name" value="{{billingCompany}}" required>
                    
                    <div class="clear"></div>
                    
                    <div class="align-right">
                        <div class="form-error-area" data-for="userSettingsBillingCompany"></div>
                    </div>
                </div>
                
                <div class="form-group">
                    <div class="dialog-panel-label">Address</div>
                    
                    <textarea id="userSettingsBillingAddress" class="dialog-panel-input-textarea sg-textboxAreas" rows="5" name="address" placeholder="Address to appear on your receipt" value="{{billingAddress}}" required></textarea>
                    
                    <div class="clear"></div>
                    
                    <div class="align-right">
                        <div class="form-error-area" data-for="userSettingsBillingAddress"></div>
                    </div>
                </div>
                
                <div class="form-group">
                    <div class="dialog-panel-label">Country</div>
                    
                    <div class="dialog-panel-input-other">
                        <select class="sg-inputAreas" id="billingCountry" name="billingCountry">
<option value="">Country</option>
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option>
<option value="BH">Bahrain</option>
<option value="BD">Bangladesh</option>
<option value="BB">Barbados</option>
<option value="BY">Belarus</option>
<option value="BE">Belgium</option>
<option value="BZ">Belize</option>
<option value="BJ">Benin</option>
<option value="BM">Bermuda</option>
<option value="BT">Bhutan</option>
<option value="BO">Bolivia, Plurinational State of</option>
<option value="BQ">Bonaire, Sint Eustatius and Saba</option>
<option value="BA">Bosnia and Herzegovina</option>
<option value="BW">Botswana</option>
<option value="BV">Bouvet Island</option>
<option value="BR">Brazil</option>
<option value="IO">British Indian Ocean Territory</option>
<option value="BN">Brunei Darussalam</option>
<option value="BG">Bulgaria</option>
<option value="BF">Burkina Faso</option>
<option value="BI">Burundi</option>
<option value="KH">Cambodia</option>
<option value="CM">Cameroon</option>
<option value="CA">Canada</option>
<option value="CV">Cape Verde</option>
<option value="KY">Cayman Islands</option>
<option value="CF">Central African Republic</option>
<option value="TD">Chad</option>
<option value="CL">Chile</option>
<option value="CN">China</option>
<option value="CX">Christmas Island</option>
<option value="CC">Cocos (Keeling) Islands</option>
<option value="CO">Colombia</option>
<option value="KM">Comoros</option>
<option value="CG">Congo</option>
<option value="CD">Congo, the Democratic Republic of the</option>
<option value="CK">Cook Islands</option>
<option value="CR">Costa Rica</option>
<option value="CI">Côte d'Ivoire</option>
<option value="HR">Croatia</option>
<option value="CU">Cuba</option>
<option value="CW">Curaçao</option>
<option value="CY">Cyprus</option>
<option value="CZ">Czech Republic</option>
<option value="DK">Denmark</option>
<option value="DJ">Djibouti</option>
<option value="DM">Dominica</option>
<option value="DO">Dominican Republic</option>
<option value="EC">Ecuador</option>
<option value="EG">Egypt</option>
<option value="SV">El Salvador</option>
<option value="GQ">Equatorial Guinea</option>
<option value="ER">Eritrea</option>
<option value="EE">Estonia</option>
<option value="ET">Ethiopia</option>
<option value="FK">Falkland Islands (Malvinas)</option>
<option value="FO">Faroe Islands</option>
<option value="FJ">Fiji</option>
<option value="FI">Finland</option>
<option value="FR">France</option>
<option value="GF">French Guiana</option>
<option value="PF">French Polynesia</option>
<option value="TF">French Southern Territories</option>
<option value="GA">Gabon</option>
<option value="GM">Gambia</option>
<option value="GE">Georgia</option>
<option value="DE">Germany</option>
<option value="GH">Ghana</option>
<option value="GI">Gibraltar</option>
<option value="GR">Greece</option>
<option value="GL">Greenland</option>
<option value="GD">Grenada</option>
<option value="GP">Guadeloupe</option>
<option value="GU">Guam</option>
<option value="GT">Guatemala</option>
<option value="GG">Guernsey</option>
<option value="GN">Guinea</option>
<option value="GW">Guinea-Bissau</option>
<option value="GY">Guyana</option>
<option value="HT">Haiti</option>
<option value="HM">Heard Island and McDonald Islands</option>
<option value="VA">Holy See (Vatican City State)</option>
<option value="HN">Honduras</option>
<option value="HK">Hong Kong</option>
<option value="HU">Hungary</option>
<option value="IS">Iceland</option>
<option value="IN">India</option>
<option value="ID">Indonesia</option>
<option value="IR">Iran, Islamic Republic of</option>
<option value="IQ">Iraq</option>
<option value="IE">Ireland</option>
<option value="IM">Isle of Man</option>
<option value="IL">Israel</option>
<option value="IT">Italy</option>
<option value="JM">Jamaica</option>
<option value="JP">Japan</option>
<option value="JE">Jersey</option>
<option value="JO">Jordan</option>
<option value="KZ">Kazakhstan</option>
<option value="KE">Kenya</option>
<option value="KI">Kiribati</option>
<option value="KP">Korea, Democratic People's Republic of</option>
<option value="KR">Korea, Republic of</option>
<option value="KW">Kuwait</option>
<option value="KG">Kyrgyzstan</option>
<option value="LA">Lao People's Democratic Republic</option>
<option value="LV">Latvia</option>
<option value="LB">Lebanon</option>
<option value="LS">Lesotho</option>
<option value="LR">Liberia</option>
<option value="LY">Libya</option>
<option value="LI">Liechtenstein</option>
<option value="LT">Lithuania</option>
<option value="LU">Luxembourg</option>
<option value="MO">Macao</option>
<option value="MK">Macedonia, the former Yugoslav Republic of</option>
<option value="MG">Madagascar</option>
<option value="MW">Malawi</option>
<option value="MY">Malaysia</option>
<option value="MV">Maldives</option>
<option value="ML">Mali</option>
<option value="MT">Malta</option>
<option value="MH">Marshall Islands</option>
<option value="MQ">Martinique</option>
<option value="MR">Mauritania</option>
<option value="MU">Mauritius</option>
<option value="YT">Mayotte</option>
<option value="MX">Mexico</option>
<option value="FM">Micronesia, Federated States of</option>
<option value="MD">Moldova, Republic of</option>
<option value="MC">Monaco</option>
<option value="MN">Mongolia</option>
<option value="ME">Montenegro</option>
<option value="MS">Montserrat</option>
<option value="MA">Morocco</option>
<option value="MZ">Mozambique</option>
<option value="MM">Myanmar</option>
<option value="NA">Namibia</option>
<option value="NR">Nauru</option>
<option value="NP">Nepal</option>
<option value="NL">Netherlands</option>
<option value="NC">New Caledonia</option>
<option value="NZ">New Zealand</option>
<option value="NI">Nicaragua</option>
<option value="NE">Niger</option>
<option value="NG">Nigeria</option>
<option value="NU">Niue</option>
<option value="NF">Norfolk Island</option>
<option value="MP">Northern Mariana Islands</option>
<option value="NO">Norway</option>
<option value="OM">Oman</option>
<option value="PK">Pakistan</option>
<option value="PW">Palau</option>
<option value="PS">Palestinian Territory, Occupied</option>
<option value="PA">Panama</option>
<option value="PG">Papua New Guinea</option>
<option value="PY">Paraguay</option>
<option value="PE">Peru</option>
<option value="PH">Philippines</option>
<option value="PN">Pitcairn</option>
<option value="PL">Poland</option>
<option value="PT">Portugal</option>
<option value="PR">Puerto Rico</option>
<option value="QA">Qatar</option>
<option value="RE">Réunion</option>
<option value="RO">Romania</option>
<option value="RU">Russian Federation</option>
<option value="RW">Rwanda</option>
<option value="BL">Saint Barthélemy</option>
<option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>
<option value="KN">Saint Kitts and Nevis</option>
<option value="LC">Saint Lucia</option>
<option value="MF">Saint Martin (French part)</option>
<option value="PM">Saint Pierre and Miquelon</option>
<option value="VC">Saint Vincent and the Grenadines</option>
<option value="WS">Samoa</option>
<option value="SM">San Marino</option>
<option value="ST">Sao Tome and Principe</option>
<option value="SA">Saudi Arabia</option>
<option value="SN">Senegal</option>
<option value="RS">Serbia</option>
<option value="SC">Seychelles</option>
<option value="SL">Sierra Leone</option>
<option value="SG">Singapore</option>
<option value="SX">Sint Maarten (Dutch part)</option>
<option value="SK">Slovakia</option>
<option value="SI">Slovenia</option>
<option value="SB">Solomon Islands</option>
<option value="SO">Somalia</option>
<option value="ZA">South Africa</option>
<option value="GS">South Georgia and the South Sandwich Islands</option>
<option value="SS">South Sudan</option>
<option value="ES">Spain</option>
<option value="LK">Sri Lanka</option>
<option value="SD">Sudan</option>
<option value="SR">Suriname</option>
<option value="SJ">Svalbard and Jan Mayen</option>
<option value="SZ">Swaziland</option>
<option value="SE">Sweden</option>
<option value="CH">Switzerland</option>
<option value="SY">Syrian Arab Republic</option>
<option value="TW">Taiwan</option>
<option value="TJ">Tajikistan</option>
<option value="TZ">Tanzania, United Republic of</option>
<option value="TH">Thailand</option>
<option value="TL">Timor-Leste</option>
<option value="TG">Togo</option>
<option value="TK">Tokelau</option>
<option value="TO">Tonga</option>
<option value="TT">Trinidad and Tobago</option>
<option value="TN">Tunisia</option>
<option value="TR">Turkey</option>
<option value="TM">Turkmenistan</option>
<option value="TC">Turks and Caicos Islands</option>
<option value="TV">Tuvalu</option>
<option value="UG">Uganda</option>
<option value="UA">Ukraine</option>
<option value="AE">United Arab Emirates</option>
<option value="GB">United Kingdom</option>
<option value="US">United States</option>
<option value="UM">United States Minor Outlying Islands</option>
<option value="UY">Uruguay</option>
<option value="UZ">Uzbekistan</option>
<option value="VU">Vanuatu</option>
<option value="VE">Venezuela, Bolivarian Republic of</option>
<option value="VN">Viet Nam</option>
<option value="VG">Virgin Islands, British</option>
<option value="VI">Virgin Islands, U.S.</option>
<option value="WF">Wallis and Futuna</option>
<option value="EH">Western Sahara</option>
<option value="YE">Yemen</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select>

                    </div>
                    
                    <div class="clear"></div>
                    
                    <div class="align-right">
                        <div class="form-error-area" data-for="userSettingsBillingCountry"></div>
                    </div>
                </div>
                
                <div id="vatSection">
                    <div class="dialog-panel-label">VAT number</div>
                    
                    <input id="vatNumber" type="text" class="dialog-panel-input-text sg-inputAreas" name="vat" placeholder="VAT Number" value="">
                    
                    <div class="clear"></div>
                    
                    <div class="align-right">
                        <div class="form-error-area" data-for="userSettingsBillingVAT"></div>
                    </div>
                </div>
            </div>
            
            <div class="validationContainer top-10">
                <div class="validationMessage"></div>
            </div>
            
            <div id="userSettingsBillingBottom" class="dialog-panel-button top-10">
                <input id="changeBillingAddressSubmit" type="submit" class="dialog-panel-button-text top-10 buttonSubmit sg-actionButton sg-largeButtonText sg-textWhite sg-blue2" value="Save" />
            </div>
        </form>
	</div>
</script>

<script id="updateCardDetailsTemplate" type="text/x-underscore">
    <div id="updateCardDetails" class="">
		<div class="dialog-panel-header">Card Details</div>

		<hr>

		<div class="modalWindowHeaderMessage" id="updateCardForced">We recently had difficulty billing your Fluid UI account. Please update or re-enter your credit card details to continue.</div>

		<form id="updateCardForm" method="post">
			<div id="userSettingsCardTop">
				<div class="form-group">
					<div class="dialog-panel-label">Card number <span>The 16 digits on front of your card</span></div>
					
					<input id="updateCardNumber" type="number" class="dialog-panel-input-text sg-inputAreas" name="number" value="" maxlength="19" alt="Card Number" title="Card Number" placeholder="Card Number" required>
					
					&nbsp;&nbsp;
					
					<span id="updateCardTypeLogo"></span>
					
					<input id="updateCardType" type="hidden" value="" name="type" alt="Card Type" title="Card Type" required>
					
					<div class="clear"></div>
				</div>
				
				<div class="grid">
					<div class="g-5">
						<div class="form-group">
							<div class="dialog-panel-label">Card expiration date</div>
							
							<select id="updateCardMonth" name="month" class="cardexpirefield sg-inputAreas" alt="Expiry Date" title="Expiry Date" required>
								<option selected disabled hidden value="">Month</option>
								<option value="01">01</option>
								<option value="02">02</option>
								<option value="03">03</option>
								<option value="04">04</option>
								<option value="05">05</option>
								<option value="06">06</option>
								<option value="07">07</option>
								<option value="08">08</option>
								<option value="09">09</option>
								<option value="10">10</option>
								<option value="11">11</option>
								<option value="12">12</option>
							</select>
							
							&nbsp;
							
							<select id="userSettingsCardYear" name="year" class="cardexpirefield sg-inputAreas" alt="Expiry Date" title="Expiry Date" required></select>
							
							<div class="clear"></div>
						</div>
					</div>
					
					<div class="g-6">
						<div class="form-group">
							<div class="dialog-panel-label">CVV</div>
                            
                            <div class="userSettingsControlsInput">
                                <div class="inputCVV">
                                    <input id="updateCardCvv" class="dialog-panel-input-other sg-inputAreas" type="text" value="" name="cvv" maxlength="4" alt="CVV number" title="CVV number" placeholder="CVV" required>
                                </div>
                                
                                <span id="cardIconsCVV" title="Credit Card Verification Value" alt="Credit Card Verification Value"></span>
                                
                                <div class="cvv-info">The last 3 digits<br>displayed on the back<br>of your card</div>
                            </div>
                            
                            <div class="clear"></div>
						</div>
					</div>
				</div>
                
                <div class="form-group top-20">
                    <div class="dialog-panel-label">Full name on the card</div>
                    
                    <input id="updateCardName" class="dialog-panel-input-text sg-inputAreas" type="text" name="name" value="" alt="Name On Card" title="Name On Card" placeholder="Name on Card" required>
                    
                    <div class="clear"></div>
                </div>
				
				<div class="validationContainer top-10">
					<div class="validationMessage"></div>
				</div>
				
				<div id="userSettingsCardBottom" class="dialog-panel-button top-10">
					<input id="cardSubmit" type="submit" class="dialog-panel-button-text top-10 buttonSubmit sg-actionButton sg-largeButtonText sg-textWhite sg-blue2" alt="Update" title="Update" value="Update" />
				</div>
			</div>
		</form>
	</div>
</script>

<script id="cancelBillingStep1Template" type="text/x-underscore">
	<div id="cancelBillingStep1" class="">
		<div class="dialog-panel-header">Cancel billing</div>
		
		<hr>
		
		<form data-name="cancel-billing" id="cancelBillingStep1Form">
			<div class="cancel-confirmation-box sg-spacer-20">
				<input id="cancelConfirmationBox" class="cancel-confirmation-checkbox sg-column" type="checkbox" name="confirmationFree" required>
				
				<label for="cancelConfirmationBox" class="cancel-confirmation-text sg-smallText sg-column sg-checkboxCaption">Cancel my paid account and prevent all future billing. I understand my account will remain active until the end of the next billing period and then return to a free account. After that, if I do not use it during the next 12 months, the account will be deleted.</label>
			</div>
			
			<br clear="all">     
			
			<div class="sg-spacer-15">
				<input id="cancelConfirmationPassword" name="pass" class="dialog-panel-input-password sg-inputAreas" type="password" value="" placeholder="************" required>
			</div>
			
			<div class="sg-messageBox sg-spacer-10 sg-centeredText hidden">
				<span id="pauseBillingEntryError" class="sg-errorTextStyle">Please fill out all fields</span>
				
				<span id="pauseBillingSystemError" class="sg-errorTextStyle">There was an unexpected error. Please 
					<a id="contactPageLink" href="https://www.fluidui.com/contact" target="_blank">contact us</a>
				</span>
				
				<span id="pauseBillingPasswordError" class="sg-errorTextStyle">Your password is not valid. Please try again</span>
			</div>
            
            <div class="validationContainer top-10">
                <div class="validationMessage"></div>
            </div>
			
            <div class="dialog-panel-button top-10">
                <input id="cancelBillingFeedback" type="submit" class="dialog-panel-button-text buttonSubmit sg-actionButton sg-largeButtonText sg-textWhite sg-blue2" alt="Give Feedback" title="Give Feedback" value="Step 2 - Give Feedback" />
            </div>
		</form> 
	</div>
</script>

<script id="cancelBillingStep2Template" type="text/x-underscore">
	<div id="cancelBillingStep2" class="">
        <div class="dialog-panel-header">Give feedback</div>
		
		<hr>
		
		<form id="cancelBillingStep2Form">
			<div id="cancelBillingExperienceContainer" class="cancel-billing-rating sg-spacer-10">
				<input id="experienceRating" type="hidden" name="experienceRating" value="-2" required/>
				<input type="hidden" name="accountEmail" value="" required/>
				<input type="hidden" name="password" value="" required/>

				<div id="experienceRatingPositive" class="experienceType" data-exp="1">
					<div class="experienceTypeIcon">
						<svg class="svg-icon" viewBox="0 0 100 100">
							<use xlink:href="#icon-great"></use>
						</svg>
					</div>
					
					<div class="experienceTypeText">It was great!</div>
				</div>
				
				<div id="experienceRatingNeutral" class="experienceType" data-exp="0">
					<div class="experienceTypeIcon">
						<svg class="svg-icon" viewBox="0 0 100 100">
							<use xlink:href="#icon-ok"></use>
						</svg>
					</div>
					
					<div class="experienceTypeText">It was OK.</div>
				</div>
				
				<div id="experienceRatingNegative" class="experienceType" data-exp="-1">
					<div class="experienceTypeIcon">
						<svg class="svg-icon" viewBox="0 0 100 100">
							<use xlink:href="#icon-bad"></use>
						</svg>
					</div>
					
					<div class="experienceTypeText">It needs work.</div>
				</div>
			</div>
			
			<br clear="all"> 
			
			<div id="cancelBillingReasonContainer" class="controlsInput sg-textBox">
				<textarea id="cancelBillingReason" class="dialog-panel-input-textarea sg-textboxAreas" placeholder="Could you give us one thought about your experience with FluidUI.com?" required></textarea>
			</div>
			
			<div id="confirmPass" class="controlsInput"></div>
			
			<div class="sg-messageBox sg-spacer-10 sg-centeredText hidden">
				<span id="pauseBillingSubmitError" class="sg-errorTextStyle">Please fill out all fields</span>
			</div>
            
            <div class="validationContainer top-10">
                <div class="validationMessage"></div>
            </div> 
			
            <div class="dialog-panel-button top-10">
                <input id="cancelBillingSubmitButton" type="submit" class="dialog-panel-button-text buttonSubmit sg-actionButton sg-largeButtonText sg-textWhite sg-blue2" alt="Cancel Billing" title="Cancel Billing" value="Cancel Billing" />
            </div>
		</form> 
	</div>
</script>

<script id="resetPasswordTemplate" type="text/x-underscore">
	<div id="resetPassword" class="modalWindowContentFrame modalWindowContentFrame">
		<div class="modalWindowHeader">
            <div name="accountEmailText" class="modalWindowHeaderText">Recover Password</div>
            <div class="clear"></div>
        </div>
        <form id="getMail" action="recoverPassword/" method="post">
            <div id="resetPasswordTop">
                <div class="userSettingsControlsGroup">
                    <div class="userSettingsControlsLabel">E-mail</div>
                    <div class="userSettingsControlsInput">
                        <input id="resetPasswordEmail" type="email" name="email" placeholder="you@email.com" value="" required>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
            <div class="validationContainer top-10">
                <div class="validationMessage"></div>
            </div>
            <div id="resetPasswordBottom" class="">
                <input id="resetPasswordSubmit" type="submit" class="sg-actionButton sg-textWhite textWhite top-10 buttonSubmit sg-blue2" value="Send Password Mail" />
            </div>
        </form>
	</div>
</script>

<script id="shareProjectTemplate" type="text/x-underscore">
    <div id="shareProject" class="modalWindowContentFrame modalWindowContentFrameLarge">
    	<section class="head grid">
    		<div class="g-7">
	    		<div class="menuIcon">
	    			<svg class="svg-icon" viewBox="0 0 100 100"><use xlink:href="#icon-share-blue"/></svg>
	    		</div>

	    		<div class="menuHeaderText menuHeaderTextLeft">
	    			<h1>Sharing</h1>
	    		</div>
    		</div>
    		<div class="g-4 shareWithMyTeam">
    			<div class="futureFeature">Share with my team</div>
    		</div>
    		<div class="g-1">
    			<div data-toggle="{{toggle}}" class="component component-toggle-button futureFeature">
    				<div class="toggle"></div>
    			</div>
    		</div>
    	</section>

    	<section class="divider">
    		<div class="sg-divider"></div>
    	</section>

    	<section class="grid fixMargins">
    		<div class="g-1">
    			<div class="menuIcon menuIcon-circle">
    				<svg class="svg-icon" viewBox="0 0 100 100"><use xlink:href="#icon-user-grey-new"/></svg>
    			</div>	
    		</div>
    		<div class="g-6">
    		    <div class="menuIcon">
    				<svg class="svg-icon" viewBox="0 0 100 100"><use xlink:href="#icon-email"/></svg>
    			</div>
    			<input id="collaboratorEmail" class="sg-inputAreas collaboratorEmail" type="text" placeholder="collaborator@email.com" required/>
    			<div class="errorElement">Invalid email address</div>
    		</div>
    		<div class="g-3">
    			<select id="collaboratorPermission" class="sg-inputAreas collaboratorPermission">
    				<option value="view">View</option>
    				<option value="comment">Comment</option>
    				<option value="sendCopy">Send a complete copy</option>
    				<option value="collaborate">Collaborate</option>
    			</select>
    		</div>
    		<div class="g-2">
    			<div id="addCollaborator" class="addCollaborator btn">INVITE</div>
    		</div>
    	</section>

    	<section class="divider divider-full">
    		<div class="sg-divider"></div>
    	</section>

		<div class="gray-container">
	    	<div class="viewportRoot">
				<div class="viewport">
					<div class="overview">
						<ul class="collaboratorsList"></ul>
					</div>
				</div>
				<div class="share-upgrade-prompt collapsed">
				    <div class="share-prompt-header">Communicate better with your team.</div>
				    <div class="share-prompt-msg">Upgrade now for unlimited sharing and commenting.</div>
				    <div class="buttons-wrapper">
				        <div class="btn close-prompt">Maybe later</div>
				        <div class="btn upgrade-link">Upgrade now</div>
				    </div>
				</div>
			</div>

			<section class="divider">
				<div class="sg-divider"></div>
			</section>

			<div class="copyUrl">
				<div class="label">You can copy this url for anyone to preview: </div>

				<div class="comment-switch sg-toggleButtonLarge" alt="" title="">
                    <div class="sg-toggleButtonLargePointer"></div>
                </div>
                <div class="label-2">allow comments</div>

				<div class="inputs-wrapper">
				    <input class="sg-inputAreas previewUrl" type="text" data-preview-url="{{previewUrl}}" data-comment-url="{{commentUrl}}" value="{{previewUrl}}"/>
				    <div id="copy-share-link" class="btn">Copy  </div>
				</div>
			</div>
		</div>
    </div>
</script>

<script id="collaboratorsTemplate" type="text/x-underscore">
	{{#collaborators}}
	<li data-email="{{email}}" class="grid {{#adding}}adding{{/adding}}">
		<div class="g-1">
			<div class="menuIcon menuIcon-circle color-{{colorIdx}}-bg">
				{{firstLetterOfName}}
			</div>
		</div>
		<div class="g-8">
			<div class="email">{{email}}</div>
		</div>
		<div class="g-3">
		    {{#owner}}
		        <div class="permission owner">project owner</div>
		    {{/owner}}
		    {{^owner}}
			<div class="permission">CAN {{permission}} <span class="f-icon-delete"></span></div>
			{{/owner}}
		</div>
	</li>
	{{/collaborators}}
</script>

<script id="upgradeTemplate" type="text/x-underscore">

    <div id="upgrade" class="modalWindowContentFrame modalWindowContentFrameExtraLarge sub-dialog-0">
        <div id="upgrade-1" class="modalWindowContent sub-dialog sub-dialog-visible">

                <div class="sub-dialog-inner">


                    <div class="pricingTabs">
                        <div class="container">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="tabs">
                                        <div class="tab monthly" data-period="month">
                                            <span>Pay monthly</span>
                                        </div>
                                        <div class="tab anually active" data-period="year">
                                            <span>Pay yearly<small> (more advantages)</small></span>
                                        </div>
                                    </div>

                                    <div class="advantages-box collapsed">
                                        <div class="month-pros pros">
                                            <div class="pro-head">Pay monthly</div>

                                            <div class="pro-item">- Flexible monthly billing</div>
                                            <div class="pro-item">- Cancel and restart any time</div>
                                            <div class="pro-item">- We'll save your projects at no extra cost in between</div>
                                        </div>
                                        <div class="year-pros pros">
                                            <div class="pro-head">Pay yearly</div>

                                            <div class="pro-item">- Save up to $281 on chosen your plan</div>
                                            <div class="pro-item">- Get up to 50% more active projects - free</div>
                                            <div class="pro-item">- Less receipts, less hassle</div>
                                            <div class="pro-item">- Help us build new features faster</div>
                                            <div class="icon-container">
                                                <svg class="svg-icon close" viewBox="0 0 100 100"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-cross-gray"></use></svg>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="plans clearfix">

                                            <div class="plan col-md-4 left">
                                                <div class="col-inner">
                                                    <div class="col-inner-2">
                                                        <div class="header">
                                                            <span class="icon entypo-users"></span>
                                                            <span class="plan-name">Solo</span>
                                                            <div class="price" data-month="$15/month" data-year="$8.25/month">
                                                                $8.25/month
                                                            </div>
                                                            <div class="price-2" data-month="save $81 with yearly" data-year="$99/year">
                                                                $99/year
                                                            </div>
                                                        </div>
                                                        <div class="specs subText-medium">
                                                            <div class="specs-inner">
                                                                <div class="spec numProjects" data-month="3" data-year="5">
                                                                    <span class="variable">5 </span>
                                                                    <span class="project-desc">projects</span>
                                                                </div>
                                                                <div class="spec numPages"><span class="variable">Unlimited </span>pages</div>
                                                                <div class="spec numUploads"><span class="variable">Unlimited </span>uploads</div>
                                                                <div class="spec numLibraries"><span class="variable">All </span>libraries</div>

                                                                <div class="pricingDivider"></div>

                                                                <div class="spec"><div class="menuIcon menuIconSmall"><svg class="svg-icon" viewBox="0 0 100 100"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-checkCircle"></use></svg></div>Design beautiful app prototypes</div>
                                                                <div class="spec"><div class="menuIcon menuIconSmall"><svg class="svg-icon" viewBox="0 0 100 100"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-checkCircle"></use></svg></div>Add links, gestures &amp; transitions</div>
                                                                <div class="spec"><div class="menuIcon menuIconSmall"><svg class="svg-icon" viewBox="0 0 100 100"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-checkCircle"></use></svg></div>Preview &amp; share instantly</div>
                                                            </div>

                                                            <button id="solo_2" class="accountType solo_2 upgradeBtns sg-actionButton sg-blue3" data-label="Solo" data-name="solo_2" data-cost-month="15" data-cost-year="8.25">
                                                                <div class="sg-largeButtonText sg-textWhite">
                                                                    <!-- Choose solo -->
                                                                    SELECT SOLO
                                                                    <span class="paymentFrequencyHint"></span>
                                                                </div>
                                                            </button>

                                                        </div>
                                                    </div>
                                                </div>

                                            </div>

                                            <div class="plan col-md-4 middle">
                                                <div class="col-inner">
                                                    <div class="col-inner-2">
                                                        <div class="header">
                                                            <span class="icon entypo-users"></span>
                                                            <span class="plan-name paidAccount">Pro</span>
                                                            <div class="price" data-free="Free" data-month="$25/month" data-year="$19.08/month">
                                                                $19.08/month
                                                            </div>
                                                            <div class="price-2" data-month="save $71 with yearly" data-year="$229/year">
                                                                $229/year
                                                            </div>
                                                        </div>
                                                        <div class="specs subText-medium">

                                                            <div class="specs-inner">
                                                                <div class="spec numProjects" data-month="10" data-year="15">
                                                                    <span class="variable">15 </span>
                                                                    <span class="project-desc">projects</span>
                                                                </div>
                                                                <div class="spec numPages"><span class="variable">Unlimited </span>pages</div>
                                                                <div class="spec numUploads"><span class="variable">Unlimited </span>uploads</div>
                                                                <div class="spec numLibraries"><span class="variable">All </span>libraries</div>

                                                                <div class="pricingDivider"></div>

                                                                <div class="spec"><div class="menuIcon menuIconSmall"><svg class="svg-icon" viewBox="0 0 100 100"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-checkCircle"></use></svg></div>Design beautiful app prototypes</div>
                                                                <div class="spec"><div class="menuIcon menuIconSmall"><svg class="svg-icon" viewBox="0 0 100 100"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-checkCircle"></use></svg></div>Add links, gestures &amp; transitions</div>
                                                                <div class="spec"><div class="menuIcon menuIconSmall"><svg class="svg-icon" viewBox="0 0 100 100"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-checkCircle"></use></svg></div>Preview &amp; share instantly</div>

                                                                <div class="pricingDivider"></div>

                                                                <div class="spec"><div class="menuIcon menuIconSmall"><svg class="svg-icon" viewBox="0 0 100 100"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-checkCircle"></use></svg></div>Unlimited sharing and commenting</div>
                                                                <div class="spec notFree"><div class="menuIcon menuIconSmall"><svg class="svg-icon" viewBox="0 0 100 100"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-checkCircle"></use></svg></div>Clone, teleport &amp; archive projects</div>
                                                                <div class="spec notFree"><div class="menuIcon menuIconSmall"><svg class="svg-icon" viewBox="0 0 100 100"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-checkCircle"></use></svg></div>Export screens, screenflows &amp; HTML</div>
                                                            </div>

                                                            <button id="pro_2" class="accountType pro_2 upgradeBtns sg-actionButton sg-blue3" data-label="Pro" data-name="pro_2" data-cost-month="25" data-cost-year="19.083333333">
                                                                <div class="sg-largeButtonText sg-textWhite">
                                                                    <!-- Choose pro -->
                                                                    SELECT PRO
                                                                    <span class="paymentFrequencyHint"></span>
                                                                </div>
                                                            </button>


                                                        </div>
                                                    </div>
                                                </div>



                                            </div>

                                            <div class="plan col-md-4 right">
                                                <div class="col-inner">
                                                    <div class="col-inner-2">
                                                        <div class="header">
                                                            <span class="icon entypo-users"></span>
                                                            <span class="plan-name">Team</span>
                                                            <div class="price" data-month="$65/month" data-year="$41.58/month">
                                                                $41.58/month
                                                            </div>
                                                            <div class="price-2" data-month="save $281 with yearly" data-year="$499/year">
                                                                $499/year
                                                            </div>
                                                        </div>
                                                        <div class="specs subText-medium">

                                                            <div class="specs-inner">
                                                                <div class="spec numProjects" data-month="Unlimited" data-year="Unlimited">
                                                                    <span class="variable">Unlimited </span>
                                                                    <span class="project-desc">projects</span>
                                                                </div>
                                                                <div class="spec numPages"><span class="variable">Unlimited </span>pages</div>
                                                                <div class="spec numUploads"><span class="variable">Unlimited </span>uploads</div>
                                                                <div class="spec numLibraries"><span class="variable">All </span>libraries</div>

                                                                <div class="pricingDivider"></div>

                                                                <div class="spec"><div class="menuIcon menuIconSmall"><svg class="svg-icon" viewBox="0 0 100 100"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-checkCircle"></use></svg></div>Design beautiful app prototypes</div>
                                                                <div class="spec"><div class="menuIcon menuIconSmall"><svg class="svg-icon" viewBox="0 0 100 100"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-checkCircle"></use></svg></div>Add links, gestures &amp; transitions</div>
                                                                <div class="spec"><div class="menuIcon menuIconSmall"><svg class="svg-icon" viewBox="0 0 100 100"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-checkCircle"></use></svg></div>Preview &amp; share instantly</div>

                                                                <div class="pricingDivider"></div>

                                                                <div class="spec"><div class="menuIcon menuIconSmall"><svg class="svg-icon" viewBox="0 0 100 100"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-checkCircle"></use></svg></div>Unlimited sharing and commenting</div>
                                                                <div class="spec"><div class="menuIcon menuIconSmall"><svg class="svg-icon" viewBox="0 0 100 100"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-checkCircle"></use></svg></div>Clone, teleport &amp; archive projects</div>
                                                                <div class="spec"><div class="menuIcon menuIconSmall"><svg class="svg-icon" viewBox="0 0 100 100"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-checkCircle"></use></svg></div>Export screens, screenflows &amp; HTML</div>

                                                                <div class="pricingDivider"></div>

                                                                <div class="spec"><div class="menuIcon menuIconSmall"><svg class="svg-icon" viewBox="0 0 100 100"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-checkCircle"></use></svg></div>Add up to 4 extra teammates</div>
                                                                <div class="spec"><div class="menuIcon menuIconSmall"><svg class="svg-icon" viewBox="0 0 100 100"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-checkCircle"></use></svg></div>Centralize your team's billing</div>
                                                            </div>

                                                            <button id="team_2" class="accountType team_2 upgradeBtns sg-actionButton sg-blue3" data-label="Team" data-name="team_2" data-cost-month="65" data-cost-year="41.583333333">
                                                                <div class="sg-largeButtonText sg-textWhite">
                                                                    <!-- Choose team -->
                                                                    SELECT TEAM
                                                                    <span class="paymentFrequencyHint"></span>
                                                                </div>
                                                            </button>


                                                        </div>
                                                    </div>

                                                </div>


                                            </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>




			    </div>
			</div>

    		<div id="upgrade-2" class="modalWindowContent sub-dialog sub-dialog-hidden">
    		    <div  class="sub-dialog-inner">

	    		    <div id="upgradeHeader2" class="menuHeader menuHeaderLarge">
		    			<!-- <div class="menuIcon iconLarge">
				        	<svg class="svg-icon" viewBox="0 0 100 100">
				            	<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-upgrade-steps-blue"></use>
				          	</svg>
				        </div> -->

	    		    	<div class="menuHeaderText v-spaced-border">
	    		    		<span class="largeText">Upgrade account - enter card details</span>
	    		    	</div>
	    		    </div>

		    		<form id="upgradeForm">
		                <input type="hidden" id="t" name="t" value="upgrade">
		                <input type="hidden" id="accountEmail" name="accountEmail" value="">
		                <input type="hidden" id="accType" name="accType" value="">
		                <input type="hidden" id="paymentFrequency" name="paymentFrequency" value="">
		                <input type="hidden" id="originalType" value="">
		                <input type="hidden" id="originalTypeLabel" value="">
		                <input type="hidden" id="originalFrequency" value="">
		                <input type="hidden" id="couponCode" name="couponCode" value="" />

		                <div class="upgradeFormContainer sg-form">

                            <div class="form-input sg-spacer-20">
                                <label>Card number<span class="spaced">The 16 digits on front of your card</span></label>
		                        <input type="text" id="number" class="sg-inputAreas" placeholder="Card Number" name="number"/>
		                        <input type="hidden" id="type" name="type" value="" />
		                        <div class="form-icon icon-card visa"></div>
		                        <div class="form-icon icon-card mc"></div>
		                        <div class="form-icon icon-card amex"></div>
		                    </div>

		                    <div class="form-input sg-spacer-20 columns columns-2">
		                        <div class="column h-space-20">

		                            <label>Card expiration date</label>
		                            <div class="columns">
		                                <div class="column h-space-10">
                                            <select id="month" name="month" class="cardexpirefield sg-inputAreas">
                                                <option selected disabled hidden value="">Month</option>
                                                <option value="01">01</option>
                                                <option value="02">02</option>
                                                <option value="03">03</option>
                                                <option value="04">04</option>
                                                <option value="05">05</option>
                                                <option value="06">06</option>
                                                <option value="07">07</option>
                                                <option value="08">08</option>
                                                <option value="09">09</option>
                                                <option value="10">10</option>
                                                <option value="11">11</option>
                                                <option value="12">12</option>
                                            </select>
                                        </div>

                                        <div class="column">
                                            <select id="year" name="year" class="cardexpirefield sg-inputAreas"></select>
                                        </div>
		                            </div>

		                        </div>


		                        <div class="column">
		                            <label>Cvv</label>
		                            <div class="columns">
		                                <div class="form-input column h-space-10 column-40">
                                            <input class="sg-inputAreas" type="text" id="cvv" name="cvv" maxlength="4" placeholder="CVV">
                                            </input>
                                        </div>
                                        <div class="column">
                                            <label><span>the last 3 digits displayed on the back of your card</span></label>
                                        </div>
		                            </div>
		                        </div>
		                    </div>

		                    <div class="form-input sg-spacer-20">
		                        <label>Full name on the card</label>
		                        <input type="text" class="sg-inputAreas" placeholder="Name on Card" id="name" name="name" maxlength="50">
		                    </div>

		                    <div id="errorCardEntryPanel2" class="menuSection large sg-errorMessage">
		                        <label class="form-error-area" for="name"></label>
		                        <label class="form-error-area" for="number"></label>
		                        <label class="form-error-area" for="month"></label>
		                        <label class="form-error-area" for="cvv"></label>
		                        <label class="form-error-area" for="billingAddress"></label>
		                        <label class="form-error-area" for="billingCompany"></label>
		                        <label class="form-error-area" for="billingCountry"></label>
		                        <label class="form-error-area" for="billingVAT"></label>
		                        <label class="form-error-area" for="confirmation"></label>
		                    </div>

                            <div class="form-input sg-spacer-20 columns columns-2 v-spaced-border">
                                <div id="billingCountryArea" class="column h-space-20">
                                    <label>Billing address</label>
				                   	<div>
				                        <textarea id="billingAddress" class="sg-textboxAreas" placeholder="Billing Address" name="billingAddress" rows="4"></textarea>
				                    </div>

				                    <div class="sg-spacer-10">
			                            <select class="sg-inputAreas" id="billingCountry" name="billingCountry">
<option value="">Country</option>
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option>
<option value="BH">Bahrain</option>
<option value="BD">Bangladesh</option>
<option value="BB">Barbados</option>
<option value="BY">Belarus</option>
<option value="BE">Belgium</option>
<option value="BZ">Belize</option>
<option value="BJ">Benin</option>
<option value="BM">Bermuda</option>
<option value="BT">Bhutan</option>
<option value="BO">Bolivia, Plurinational State of</option>
<option value="BQ">Bonaire, Sint Eustatius and Saba</option>
<option value="BA">Bosnia and Herzegovina</option>
<option value="BW">Botswana</option>
<option value="BV">Bouvet Island</option>
<option value="BR">Brazil</option>
<option value="IO">British Indian Ocean Territory</option>
<option value="BN">Brunei Darussalam</option>
<option value="BG">Bulgaria</option>
<option value="BF">Burkina Faso</option>
<option value="BI">Burundi</option>
<option value="KH">Cambodia</option>
<option value="CM">Cameroon</option>
<option value="CA">Canada</option>
<option value="CV">Cape Verde</option>
<option value="KY">Cayman Islands</option>
<option value="CF">Central African Republic</option>
<option value="TD">Chad</option>
<option value="CL">Chile</option>
<option value="CN">China</option>
<option value="CX">Christmas Island</option>
<option value="CC">Cocos (Keeling) Islands</option>
<option value="CO">Colombia</option>
<option value="KM">Comoros</option>
<option value="CG">Congo</option>
<option value="CD">Congo, the Democratic Republic of the</option>
<option value="CK">Cook Islands</option>
<option value="CR">Costa Rica</option>
<option value="CI">Côte d'Ivoire</option>
<option value="HR">Croatia</option>
<option value="CU">Cuba</option>
<option value="CW">Curaçao</option>
<option value="CY">Cyprus</option>
<option value="CZ">Czech Republic</option>
<option value="DK">Denmark</option>
<option value="DJ">Djibouti</option>
<option value="DM">Dominica</option>
<option value="DO">Dominican Republic</option>
<option value="EC">Ecuador</option>
<option value="EG">Egypt</option>
<option value="SV">El Salvador</option>
<option value="GQ">Equatorial Guinea</option>
<option value="ER">Eritrea</option>
<option value="EE">Estonia</option>
<option value="ET">Ethiopia</option>
<option value="FK">Falkland Islands (Malvinas)</option>
<option value="FO">Faroe Islands</option>
<option value="FJ">Fiji</option>
<option value="FI">Finland</option>
<option value="FR">France</option>
<option value="GF">French Guiana</option>
<option value="PF">French Polynesia</option>
<option value="TF">French Southern Territories</option>
<option value="GA">Gabon</option>
<option value="GM">Gambia</option>
<option value="GE">Georgia</option>
<option value="DE">Germany</option>
<option value="GH">Ghana</option>
<option value="GI">Gibraltar</option>
<option value="GR">Greece</option>
<option value="GL">Greenland</option>
<option value="GD">Grenada</option>
<option value="GP">Guadeloupe</option>
<option value="GU">Guam</option>
<option value="GT">Guatemala</option>
<option value="GG">Guernsey</option>
<option value="GN">Guinea</option>
<option value="GW">Guinea-Bissau</option>
<option value="GY">Guyana</option>
<option value="HT">Haiti</option>
<option value="HM">Heard Island and McDonald Islands</option>
<option value="VA">Holy See (Vatican City State)</option>
<option value="HN">Honduras</option>
<option value="HK">Hong Kong</option>
<option value="HU">Hungary</option>
<option value="IS">Iceland</option>
<option value="IN">India</option>
<option value="ID">Indonesia</option>
<option value="IR">Iran, Islamic Republic of</option>
<option value="IQ">Iraq</option>
<option value="IE">Ireland</option>
<option value="IM">Isle of Man</option>
<option value="IL">Israel</option>
<option value="IT">Italy</option>
<option value="JM">Jamaica</option>
<option value="JP">Japan</option>
<option value="JE">Jersey</option>
<option value="JO">Jordan</option>
<option value="KZ">Kazakhstan</option>
<option value="KE">Kenya</option>
<option value="KI">Kiribati</option>
<option value="KP">Korea, Democratic People's Republic of</option>
<option value="KR">Korea, Republic of</option>
<option value="KW">Kuwait</option>
<option value="KG">Kyrgyzstan</option>
<option value="LA">Lao People's Democratic Republic</option>
<option value="LV">Latvia</option>
<option value="LB">Lebanon</option>
<option value="LS">Lesotho</option>
<option value="LR">Liberia</option>
<option value="LY">Libya</option>
<option value="LI">Liechtenstein</option>
<option value="LT">Lithuania</option>
<option value="LU">Luxembourg</option>
<option value="MO">Macao</option>
<option value="MK">Macedonia, the former Yugoslav Republic of</option>
<option value="MG">Madagascar</option>
<option value="MW">Malawi</option>
<option value="MY">Malaysia</option>
<option value="MV">Maldives</option>
<option value="ML">Mali</option>
<option value="MT">Malta</option>
<option value="MH">Marshall Islands</option>
<option value="MQ">Martinique</option>
<option value="MR">Mauritania</option>
<option value="MU">Mauritius</option>
<option value="YT">Mayotte</option>
<option value="MX">Mexico</option>
<option value="FM">Micronesia, Federated States of</option>
<option value="MD">Moldova, Republic of</option>
<option value="MC">Monaco</option>
<option value="MN">Mongolia</option>
<option value="ME">Montenegro</option>
<option value="MS">Montserrat</option>
<option value="MA">Morocco</option>
<option value="MZ">Mozambique</option>
<option value="MM">Myanmar</option>
<option value="NA">Namibia</option>
<option value="NR">Nauru</option>
<option value="NP">Nepal</option>
<option value="NL">Netherlands</option>
<option value="NC">New Caledonia</option>
<option value="NZ">New Zealand</option>
<option value="NI">Nicaragua</option>
<option value="NE">Niger</option>
<option value="NG">Nigeria</option>
<option value="NU">Niue</option>
<option value="NF">Norfolk Island</option>
<option value="MP">Northern Mariana Islands</option>
<option value="NO">Norway</option>
<option value="OM">Oman</option>
<option value="PK">Pakistan</option>
<option value="PW">Palau</option>
<option value="PS">Palestinian Territory, Occupied</option>
<option value="PA">Panama</option>
<option value="PG">Papua New Guinea</option>
<option value="PY">Paraguay</option>
<option value="PE">Peru</option>
<option value="PH">Philippines</option>
<option value="PN">Pitcairn</option>
<option value="PL">Poland</option>
<option value="PT">Portugal</option>
<option value="PR">Puerto Rico</option>
<option value="QA">Qatar</option>
<option value="RE">Réunion</option>
<option value="RO">Romania</option>
<option value="RU">Russian Federation</option>
<option value="RW">Rwanda</option>
<option value="BL">Saint Barthélemy</option>
<option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>
<option value="KN">Saint Kitts and Nevis</option>
<option value="LC">Saint Lucia</option>
<option value="MF">Saint Martin (French part)</option>
<option value="PM">Saint Pierre and Miquelon</option>
<option value="VC">Saint Vincent and the Grenadines</option>
<option value="WS">Samoa</option>
<option value="SM">San Marino</option>
<option value="ST">Sao Tome and Principe</option>
<option value="SA">Saudi Arabia</option>
<option value="SN">Senegal</option>
<option value="RS">Serbia</option>
<option value="SC">Seychelles</option>
<option value="SL">Sierra Leone</option>
<option value="SG">Singapore</option>
<option value="SX">Sint Maarten (Dutch part)</option>
<option value="SK">Slovakia</option>
<option value="SI">Slovenia</option>
<option value="SB">Solomon Islands</option>
<option value="SO">Somalia</option>
<option value="ZA">South Africa</option>
<option value="GS">South Georgia and the South Sandwich Islands</option>
<option value="SS">South Sudan</option>
<option value="ES">Spain</option>
<option value="LK">Sri Lanka</option>
<option value="SD">Sudan</option>
<option value="SR">Suriname</option>
<option value="SJ">Svalbard and Jan Mayen</option>
<option value="SZ">Swaziland</option>
<option value="SE">Sweden</option>
<option value="CH">Switzerland</option>
<option value="SY">Syrian Arab Republic</option>
<option value="TW">Taiwan</option>
<option value="TJ">Tajikistan</option>
<option value="TZ">Tanzania, United Republic of</option>
<option value="TH">Thailand</option>
<option value="TL">Timor-Leste</option>
<option value="TG">Togo</option>
<option value="TK">Tokelau</option>
<option value="TO">Tonga</option>
<option value="TT">Trinidad and Tobago</option>
<option value="TN">Tunisia</option>
<option value="TR">Turkey</option>
<option value="TM">Turkmenistan</option>
<option value="TC">Turks and Caicos Islands</option>
<option value="TV">Tuvalu</option>
<option value="UG">Uganda</option>
<option value="UA">Ukraine</option>
<option value="AE">United Arab Emirates</option>
<option value="GB">United Kingdom</option>
<option value="US">United States</option>
<option value="UM">United States Minor Outlying Islands</option>
<option value="UY">Uruguay</option>
<option value="UZ">Uzbekistan</option>
<option value="VU">Vanuatu</option>
<option value="VE">Venezuela, Bolivarian Republic of</option>
<option value="VN">Viet Nam</option>
<option value="VG">Virgin Islands, British</option>
<option value="VI">Virgin Islands, U.S.</option>
<option value="WF">Wallis and Futuna</option>
<option value="EH">Western Sahara</option>
<option value="YE">Yemen</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select>

			                        </div>
		                        </div>

		                        <div class="column flex-column">
				                   	<div>
				                   	    <label>Company name</label>
				                        <input type="text" class="sg-inputAreas" id="billingCompany" placeholder="Company Name (Optional)" name="billingCompany" maxlength="50">
				                    </div>

				                   	<div id="billingVATSection" class="sg-spacer-20">
				                   	    <label>Vat number</label>
			                            <input type="text" class="sg-inputAreas" id="billingVAT" placeholder="VAT Number (Optional)" name="billingVAT" maxlength="50">
			                        </div>
		                        </div>
                            </div>

                            <div class="form-confirmation-box">
                                <input id="confirmation" type="checkbox" name="confirmation" class="">
                                <label for="confirmation">I agree that my credit card will be billed
                                    <span class="label-ammount"></span>
                                    for each
                                    <span class="label-period"></span>
                                </label>
                            </div>

		                   	<button id="confirmPaymentButton" class="sg-actionButton sg-blue1 sg-spacer-15">
		                   		<span class="sg-largeButtonText sg-textWhite">Complete transaction</span>
		                   		<span class="feedbackMessage sg-largeButtonText sg-textWhite"></span>
		                	</button>

		                	<!-- <div id="billingCountryAreaNote" class="form-note sg-readingText sg-spacer-10"></div> -->

		                </div>
		            </form>
	            </div>

    		</div>

    		<div id="upgrade-3" class="modalWindowContent sub-dialog sub-dialog-hidden">
    			<div id="upgradeFinalStep" class="sub-dialog-inner">

	    			<div class="menuHeader menuHeaderLarge">
	    		    	<div class="menuIcon iconLarge">
				        	<svg class="svg-icon" viewBox="0 0 100 100">
				            	<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-upgrade-steps-blue"></use>
				          	</svg>
				        </div>


	    		    	<div class="menuHeaderText">
	    		    		<span class="largeText">Upgrade account - final confirmation</span>
	    		    	</div>
	    		    </div>

		            <div class="menuSection confirmBox" id="confirmBoxForm">
		                <label id="labelConfirmation" for="confirmation">
		                    <input id="confirmation" type="checkbox" name="confirmation" class="sg-column">
		                    <span id="confirmText" class="confirmText sg-smallText"></span>
		                </label>
		                <span class="clear"></span>
		            </div>

		           	<div class="menuSection large sg-errorMessage">
	                    <span id="upgradeSubmitError" class="hidden">Please confirm by clicking on the checkbox before proceeding.</span>
	                </div>

		            <div class="menuSection">
			            <button id="submitButton" disabled class="sg-actionButton sg-blue1">
			                <span class="sg-largeButtonText sg-textWhite">Confirm</span>
			            </button>
		            </div>
		        </div>

		        <br clear="all">
    		</div>

    		<div id="upgrade-4" class="modalWindowContent sub-dialog sub-dialog-hidden">

		        <div id="upgradePanelFinal" class="sub-dialog-inner">
		            <div id="success-header">
                        Success!
                    </div>

                    <div class="msg-1">
                    	Your account is now upgraded.
                    </div>

                    <div class="msg-2">
                    	A confirmation email will be sent and your receipts can be downloaded from your account settings.
                    </div>

		            <button id="upgradeFinishedBtn" class="sg-actionButton sg-blue1 sg-spacer-30">
		                Get Back to Prototyping
		            </button>

		            <div class="footer">
                        We are interested in hearing your feedback - let us know how you are getting on at <a href="mailto:support@fluidui.com" class="sg-linkText">support@fluidui.com</a>
                    </div>
		        </div>
    		</div>
    </div>
</script>
<script id="projectSettingsTemplate" type="text/x-underscore">
	<div id="projectSettings" class="modalWindowContentFrame modalWindowContentFrameLarge {{activity}}">
		<section class="head grid">
			<div class="g-12">
				<div class="menuIcon">
					<svg class="svg-icon" viewBox="0 0 100 100"><use xlink:href="#icon-user-blue"/></svg>
				</div>

				<div class="menuHeaderText menuHeaderTextLeft projectName">
			    	<input class="projectName-input" type="text" value="{{projectName}}" disabled="true"/>
				    <div class="edit-project-name">
				        <svg class="svg-icon" viewBox="-3 -3 29 29"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#pencil-grey"></use></svg>
				        <svg class="svg-icon current" viewBox="-3 -3 29 29"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#pencil-blue"></use></svg>
				    </div>
				</div>
			</div>
		</section>

		<section class="divider">
			<div class="sg-divider"></div>
		</section>

		<section class="grid fixMargins">
			<div class="g-5 previewHolder">
				{{#preview}}
					{{#src}}
						<img src="{{src}}" alt="">
					{{/src}}
					{{^src}}
						<div class="previewEmpty"></div>
					{{/src}}
				{{/preview}}
			</div>
			<div class="g-7 dropdowns-container">
				{{#dropdowns}}
				<div class="grid">
					<div class="g-6">
						{{#device}}
							{{> dropdown}}
						{{/device}}
					</div>
					<div class="g-1"></div>
					<div class="g-5">
						{{#gesture}}
							{{> dropdown}}
						{{/gesture}}
					</div>
				</div>
				<div class="customDeviceSelector grid {{#showCustomDeviceSelector}}show{{/showCustomDeviceSelector}}">
					<div class="g-5">
						{{#widthSpinner}}
							{{> spinner}}
						{{/widthSpinner}}
					</div>
					<div class="g-2"></div>
					<div class="g-5 align-right">
						{{#heightSpinner}}
							{{> spinner}}
						{{/heightSpinner}}
					</div>
				</div>
				<div class="grid">
					<div class="g-6">
						{{#transition}}
							{{> dropdown}}
						{{/transition}}
					</div>
					<div class="g-1"></div>
					<div class="g-5">
						{{#orientation}}
							{{> dropdown}}
						{{/orientation}}
					</div>
				</div>
				{{/dropdowns}}
			</div>
		</section>

		<section class="divider divider-full">
			<div class="sg-divider"></div>
		</section>

		<div class="gray-container">
			<div class="archived-box">
				<span>Your project has been archived.</span>
				<span class="manage">Manage your archived projects</span>
			</div>
			<div class="project-settings-buttons">
				{{#buttons}}
				{{> button}}
				{{/buttons}}
			</div>
			<section class="divider">
				<div class="sg-divider"></div>
			</section>

			<div class="grid">
				<div class="g-4"></div>
				<div class="g-4">
					{{#openProject}}
						{{> button}}
					{{/openProject}}
				</div>
				<div class="g-4"></div>
			</div>
		</div>
	</div>
</script>
<script id="projectListThumb" type="text/x-underscore">
	<div class="projectListElement hidden {{#current}}current{{/current}} {{#sharedProject}}shared-with-me{{/sharedProject}} {{#active}}activePrj{{/active}}{{^active}}inactivePrj{{/active}} {{#removed}}removed{{/removed}}" data-id="{{id}}" id="{{id}}Thumb" data-name="{{name}}" data-name-lowercase="{{nameLower}}" data-updated="{{updatedDate}}" data-created="{{createdDate}}">
		<div class="projectWatermark"></div>
		{{#previewAvailable}}
		<img class="preview" src="{{previewSrc}}"  alt="preview of {{name}}">
		{{/previewAvailable}}
		{{^previewAvailable}}
		<div class="preview previewNotAvailable"></div>
		{{/previewAvailable}}
		<ul class="contents">
			<li class="projectName">
			    <input class="projectName-input" type="text" value="{{name}}" disabled="true"/>
			    <div class="name-edit-btn">
			        <svg class="svg-icon" viewBox="-3 -3 29 29"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#pencil-grey"></use></svg>
			        <svg class="svg-icon current" viewBox="-3 -3 29 29"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#pencil-blue"></use></svg>
			    </div>
			</li>
			<li data-pid="{{id}}" class="removedControls">
			    <span class="deleted-msg">Your project has been deleted.</span>
			    <span class="undoButton sg-button sg-button-clear" data-action="undoRemove">restore</span>
			</li>
			<li data-pid="{{id}}" class="archivedControls">
			    <span class="archived-msg">Your project has been archived.</span>
			    <span class="archivedList-link">Manage your archived projects</span>
			    <span class="status-archived">ARCHIVED</span>
			    <span class="undoButton sg-button sg-button-clear" data-action="undoArchive">restore</span>
			    <span class="deleteButton sg-button sg-button-clear" data-action="delete">delete</span>
			</li>
			<li class="archivedControls delete-prompt">
			    <span class="deleteConfirmMsg">Are you sure you want to delete this project permanently?</span>
			    <span class="deleteButtonConfirm sg-button sg-button-clear">Yes, delete</span>
			    <span class="deleteCancel">Cancel</span>
			</li>
			<li class="restoredControls">
			    <span class="restored-msg">Your project has been restored.</span>
			    <span class="activeList-link">Manage your active projects</span>
			</li>
			<li class="modifiedDate">{{#dateUpdated}}Last modified: {{dateUpdated}}{{/dateUpdated}}&nbsp;</li>
			<li>
				<ul data-pid="{{id}}" class="actionButtons">
					{{#sharedProject}}
					{{#isAbleToComment}}
					<li data-action="commentProject" class="sg-button sg-button-clear openButton">
						<span>COMMENT PROJECT</span>
					</li>
					{{/isAbleToComment}}
					{{^isAbleToComment}}
					    {{#isAbleToEdit}}
                        <li data-action="coeditProject" class="sg-button sg-button-clear openButton">
                            <span>OPEN PROJECT</span>
                        </li>
                        {{/isAbleToEdit}}
                        {{^isAbleToEdit}}
                        <li data-action="openPreview" class="sg-button sg-button-clear openButton">
                            <a href="{{previewAddress}}{{id}}" target="_blank">OPEN PREVIEW</a>
                        </li>
                        {{/isAbleToEdit}}
					{{/isAbleToComment}}
					{{/sharedProject}}
					{{^sharedProject}}
					<li data-action="cloneProject" class="sg-button sg-button-clear">
					<svg class="svg-icon" viewBox="0 0 100 100"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-clone-sheep"></use></svg>
					<svg class="svg-icon hovered" viewBox="0 0 100 100"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-clone-sheep-blue"></use></svg>
						<span>CLONE</span>
					</li>
					<li class="sg-button sg-button-clear" data-action="shareProject">
					<svg class="svg-icon" viewBox="0 0 100 100"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-share-gray"></use></svg>
					<svg class="svg-icon hovered" viewBox="0 0 100 100"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-share-blue"></use></svg>
						<span>SHARE</span>
					</li>
					<li data-action="openProjectSettings" class="sg-button sg-button-clear wider">
						<svg class="svg-icon" viewBox="0 0 100 100"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-project-settings-gray"></use></svg>
						<svg class="svg-icon hovered" viewBox="0 0 100 100"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-project-settings-blue"></use></svg>
						<span>SETTINGS</span>
					</li>
					<li data-action="preview" class="sg-button sg-button-clear sg-button-preview wide">
					<svg class="svg-icon" viewBox="0 0 100 100"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-play-grey"></use></svg>
					<svg class="svg-icon hovered" viewBox="0 0 100 100"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-play-blue"></use></svg>
						<span>PREVIEW</span>
					</li>
					<li data-action="archiveProject" class="sg-button sg-button-clear sg-button-remove wide">
					<svg class="svg-icon" viewBox="0 0 100 100"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#box-add"></use></svg>
					<svg class="svg-icon hovered" viewBox="0 0 100 100"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#box-add-blue"></use></svg>
						<span>ARCHIVE</span>
					</li>
					<li class="divider"><hr></li>
					<li data-action="openProject" class="sg-button sg-button-clear openButton">
						<span>OPEN PROJECT</span>
					</li>
					{{/sharedProject}}
				</ul>
			</li>
		</ul>
	</div>
</script>

<script id="deviceSettingsTemplate" type="text/x-underscore">
    <!--<div id="projectSettingsPanelValues" class="modalWindowContentFrame sg-contentFrameMedium">-->
    <div id="deviceSettings" class="modalWindowContentFrame sg-contentFrameMedium">
        <div class="modalWindowHeader">
            <div id="projectSettingsValuesTitle" class="modalWindowHeaderText ellipsis">Device Settings <span class="modalWindowHeaderText textBlue selectedProjectName"></span></div>
        </div>
        <div class="modalWindowContent">
            <form id="projectSettingsValuesForm" method="post" action="" onsubmit="return false;">
                <div id="projectSettingsValuesTop">
                    <div>
                        <div class="projectSettingsFormLabel">Device Type</div>
                        <div class="projectSettingsFormInput">
                            <p><label class="dropDownStyled dropDownStyledBig">
                                <select class="deviceTypes projectSettingsDevice" data-for="deviceModel" alt="Select Device" title="Select Device">
                                </select>
                            </label></p>
                        </div>
                    </div>
                    <div class="customDeviceSizeWrapper">
                        <div class="customDeviceSize rangeWidget width fluidSpinner" style="display:none;">
                            <span style="float: left; line-height: 28px; font-size: 13px; padding-right: 6px; padding-left: 7px; color:#A9A9A9;">Width</span>
                            <div class="decreaseNumber spinnerMinus" style="background-color: #AFAFAF;">-</div>
                            <input step="1" min="160" style="width:34px; height: 28px; border-color: #AFAFAF;" type="text" max-width="4" immediate=true value="640"/>
                            <div class="increaseNumber spinnerPlus" style="background-color: #AFAFAF;">+</div>
                        </div>
                        <div class="customDeviceSize rangeWidget height fluidSpinner" style="display:none;">
                            <span style="float: left; line-height: 28px; font-size: 13px; padding-right:7px; color:#A9A9A9;">Height</span>
                            <div class="decreaseNumber spinnerMinus" style="background-color: #AFAFAF;">-</div>
                            <input step="1" min="160" style="width:34px; height: 28px; border-color: #AFAFAF;" type="text" max-width="4" immediate=true value="480"/>
                            <div class="increaseNumber spinnerPlus" style="background-color: #AFAFAF;">+</div>
                        </div>
                    </div>
                    <div class="">
                        <div class="projectSettingsFormLabel">Default Orientation</div>
                        <div class="projectSettingsFormInput">
                            <div class="buttonSwitchContainer projectSettingsOrientation">
                                <div data-for="Portrait" class="userSettingsButton buttonSwitch" alt="Portrait" title="Portrait">Portrait</div>
                                <div data-for="Landscape" class="userSettingsButton buttonSwitch last" alt="Landscape" title="Landscape">Landscape</div>
                            </div>
                        </div>
                    </div>
                    <div class="top-40">
                        <div class="projectSettingsFormLabel">Default Gesture</div>
                        <div class="projectSettingsFormInput">
                            <p><label class="dropDownStyled">
                                <select class="gestures projectSettingsGesture" data-for="defaultGesture" alt="Default Gesture" title="Default Gesture"></select>
                            </label></p>
                        </div>
                    </div>
                    <div class="top-40">
                        <div class="projectSettingsFormLabel">Default Transition</div>
                        <div class="projectSettingsFormInput">
                            <p><label class="dropDownStyled">
                                <select class="transitions projectSettingsTransition" data-for="defaultTransition" alt="Default Transition" title="Default Transition"></select>
                            </label></p>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</script>

<script id="projectVersionsTemplate" type="text/x-underscore">
    <div id="projectVersions" class="modalWindowContentFrame modalWindowContentFrameLarge">
    	<div class="menuHeader menuHeaderLarge">
    		<div class="menuIcon iconLarge">
    			<svg class="svg-icon" viewBox="0 0 100 100"><use xlink:href="#icon-open-project-blue"/></svg>
    		</div>

    		<div class="menuHeaderText">
    			<span class="largeText"><span class="projectVersionsCount"></span> Versions for <span class="modalWindowHeaderText textBlue selectedProjectName"></span></span>
    		</div>
    		<div class="viewportRoot">
    			<div class="viewport">
    				<div class="overview">
    					<div id="projectSettingsVersionsContent" class="projectSettingsVersionsContent">
    						
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>
</script>

<script id="brandingPanelTemplate" type="text/x-underscore">
    <div id="brandingPanel" class="modalWindowContentFrame modalWindowContentFrameLarge">
        <div class="modalWindowHeader">
            <h1 id="projectSettingsBrandingTitle" class="modalWindowHeaderText ellipsis">
                Splash Screen &amp; App Icon
                <span class="modalWindowHeaderText textBlue selectedProjectName"></span>
            </h1>
            <h2> Select branding graphics for this project </h2>
        </div>
        <div class="modalWindowContent">
            <table id="brandingImageTable" style="border 2px; solid; blue">
                <tr id="settingsBrandingIconRow" data-key="icon" data-default="img/apple-touch-icon-144.png" class="brandingSettingsRow">
                    <td><img id="settingsBrandingIconThumb" class="brandingPreview" src="img/apple-touch-icon-144.png"/></td>
                    <td>
                        <h1> App icon </h1>
                        <p data-recommended="120 × 120">px recommended </p>
                        <p> PNG image type </p></td>
                    <td>
                        <form>
                            <label class="chooseFile userSettingsButton buttonBlueDark buttonTall">
                                Choose file
                                <input type="file" id="settingsBrandingChooseIcon" hidden accept="image/png, image/jpeg"></label>
                            <label class="resetFile userSettingsButton buttonRed buttonTall">
                                ×
                                <input type="reset" id="settingsBrandingResetIcon" hidden></form></label></td>
                </tr>
                <tr id="settingsBrandingSplashiPhoneRow" data-key="splash" data-default="img/fluidLoading320x460.png" class="brandingSettingsRow">
                    <td><img id="settingsBrandingSplashPThumb" class="brandingPreview" src="img/fluidLoading320x460.png"/></td>
                    <td>
                        <h1> Splash screen </h1>
                        <p data-recommended="1536 × 2008">px recommended </p>
                        <p> PNG image type </p></td>
                    <td>
                        <form>
                            <label class="chooseFile userSettingsButton buttonBlueDark buttonTall">
                                Choose file
                                <input type="file" id="settingsBrandingChooseSplashiPhone" hidden accept="image/png, image/jpeg"></label>
                            <label class="resetFile userSettingsButton buttonRed buttonTall">
                                ×
                                <input type="reset" id="settingsBrandingResetSplashiPhone" hidden></label></form></td>
                </tr>
                <tr id="settingsBrandingSplashPortraitRow" data-key="splashP" data-default="img/fluidLoading320x460.png" class="brandingSettingsRow">
                    <td><img id="settingsBrandingSplashPThumb" class="brandingPreview" src="img/fluidLoading320x460.png"/></td>
                    <td>
                        <h1> Portrait splash screen </h1>
                        <p data-recommended="1536 × 2008">px recommended </p>
                        <p> PNG image type </p></td>
                    <td>
                        <form>
                            <label class="chooseFile userSettingsButton buttonBlueDark buttonTall">
                                Choose file
                                <input type="file" id="settingsBrandingChooseSplashPortrait" hidden accept="image/png, image/jpeg"></label>
                            <label class="resetFile userSettingsButton buttonRed buttonTall">
                                ×
                                <input type="reset" id="settingsBrandingResetSplashPortrait" hidden></label></form></td>
                </tr>
                <tr id="settingsBrandingSplashLandscapeRow" data-key="splashL" data-default="img/fluidLoading2048x1496.png" class="brandingSettingsRow">
                    <td><img id="settingsBrandingSplashLThumb" class="brandingPreview" src="img/fluidLoading2048x1496.png"/></td>
                    <td>
                        <h1> Landscape splash screen </h1>
                        <p data-recommended="1536 × 2008">px recommended </p>
                        <p> PNG image type </p></td>
                    <td>
                        <form>
                            <label class="chooseFile userSettingsButton buttonBlueDark buttonTall">
                                Choose file
                                <input type="file" id="settingsBrandingChooseSplashL" hidden accept="image/*"></label>
                            <label class="resetFile userSettingsButton buttonRed buttonTall">
                                ×
                                <input type="reset" id="settingsBrandingResetSplashL" hidden></label></form></td>
                </tr>
                <tr>
                    <td></td><td></td>
                    <td><button id="updateBranding" class="userSettingsButton buttonGreen buttonTall" alt="Update" title="Update">UPDATE</button></td>
                </tr>
            </table>
        </div>
    </div>
</script>

<script id="redeemTemplate" type="text/x-underscore">
<div id="redeem" class="modalWindowContentFrame modalWindowContentFrame">
    <div class="modalWindowHeader">
        <div id="upgradeRedeemSignupSwitch" class="modalWindowHeaderLink" style="display: none"><a href="#" id="redeemLoginToggle">Sign In</a></div>
        <div class="modalWindowHeaderText currentEmail text-70 ellipsis"></div>
    </div>
    <div class="modalWindowContent">
        <form id="redeemForm">
            <input type="hidden" id="redeemLoginMode" value="0">
            <div class="upgradeFormContainer">
                <table>
                    <colgroup>
                        <col></col>
                        <col style="width: 50%"></col>
                        <col style="width: 24%"></col>
                    </colgroup>
                    <tr class="redeemLogin redeemTitle">
                        <td>Email:</td>
                        <td><input type="text" id="redeemEmail" required pattern="\S+@\S+\.\S+"></td>
                        <td></td>
                    </tr>
                    <tr class="redeemLogin redeemTitle">
                        <td>Password:</td>
                        <td><input type="password" id="redeemPassword" required></td>
                        <td><a id="createAccountButton" class="userSettingsButton buttonGeneral disabled" style="display: none">Create</a></td>
                    </tr>
                    <tr class="redeemCode redeemTitle">
                        <td>Redeem Code:</td>
                        <td><input type="text" id="redeemCode" required></td>
                        <td><a id="redeemCodeButton" class="userSettingsButton buttonGeneral disabled">Redeem</a></td>
                    </tr>
                    <tr class="redeemError redeemCodeError" style="display: none">
                        <td colspan="2"><label class="error">Invalid code. Please try again or proceed without redeeming a code.</label></td>
                        <td><a id="redeemProceedButton" class="userSettingsButton buttonBlue textNoShadow">Proceed</a></td>
                    </tr>
                    <tr class="redeemError redeemCodeServerError" style="display: none">
                        <td colspan="2"><label class="error"></label></td>
                        <td><a id="redeemProceedButton2" class="userSettingsButton buttonBlue textNoShadow">Proceed</a></td>
                    </tr>
                    <tr class="redeemError redeemCreateError" style="display: none">
                        <td colspan="3"><label class="error">Can not create account. An account with this email address may already exist.</label></td>
                    </tr>
                    <tr class="redeemError redeemLoginError" style="display: none">
                        <td colspan="3"><label class="error">Sign in failed. Please check your email and password and try again.</label></td>
                    </tr>
                    <tr class="redeemMessage" style="display: none">
                        <td colspan="2"><label class="message"></label></td>
                        <td>
                            <input type="submit" class="submit" title="Finish" alt="Confirm account upgrade" id="redeemFinishButton" value="Finish">
                        </td>
                    </tr>
                </table>
            </div>
        </form>
    </div>
</div>
</script>

<script id="comments-panel-item" type="text/x-underscore">
    <div id="{{id}}Thread" data-id="{{id}}" class="thread {{#resolved}}resolved{{/resolved}}{{^resolved}}unresolved{{/resolved}} {{#expanded}}expanded{{/expanded}} {{#owned}}owned{{/owned}}">
        <div class="thread-header">
            <div class="resolved-input" data-state="{{#resolved}}resolved{{/resolved}}{{^resolved}}unresolved{{/resolved}}">
                <div class="thread-checkbox {{#resolved}}checked{{/resolved}}">
                    <span class="f-icon-tick"></span>
                </div>
                <label>{{#resolved}}Resolved{{/resolved}}{{^resolved}}Mark as resolved{{/resolved}}</label>
            </div>
            <div class="thread-visible"></div>
        </div>
    </div>
</script>

<script id="comments-panel-dropdown-tmpl" type="text/x-underscore">
    {{#commentsDropdown}}
        {{> dropdown}}
    {{/commentsDropdown}}
</script>

<script id="comments-thread-item" type="text/x-underscore">
    <div id="{{id}}Comment" data-id="{{id}}" class="comment">
        <div class="avatar color-{{colorIdx}}-bg">
            <div class="initial">{{initial}}</div>
        </div>
        <div class="comment-header">
            <div class="author">{{author}}</div>
            {{#owned}}
            <div class="delete">
                <span class="f-icon-bin"></span>
            </div>
            <div class="edit">
                <span class="f-icon-pen"></span>
            </div>
            {{/owned}}
            <div class="date">{{date}}</div>
            <div class="text-short">{{{shortText}}}</div>
        </div>
        <div class="text">{{{text}}}</div>
    </div>
</script>

<script id="comments-thread-input" type="text/x-underscore">
    <div class="{{#new}}thread-input-wrapper new-thread{{/new}}{{#reply}}thread-input-wrapper{{/reply}}{{#edit}}comment-input-wrapper{{/edit}}">
        {{#reply}}
            <textarea placeholder="Reply"></textarea>
            <div class="thread-input-footer">
                <label class="press">Press ctrl + Enter or</label>
                <button>Reply</button>
            </div>
        {{/reply}}
        {{#new}}
            <label class="leave">leave a comment</label>
            <textarea></textarea>
            <div class="thread-input-footer">
                <a class="cancel">Cancel</a>
                <button>Submit</button>
            </div>
        {{/new}}
        {{#edit}}
            <textarea>{{text}}</textarea>
            <div class="thread-input-footer">
                <a class="cancel">Cancel</a>
                <button>Submit</button>
            </div>
        {{/edit}}



    </div>
</script>

<script id="comments-annotation-tmpl" type="text/x-underscore">
    <li class="comment-annotation {{#new}}new{{/new}} {{#resolved}}resolved{{/resolved}}" style="top: {{top}}px; left:{{left}}px" {{#id}}data-id="{{id}}"{{/id}}>
        <span class="f-icon-tick"></span>
        <span class="f-icon-chat"></span>
    </li>
</script>


<script id="button" type="text/x-partial">
	<div data-component-id="{{id}}" class="component component-button {{#icon}}hasIcon{{/icon}} {{#text}}hasText{{/text}} {{#iconHover}}hasHoverIcon{{/iconHover}}" {{#type}}data-type="{{type}}"{{/type}} {{#noBounce}}data-nobounce{{/noBounce}}>
		{{#icon}}
		<svg class="svg-icon" viewBox="0 0 100 100"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#{{icon}}"></use></svg>
		{{/icon}}
		{{#iconHover}}
		<svg class="svg-icon hovered" viewBox="0 0 100 100"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#{{iconHover}}"></use></svg>
		{{/iconHover}}
		{{#text}}
		<label>
			{{text}}
			{{#upload}}
			<input data-id="{{id}}" accept="image/*" name="{{id}}" {{#multiple}}multiple="multiple"{{/multiple}} type="file" hidden="">
			{{/upload}}
		</label>
		{{/text}}
	</div>
</script>
<script id="dropdown" type="text/x-partial">
	<div class="component component-dropdown shrinked" data-component-id="{{id}}" data-current="{{currentlySelected}}">
		{{#text}}<div class="label">{{text}}</div>{{/text}}
		<div class="currentOption {{#hasSubtext}}hasSubtext{{/hasSubtext}}">
			{{#options}}
			{{#current}}
			{{#hasIcons}}<svg class="svg-icon" viewBox="0 0 100 100"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-{{name}}"></use></svg>{{/hasIcons}}
			<span>{{text}}</span>
			{{#subtext}}
			<span class="subtext">{{subtext}}</span>
			{{/subtext}}
			{{/current}}
			{{/options}}
		</div>
		<div class="viewportRoot">
			<div class="viewport">
				<ul class="dropdownList overview">
					{{#options}}
					<li data-id="{{name}}" class="{{group}} {{suboption}} {{#hasSubtext}}hasSubtext{{/hasSubtext}}" data-params="{{data}}">
						{{^group}}{{#hasIcons}}<svg class="svg-icon" viewBox="0 0 100 100"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-{{name}}"></use></svg>{{/hasIcons}}{{/group}}
						<span>{{text}}</span>
						{{#subtext}}
						<span class="subtext">{{subtext}}</span>
						{{/subtext}}
					</li>
					{{/options}}
				</ul>
			</div>
		</div>
	</div>
</script>
<script id="textbox" type="text/x-partial">
	<div class="component component-textbox" data-component-id="{{id}}">
		{{#text}}<div class="label">{{text}}</div>{{/text}}
		<div class="textInput">
			<input type="text" value="{{value}}" {{#placeholder}}placeholder="{{placeholder}}"{{/placeholder}}></input>
		</div>
	</div>
</script>

<script id="propSheetBubble" type="text/x-underscore">
	{{#propSheetPosition}}
	<div class="bubblePointer {{propSheetPosition}}"></div>
	{{/propSheetPosition}}
	<div class="propSheetContent {{propSheetPosition}} noSafariZFix">
		{{> propSheet}}
	</div>
</script>

<script id="linkTransGestureTemplate" type="text/x-partial">
	<div class="linkTransGesture" data-linkId="{{linkId}}">
	    <div class="link-sheet-header">
	        <div class="link-title">
	            Link
	        </div>
	        <div data-linkId="{{linkId}}" class="del-link ">
                <svg class="svg-icon" viewBox="0 0 100 100"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-bin-grey"></use></svg>
            </div>
	    </div>
		<div class="linkPropRow">
			{{#linkTriggerDropdown}}
				{{> dropdown}}
			{{/linkTriggerDropdown}}
		</div>
		<div class="linkPropRow">
			{{#linkTransitionDropdown}}
				{{> dropdown}}
			{{/linkTransitionDropdown}}
		</div>
	</div>
</script>

<script id="linkUrlTemplate" type="text/x-partial">
	<div class="linkUrl">
		{{#linkUrlTextbox}}
			{{> textbox}}
		{{/linkUrlTextbox}}
	</div>
</script>

<script id="linkPropSheetTemplate" type="text/x-underscore">
	<div class="propHeader drag-handler">
	</div>
	<div class="linkPropsContainer">
		<div class="viewport">
			<div class="overview">
				{{^links}}
				No links
				{{/links}}
				{{#links}}
				<div class="linkPropsGroup grid" id="linkPropGroup-{{linkId}}">
					<div class="g-8">
						<div class="linkName">{{linkName}}</div>
					</div>
					<div class="g-4 linkDeleteBtn normalLink">
						{{#linkDeleteButton}}
							{{> button}}
						{{/linkDeleteButton}}
					</div>
					<div class="g-4 deletedLink">
						<div class="deletedText">Deleted
							<span class="deleteUndo" data-linkId="{{linkId}}">Undo</span>
						</div>
					</div>
					<div class="g-12 normalLink">
						{{#linkDestDropdown}}
							{{> dropdown}}
						{{/linkDestDropdown}}
					</div>
					<div class="g-12 linkDestUrl {{^isUrlLink}}hidden{{/isUrlLink}} normalLink" data-linkId="{{linkId}}">
						<input type="text" class="linkDestUrlVal" value="{{linkUrl}}"></input>
					</div>
					<div class="g-6 normalLink">
						{{#linkTriggerDropdown}}
							{{> dropdown}}
						{{/linkTriggerDropdown}}
					</div>
					<div class="g-6 normalLink">
						{{#linkTransitionDropdown}}
							{{> dropdown}}
						{{/linkTransitionDropdown}}
					</div>
				</div>
				{{/links}}
			</div>
		</div>
	</div>
</script>
<script id="toggleButton" type="text/x-partial">
	<div data-toggle="{{active}}" data-component-id="{{id}}" class="component component-toggle-button">
		<div class="toggle"></div>
	</div>
</script>
<script id="spinner" type="text/x-partial">
	<div class="component component-spinner" data-component-id="{{id}}">
		<span>{{label}}</span>
		<div class="minus">-</div>
		<input step="25" min="{{min}}" type="text" max-width="4" immediate="true" value="{{value}}"/>
		<div class="plus">+</div>
	</div>
</script>

<script id="realtimeCursor" type="text/x-underscore">
	<span data-cursor-of="{{email}}" style="top: {{top}px; left: {{left}}" class="realtimeCursor"><span style="background:{{color}};">{{email}}</span></span>
</script>
<script id="previewFrame" type="text/x-underscore">
	<div class="previewWrapper">
		<iframe id="previewPage" style="display: inline; visibility: visible; opacity: 0; width: {{width}}px; height: {{height}}px; transform: scale(1);" src="project/{{pid}}"></iframe>	
	</div>
</script>
<script id="chatMessage" type="text/x-underscore">
	<span class="message {{#me}}me{{/me}}"><span class="author">{{author}}</span> - {{message}}</span>
</script>
<script id="uploading-item-tpl" type="text/x-underscore">
	<div class="uploading-item" data-id="{{id}}">
        <div class="progress-wrapper">
            <div class="file-desc">
                <div class="file-name">{{fileName}}</div>
                <div class="file-size">{{fileSize}}KB</div>
            </div>
            <progress class="upload-progress" max="100" value="0"></progress>
        </div>
        <div class="cancel-btn">
            <svg class="svg-icon" viewBox="-45 -45 190 190"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-cross-white"></use> </svg>
        </div>
    </div>
</script>

<script id="signUpForCollabTemplate" type="text/x-underscore">
    <div id="signUpForCollab" class="modalWindowContentFrame">
        <h2>Please enter your name and email to {{action}}</h2>
        <form action="">
            <div class="input-wrapper">
                <div class="icon">
                    <span class="f-icon-user"></span>
                </div>
                <input name="name" placeholder="Your full name" required/>
            </div>
            <div class="input-wrapper">
                <div class="icon">
                    <span class="f-icon-email"></span>
                </div>
                <input name="email" type="email" placeholder="Email" required/>
            </div>
            <input class="btn submit" type="submit" value="{{actionButtonText}}" />
        </form>
    </div>
</script>

<script id="uploadsDialogTemplate" type="text/x-underscore">
    <div id="uploadsDialog" class="modalWindowContentFrame">
        <h2>Uploading...</h2>
        <div class="uploading-list">
        </div>
    </div>
</script>

<script id="text-input-template" type="text/x-underscore">
    <div class="text-input" style="left:{{x}}px;top:{{y}}px;">
        <textarea style="{{ts}}"></textarea>
    </div>
</script>

<script id="collab-user-template" type="text/x-underscore">
    <div class="collab-user-wrapper {{#photo}}photo{{/photo}}" data-accountId="{{accountId}}" data-email="{{email}}" title="{{name}}" data-colorIndex={{colorIndex}}>
        <div class="collab-user color-{{colorIdx}}-after">
        <img {{#photo}}src="{{photo}}" {{/photo}}>
        {{firstLetter}}
        </div>
    </div>
</script>

<script id="lock-info-template" type="text/x-underscore">
    <div class="lock-info" data-accountId="{{accountId}}" data-email="{{email}}" title="{{email}}">
        <div class="avatar">
            {{#photo}}
                <img src="{{photo}}">
            {{/photo}}
            {{^photo}}
                {{firstLetter}}
            {{/photo}}
        </div>
        <div class="user-name color-{{colorIdx}}-color">{{name}}</div>
        <div class="msg">Is working on this page at the moment</div>
    </div>
</script>

<script id="lock-prompt-template" type="text/x-underscore">
    <div class="lock-prompt">
        <div class="prompt-header">{{name}} left.</div>
        <div class="msg">Do you want to edit this page?</div>
        <div class="buttons">
            <div class="sg-button btn-cancel">cancel</div>
            <div class="sg-button btn-edit">edit</div>
        </div>
    </div>
</script>

<script src="js/concat-jspreview1.8863143d123b6258fc37010029e3c646.compact.js"></script>
<script src="js/perfect-scrollbar.jquery.1a459915dc04c6a5e81f6e012cdbfb65.compact.js"></script>

<script>
    var g_preview = 'p_Wnuw3FsSuirvuxPv14thZEM8oX9GbxAg';
    if(window.location.hash)
    {
        var url = window.location.href;
        var hash = window.location.hash;
        var index_of_hash = url.indexOf(hash) || url.length;
        var hashless_url = url.substr(0, index_of_hash);
        window.location = hashless_url;
    }

    var g_preview = 'p_Wnuw3FsSuirvuxPv14thZEM8oX9GbxAg';
    var g_previewMode = true;
    var g_homepage = null;
    var g_window_print = null;
    var g_embedded = false;
</script>

<script src="js/indexedDB.shim.11b3df935f6bc40c477ff158dcb03f5f.compact.js"></script>



<script src="js/concat-jspreview2.57de5e8fbf4143d7580d0f5d03b94014.compact.js"></script>

</head>




<body class="loading">




    <div id="font-preloader" style="position: relative;">
        <span style="font-family: Droid Sans; position: absolute; top: -9000px; left: -9000px;">aaa</span>
        <span style="font-family: Roboto; position: absolute; top: -9000px; left: -9000px;">aaa</span>
        <span style="font-family: Kaushan Script; position: absolute; top: -9000px; left: -9000px;">aaa</span>
        <span style="font-family: Quicksand; position: absolute; top: -9000px; left: -9000px;">aaa</span>
        <span style="font-family: Walkway; position: absolute; top: -9000px; left: -9000px;">aaa</span>
        <span style="font-family: Journal; position: absolute; top: -9000px; left: -9000px;">aaa</span>
        <span style="font-family: Permanent Marker; position: absolute; top: -9000px; left: -9000px;">aaa</span>
        <span style="font-family: Raster Gothic; position: absolute; top: -9000px; left: -9000px;">aaa</span>
    </div>
	
<!--	<div style="width: 2px; height: 800px; background: red; position: absolute;"></div>-->
    <div id="home" data-role="page" data-transition="none">
        <div id="homePage" data-role="content" class="pageList"></div>
    </div>
    <div id="blankPage" data-role="page" data-transition="none" style="display:none; z-index: 999;">
        <div data-role="content" class="pageList" style="overflow: hidden; width: 100%; text-align: center;">
            <div class="blankPageContainer">
                <div class="blankPageText">Empty page</div>
                <div class="pageWidget widgetLink blankPageBackButton" >Go back</div>
            </div>
        </div>
    </div>







<script type="text/javascript">
function gmt_crumbleCookie(a) {
  for (var d = document.cookie.split(";"), c = {}, b = 0; b < d.length; b++) {
    var e = d[b].substring(0, d[b].indexOf("=")).trim(),
      i = d[b].substring(d[b].indexOf("=") + 1, d[b].length).trim();
    c[e] = i
  }
  if (a) return c[a] ? c[a] : null;
  return c
}

function gmt_bakeCookie(a, d, c, b, e, i) {
  var j = new Date;
  j.setTime(j.getTime());
  c && (c *= 864E5);
  j = new Date(j.getTime() + c);
  document.cookie = a + "=" + escape(d) + (c ? ";expires=" + j.toGMTString() : "") + (b ? ";path=" + b : "") + (e ? ";domain=" + e : "") + (i ? ";secure" : "")
}

function gmt_writeLogic(n) {

  var pdomain = '.fluiddev.com';
  if (window.location.hostname.match(/fluidui\.com/i)) pdomain = '.fluidui.com';

  var a = gmt_getTrafficSource(n, pdomain);

  a = a.replace(/\|{2,}/g, "|");
  a = a.replace(/^\|/, "");
  a = unescape(a);

  gmt_bakeCookie(n, a, 182, "/", "", "") //Cookie expiration sets to 182 days
};

function gmt_getParam(s, q) {
  try {
    var match = s.match('[?&]' + q + '=([^&]+)');
    return match ? match[1] : '';
  } catch (e) {
    return '';
  }
}

function gmt_calculateTrafficSource() {
  var source = '',
    medium = '',
    campaign = '',
    term = '',
    content = '';
  var search_engines = [
    ['bing', 'q'],
    ['google', 'q'],
    ['yahoo', 'q'],
    ['baidu', 'q'],
    ['yandex', 'q'],
    ['ask', 'q']
  ]; //List of search engines
  var ref = document.referrer;
  ref = ref.substr(ref.indexOf('//') + 2);
  ref_domain = ref;
  ref_path = '/';
  ref_search = '';

  // Checks for campaign parameters
  var url_search = document.location.search;


  if (url_search.indexOf('utm_source') > -1) {
    source = getParam(url_search, 'utm_source');
    medium = getParam(url_search, 'utm_medium');
    campaign = getParam(url_search, 'utm_campaign');
    term = getParam(url_search, 'utm_term');
    content = getParam(url_search, 'utm_content');
  } else if (gmt_getParam(url_search, 'gclid')) {
    source = 'google';
    medium = 'cpc';
    campaign = '(not set)';
  } else if (ref) {

    // separate domain, path and query parameters
    if (ref.indexOf('/') > -1) {
      ref_domain = ref.substr(0, ref.indexOf('/'));
      ref_path = ref.substr(ref.indexOf('/'));
      if (ref_path.indexOf('?') > -1) {
        ref_search = ref_path.substr(ref_path.indexOf('?') + 1);
        ref_path = ref_path.substr(0, ref_path.indexOf('?'));
      }
    }
    medium = 'referral';
    source = ref_domain;
    // Extract term for organic source
    for (var i = 0; i < search_engines.length; i++) {
      if (ref_domain.indexOf(search_engines[i][0]) > -1) {
        medium = 'organic';
        source = search_engines[i][0];
        term = gmt_getParam(ref_search, search_engines[i][1]) || '(not provided)';
        break;
      }
    }
  }

  return {
    'source': source,
    'medium': medium,
    'campaign': campaign,
    'term': term,
    'content': content
  };
}

function gmt_getTrafficSource(cookieName, hostname) {
  var trafficSources = gmt_calculateTrafficSource();
  var source = trafficSources.source.length === 0 ? 'direct' : trafficSources.source;
  var medium = trafficSources.medium.length === 0 ? 'none' : trafficSources.medium;
  var campaign = trafficSources.campaign.length === 0 ? 'direct' : trafficSources.campaign;
  // exception
  if (medium === 'referral') {
    campaign = '';
  }
  var rightNow = new Date();
  var value = 'source=' + source +
    '&medium=' + medium +
    '&campaign=' + campaign +
    '&term=' + trafficSources.term +
    '&content=' + trafficSources.content +
    '&date=' + rightNow.toISOString().slice(0, 10).replace(/-/g, "");
  return value;
}

// Self-invoking function
(function () {
  var date = new Date();
  var fr_date = date.getUTCFullYear().toString() + ((date.getUTCMonth() < 9) ? '0' + (date.getUTCMonth() + 1).toString() : (date.getUTCMonth() + 1).toString()) + ((date.getUTCDate() < 10) ? '0' + date.getUTCDate().toString() : date.getUTCDate().toString());
  var session = gmt_crumbleCookie()['FirstSession'];

  if (typeof session == 'undefined') // First time session
  {
    gmt_writeLogic('FirstSession');
  } else {
    gmt_writeLogic('ReturningSession');
  }
})();
</script>



</body>
</html>
