<!--===========================================
    POPUPS
    ===========================================-->

<!-- User Profile -->
<script type="text/html" id="user-profile-template">
    <h3 class="title"><%-translate("ACCOUNT_INFORMATION")%></h3>
    <span class="close-button"></span>
    <img id="userQuotaProgress" style="float: right;" src="lib/graphite-api/public/images/files-item-spinner.gif" />
    <p id="userQuota_error"/>
    <div id="userQuotaContainer" style="display:none">
        <label><%-translate("STORAGE")%></label>
        <div class="usage-track">
            <div id="usage-bar" class="usage-percent"></div>
        </div>
        <p id="quotaDisplay">?</p>
    </div>
    <div id="analyticsOptInContainer">
        <input type="checkbox" name="analyticsOptInCheckBox" id="analyticsOptInCheckBox" />
        <label for="analyticsOptInCheckBox"><%-translate("ALLOW_EXTRACT_COLLECTING_ANONYMOUS_USAGE_DATA")%></label>
    </div>
    <div class="notch"></div>
</script>

<!-- Thumbnail header -->
<script type="text/html" id="thumbnail-header-template">
    <div class="thumbnail-header">
        <div class="thumbnail-header-nowrap">
            <div class ="creative-cloud-logo back-to-files" href="#files" data-href="#files"></div>
            <div class="header-separator"></div>
            <div class="rcrumbs" id="breadcrumbs">
                <ul>
                    <% _.each(urls, function(url, index) { %> 
                        <li>
                            <% if(index > 0) { %>
                                <span class="divider">/</span>
                            <% } %>
                            <a class="back-to-files" href="<%= encodeURI(url.href) %>" data-href="<%= encodeURI(url.href) %>"><%= url.label %></a>

                        </li>
                    <% }); %>
                </ul>
            </div>
        </div>
        <div id ="get-started-button" class = "hide">
            <div id = "get-started-nowrap"><%=translate("UPLOAD_A_PSD")%></div>
        </div>
    </div>
</script>

<!--===========================================
    LANDING
    ===========================================-->

<!-- Asset list -->
<script type="text/html" id="asset-list-view-template">

    <div class="grid" id="gridContainer">
        <div id="assetListTextContainer">
            <div id='assetListHeaderContainer' class='asset-text-container'>
              <p id="assetListHeader" class="asset-list-text"><%-translate("GO_FROM_PSD_COMPS_TO_CODE")%></p>
            </div>
            <div id='assetListDescriptionContainer' class='asset-text-container'>
              <p id="assetListDescription" class="asset-list-text"><%-translate("VIEW_PSDS_IN_DREAMWEAVER_AND_USE_CONTEXTUAL_CODE_HINTING")%></p>
              <p id="asset-list-upload-text-description" class="asset-list-text"><%-translate("UPLOAD_A_PSD_OR_BROWSE_YOUR_FILES")%></p>
            </div>
        </div>
        <input type="file" name="uploadPSD" style="visibility:hidden;" accept=".psd,application/x-photoshop,image/vnd.adobe.photoshop,image/x-photoshop,image/photoshop,application/psd,application/photoshop" multiple />
        <% if (window.dwPSDExtractManager.shouldHandleLangSpecificCSS()) { %>
            <div id='card-holder' class="languageSpecificCardHolder">
        <% } else { %>
            <div id='card-holder'>
        <% } %>    
            
        </div>
        <span id="errorInfo" class="centeredErrMsg"></span>
        <img class="centeredWaitImg" id="loadingSpinner" src="lib/graphite-api/public/images/files-item-spinner.gif" />
    </div>
</script>

<!-- Asset -->
<script type="text/html" id="asset-upload-view-template">
    <div class="image-wrapper uploadAssetContainer">
        <div class="plusAsset">+</div>
        <span class="uploadNewPsd"><%-translate("UPLOAD_NEW_PSD")%></span>
    </div>
</script>

