<!DOCTYPE html>
<html id="_htmlRoot">
<head>
    <meta charset="utf-8" />
    <title>OOBE</title>

    <!-- WinJS references -->
    <script src="../Microsoft.WinJS-reduced/js/base.js"></script>
    <script src="../Microsoft.WinJS-reduced/js/ui.js"></script>

    <!-- bridge references -->
    <script src="../js/bridge.js"></script>
    <script src="../js/events.js"></script>

    <!-- requirejs references -->
    <script src="/lib/lottie.js"></script>

    <!-- Page references -->
    <script src="../js/uiHelpers.js"></script>
    <script src="../js/helloEnrollmentPage.js"></script>
    <script src="../js/core.js"></script>

    <!-- requirejs references -->
    <script src="../core/js/require-helpers.js"></script>
    <script src="../core/js/requirePath-config-core.js"></script>
    <script src="../lib/require.js"></script>
    <style>
        .iframe-row {
            width: 100%;
            height: 100%;
            flex-wrap: wrap;
            display: flex;
            flex-direction: column;
            margin: 32px 0px;
        }

        .iframe-row > div, .iframe-row > iframe {
            padding: 0;
            flex: 1;
            width: calc(100% - 8px);
            background: transparent;
            border-radius: 4px;
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);

            &:first-child {
                margin-bottom: 8px;
            }
        }

        html[dir="ltr"] .iframe-row > div:first-child, html[dir="ltr"] .iframe-row > iframe:first-child {
        margin-left: 0;
        }

        html[dir="rtl"] .iframe-row > div:first-child, html[dir="rtl"] .iframe-row > iframe:first-child {
        margin-right: 0;
        }
    </style>

</head>
<body class="webapp-inner">
    <div id="appContainer">
        <div id="content">
            <form action="#" class="control-page">
                <div class="page-body" id="PageContent">
                    <div id="HeaderDiv" class="body-header">
                        <h1 id="Title"></h1>
                    </div>

                    <div id="body-container" class="body-container">
                        <div class="container-content">
                            <!-- if LiteWhitePersonality OR (Face or Fingerprint Only) -->
                            <div id="FaceOrFingerprint">
                                <!-- if !LiteWhitePersonality && Face Enrollment -->
                                <div id="FaceOnlyGlyph" class="icon" style="margin:120px; font-size:225px; text-align:center" role="img"></div>
                                <!-- if !LiteWhitePersonality && Fingerprint Enrollment -->
                                <div id="FingerprintOnlyGlyph" class="icon" style="margin:120px; font-size:225px; text-align:center" role="img"></div>
                                <div tabindex="-1" class="content-lead" aria-labelledby="LeadText">
                                    <span id="LeadText" class="body-sub-header"></span>
                                </div>
                                <!-- isMultiChoice && LiteWhitePersonality -->
                                <p id="HelloSwitchLinkContentBox">
                                    <a href='#' id="HelloSwitchHyperlink" class="link"></a>
                                </p>
                            </div>
                            <!-- if isMultiChoice && !LiteWhitePersonality -->
                            <div id="FaceAndFingerprint">
                                <!-- Item template -->
                                <div id="EnrollmentChoiceItemTemplate" data-win-control="WinJS.Binding.Template">
                                    <div id="EnrollmentChoiceItemTemplateStyle">
                                        <h1 data-win-bind="innerText:glyph" style="margin:5px; -ms-grid-column:1; font-family:'Segoe MDL2 Assets'" role="presentation"></h1>
                                        <div style="margin:5px; -ms-grid-column:2">
                                            <h4 data-win-bind="innerText:title" style="line-height:0px" role="presentation"></h4>
                                            <span class="content-lead" style="line-height:100%;" data-win-bind="innerText:description" role="presentation"></span>
                                        </div>
                                    </div>
                                </div>

                                <div id="EnrollmentListView"
                                     data-win-control="WinJS.UI.ListView"
                                     data-win-options="{ itemDataSource:CloudExperienceHost.Hello.enrollmentList.dataSource,
                                                         itemTemplate:EnrollmentChoiceItemTemplate,
                                                         selectionMode:'single',
                                                         tapBehavior:'directSelect',
                                                         layout:{ type:WinJS.UI.ListLayout } }">
                                </div>
                            </div>
                            <p>
                                <a href="#" id="HelloLearnMoreLink" class="link"></a>
                            </p>
                        </div>

                        <!-- If !isLiteWhitePersonality -->
                        <div class="container-footer" id="skipDivs">
                            <div class="footer-content">
                                <ul class="control-actionLinks" role="presentation">
                                    <li role="presentation">
                                        <a href="#" id="SkipLink"></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="page-footer button-group">
                    <div id="easeOfAccessDiv" class="footer-icons">
                        <button id="easeOfAccess" type="button" class="icon icon-win-easeOfAccess"></button>
                    </div>

                    <div id="buttonFooter" class="footer-buttons template-buttonGroup align-self-end">
                        <button id="SkipLinkLite" class="win-button button_secondary"></button>
                        <button id="NextButton" type="submit" class="win-button control-button button_primary"></button>
                    </div>
                </div>
            </form>
        </div>
        <!-- If: learnMoreVisible -->
        <div id="LearnMoreContent">
            <div class="control-page" id="LearnMoreControlPage">
                <div class="page-body" id="LearnMorePageBody">
                    <div id="HeaderLearnMoreDiv" class="body-header">
                        <h1 id="LearnMoreTitle"></h1>
                    </div>
                    <div class="iframe-row med-iframe">
                        <iframe id="hello-learnmore-iframe" x-ms-format-detection="none" sandbox="allow-same-origin allow-scripts"></iframe>
                    </div>
                </div>
                <div class="page-footer button-group">
                    <div id="LMbuttonFooter" class="footer-buttons template-buttonGroup align-self-end">
                        <button id="ContinueButton" type="submit" class="win-button control-button button_primary"></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