<!-- Asset -->
<script type="text/html" id="asset-view-template">
        <div class="image-wrapper">
            <canvas class="assetThumbnail"></canvas>
        </div>
        <h4><%= name %></h4>
        <span class="thumb-date"><%= date %></span>
        <% if (width && height) { %>
        <span class="thumb-dimension"><%= width %> x <%= height %></span>
        <% } %>
</script>

<script type="text/html" id="asset-folder-view-template">
        <div class="image-wrapper folder-icon">
            <canvas class="assetThumbnail"></canvas>
        </div>
        <h4><%= name %></h4>
        <span class="thumb-date"><%= date %></span>
</script>

<script type="text/html" id="asset-view-loading-template">
    <div class="image-wrapper-progress asset-uploading">
        <div id="stepContainer">
            <span id="uploadStep"><%-translate("UPLOADING")%></span>
            <span id="nextStep"></span>
        </div>
        <div id="progressbar" class="progressbar-uploading"></div>
    </div>
    <h4><%= name %></h4>
    <span id="spacer">&nbsp;</span>
    <span class="thumb-dimension"></span>
</script>

<!-- Waitlisted screen -->
<script type="text/html" id="user-waitlisted-template">
    <div class="message-view">
        <div class="msg-header">
            <h1 class="msg-title"><%= title %></h1>
        </div>
        <div class="msg-body">
            <div class="msg-message"><%= message %></div>
        </div>
    </div>
</script>

<!--===========================================
    FUX
    ===========================================-->
<script type="text/html" id="first-user-experience-template">
    <div class="first-user-exp-overlay">
        <div id="firstUserExpCloseDiv">
            <span id="firstUserExpCloseIcon">&#215;</span>
        </div>
        <div>
            <img class="first-user-exp-logo" src="lib/graphite-api/public/images/parfait_logo.svg">
        </div>
        <div class="first-user-exp-welcome-text">
            <p><%-translate("WELCOME_EXTRACT")%></p>
            <p><%-translate("EXTRACT_FOR_PHOTOSHOP_COMPS_INTO_CODE_BASED_DESIGNS")%>
            <ul>
                <li><%-translate("EXTRACT_COLOR_GRADIENT_FONT_INFO_FROM_PSD")%></li>
                <li><%-translate("COPY_TEXT_AND_CSS")%></li>
                <li><%-translate("GET_ACCURATE_MEASUREMENTS_BETWEEN_ELEMENTS")%></li>
                <li><%-translate("SAVE_WEB_OPTIMIZED_IMAGES")%></li>
            </ul>
            </p>
            <p><%-translate("LET_US_KNOW_WHAT_YOU_THINK")%> <a href="http://www.adobe.com/go/parfait_forum" target="_blank"><%-translate("USER_FORUMS")%></a> <%-translate("AND_CHECK_OUT_OUR")%> <a href="http://www.adobe.com/go/parfait_forum_faq" target="_blank"><%-translate("FAQ")%></a> <%-translate("IF_ANY_MORE_QUESTIONS")%></p>
            <p><%-translate("THANKS_FOR_CHECKING_EXTRACT")%></p>
            <p><%-translate("CHEERS")%><br/><%-translate("EXTRACT_TEAM")%></p>
            <p class="warning"><%-translate("NOTE_FOR_PRE_RELEASE_VERSION")%></p>
        </div>
    </div>
</script>

<!--===========================================
    MISC
    ===========================================-->

<!-- Admin -->
<script type="text/html" id="admin-panel-template">
    <div class="psd-preview-view, centeredWaitImg">
        <div class="centeredWaitImg" id="loadingSpinner">
            <img src="lib/graphite-api/public/images/files-item-spinner.gif" />
        </div>
        <div id="controls">
            <form id="uploadURLform">
                <input type="text" name="urlToLoad" id="urlToLoad" size=75 placeholder="<%-translate("URL_TO_UPLOAD")%>"><br>
            </form>
            <button id="uploadURL"><%-translate("UPLOAD_URL")%></button><br><br>
            <button id="getWorkerVersion"><%-translate("GET_GRAPHITE_WORKER_VERSION")%></button>
        </div>
    </div>
</script>


<script type="text/html" id="user-admin-template">
    <div class="grid" style="-webkit-user-select:initial;">
        <%-translate("REGISTERED_USERS")%>: <%= ScannedCount %><br> <%-translate("WHITELISTED_USERS")%>: <%= Count %>
        <form id="featureFlagForm">
            <input type="text" name="userID" id="userID" size = 50 placeholder="<%-translate("ADOBE_ID")%>">
            <input type="text" name="featureFlag" id="featureFlag" size=50 placeHolder="<%-translate("FEATURE_FLAG")%>">
        </form>
        <button id="getUserData" name="GET"><%-translate("GET_USER")%></button>
        <button id="addFeatureFlag" name="PUT"><%-translate("ADD_FEATURE_FLAG")%></button>
        <button id="delFeatureFlag" name="DELETE"><%-translate("DELETE_FEATURE_FLAG")%></button>
        <div id="consoleMessages"></div>
        <div id="waitListedUser" style="margin:10px;padding:10px;cursor:auto;"><%= waitListedTable %></div>
        <div id="whiteListedUser" style="margin:10px;padding:10px;cursor:auto;"><%= whiteListedTable %></div>
    </div>
</script>

<script type="text/html" id="throttled-screen-template">
    <div id="throttled-wrapper">
        <h1><%-translate("ACCESS_TO_EXTRACT_METERD_TRY_AGAIN_SOON")%></h1>
        <p><a href="#" id="login-link"><%-translate("CREATIVE_CLOUD_ACCOUNT_ALREADY_EXSTS")%></a></p>
</script>

<script type="text/html" id="calltoaction-screen-template">
    <div id="calltoaction-wrapper">
        <h1><%-translate("TRY_EXTRACT_YOURSELF")%></h1>
        <p><%-translate("SEE_WHAT_EXTRACT_CAN_DO")%>,<br><%-translate("USING_OWN_PSD")%><br><a href="#" id="login-link"><%-translate("SIGN_UP_NOW")%></a></p>
</script>

<script type="text/html" id="alert-screen-template">
    <div id="alert-wrapper">
        <h1><%-translate("NOTICE")%></h1>
        <p><%= message %></p>
        <div id="buttons">
            <% if (type !== 'confirm') { %>
            <div id="contact">
                <button class="topcoat-button--large" id="contact-button"><%-translate("CONTACT_DEV_TEAM")%></button>
            </div>
            <% } %>
            <% if (type === 'confirm') { %>
            <button class="topcoat-button--large" id="cancel-button"><%-translate("CANCEL")%></button>
            <% } %>
            <button class="topcoat-button--large--cta" id="ok-button"><%-translate("OK")%></button>
        </div>
</script>

<script type="text/html" id="upload-files-here-template">
    <div id="upload_files_here" class="upload_files_here">
        <div class="upload_files_here_frame">
            <div class="upload_files_here_guidance_text"><img src="lib/graphite-api/public/images/upload_scrim.png" /><%-translate("DRAG_DROP_PSD_HERE")%></div>
        </div>
    </div>
</script>

<script type="text/html" id="drag-drop-file-capture-template">
    <div id="drag_drop_file_capture" class="drag_drop_file_capture">
        <div class="drag_drop_file_capture_frame">
            <div class="drag_drop_file_guidance_text"><img src="lib/graphite-api/public/images/upload_scrim.png" /><%-translate("UPLOAD_PSD")%></div>
        </div>
    </div>
</script>
<script type="text/html" id="netstatus-notification-bar-template">
    <div id = "netstatus-notification-bar" class="hide">
        <div id="close-button" title="<%-translate("CLOSE")%>">&times;</div>
        <div class="netstatus-notification-nowrap"><%= messageText %></div>
    </div>
</script>
    
<script type="text/html" id="netstatus-firstscreen-template">
    <div id = "netstatus-firstscreen" class="hide">
        <div id= "firstScreenLogo" class = "extract-icon"/> 
        <div class="netstatus-notification-nowrap"><span id="view-notification-message"><%= messageText %></span><span id = "refreshButton"><%-translate("REFRESH")%></span></div>
    </div>
</script>
