{{unit "cdmf.unit.lib.qrcode"}}
{{unit "cdmf.unit.device.type.qr-modal" enrollmentURL=enrollmentURL deviceTypeName="Android"}}
{{unit "cdmf.unit.device.type.email.invite-modal" deviceTypeView="android"}}

<div class="row">
    <div class="col-lg-12">
        {{#if isVirtual}}
            <h1 class="grey ">DOWNLOAD THE VIRTUAL ANDROID DEVICE</h1>
        {{else}}
            <h1 class="grey ">DOWNLOAD THE ANDROID AGENT</h1>
        {{/if}}
        <hr>
    </div>
</div>

<div class="row">
    <!--<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 add-padding-top-2x">
        <img src="{{@unit.publicUri}}/images/android-icon.png" class="img-responsive">
    </div>-->
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 add-padding-top-2x add-padding-bottom-2x">
        {{#if isVirtual}}
            <h3 class="text-center add-padding-bottom-4x">Download our virtual Android device, enroll it with WSO2
                                                          Device Cloud and try it out!</h3>
            <div class="text-center"><a
                    href="{{@unit.publicUri}}/assets/android-tryit.ZIP"
                    class="btn-operations remove-margin download_agent">
                <i class="fw fw-download fw-inverse fw-lg add-margin-1x"></i>Download the virtual Android device</a>
            </div>
        {{else}}
            <h3 class="text-center">Scan to get the Android Agent.</h3>
            <div class="enrollment-qr-container text-center"></div>
            <h3 class="text-center add-margin-bottom-2x add-margin-top-2x">or</h3>
            {{#if isCloud}}
                <div class="text-center">
                    <a href='https://play.google.com/store/apps/details?id=org.wso2.iot.agent&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'
                       target="_blank">
                        <img alt='Get it on Google Play'
                             src='{{@unit.publicUri}}/images/en_badge_web_generic_export.png'/>
                    </a>
                </div>
            {{else}}
                <div class="text-center">
                    <a href="{{host}}/android-web-agent/public/mdm.page.enrollments.android.download-agent/asset/android-agent.apk"
                       class="btn-operations remove-margin download_agent">
                        <i class="fw fw-download fw-inverse fw-lg add-margin-1x"></i> Download APK</a>
                </div>
            {{/if}}
        {{/if}}
    </div>
    <!--<p class="doc-link">Please scan the QR code to download the APK on to your android device or click
            <a href="{{host}}/android-web-agent/public/mdm.page.enrollments.android.download-agent/asset/android-agent.apk">here</a>
            to save it to your computer.</p>
        <p class="doc-link">For further instructions and troubleshooting please visit the following <a href="https://docs.wso2.com/display/IoTS300/Android"
                                     target="_blank">link</a>.</p>-->
    {{#if isCloud}}
        <p class="doc-link text-center">Need help? Read <a
            {{#if isVirtual}}
            href="https://docs.wso2.com/display/DeviceCloud/Quick+Start+Guide"
            {{else}}
            href="https://docs.wso2.com/display/DeviceCloud/Enrolling+an+Android+Device"
            {{/if}}
            target="_blank">WSO2 Device Cloud documentation.</a>
        </p>
    {{else}}
        <p class="doc-link text-center">Need help? Read <a
                href="https://docs.wso2.com/display/IoTS310/Android" target="_blank">WSO2
                                                                                     IoT Server documentation.</a></p>
    {{/if}}
</div>

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-8 col-lg-12 add-padding-top-2x ">
        {{#if isVirtual}}
            <h3 class="uppercase">TRY OUT THE VIRTUAL ANDROID DEVICE</h3>
        {{else}}
            <h3 class="uppercase">START ENROLLING YOUR DEVICE</h3>
        {{/if}}
        <hr>
    </div>
</div>

<div class="row grey-bg">
    {{#if isCloud}}
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 add-padding-top-2x add-padding-bottom-2x">
            <h5><strong>Step 1</strong></h5>
            {{#if isVirtual}}
                <div class="add-min-height">
                    <ol>
                        <li>Unzip the 'android-tryit.zip file and run the 'start' script on your terminal.</li>
                        <li>Download and install the Android SDK:
                            <ul>
                                <li>If you already have an Android SDK on your computer, please provide the location of
                                    the SDK.
                                </li>
                                <li>Else, this tool will download and install the minimum SDK components required to run
                                    the emulator.
                                    This is a one-time process.
                                </li>
                            </ul>
                        </li>
                        <li>Next, you will be asked to create an AVD:
                            <ul>
                                <li>If you don't have one, the WSO2_AVD will be created for you.</li>
                                <li>Else, you can use an existing AVD to try out IoT Android agent.</li>
                            </ul>
                        </li>
                    </ol>
                </div>
                <img src="{{@unit.publicUri}}/images/android-tryit.png" class="img-responsive">
            {{else}}
                <div class="add-min-height">
                    <p>Let's start by opening the Android agent on your device.
                        <br/>Tap on <b>WSO2 Device Management Agent</b>.
                    </p>
                </div>
                <img src="{{@unit.publicUri}}/images/launch_agent.png" class="img-responsive">
            {{/if}}
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 col-md-offset-1 col-lg-offset-1 add-padding-top-2x add-padding-bottom-2x">
            <h5><strong>Step 2</strong></h5>
            <div class="add-min-height">
                <p>Enter your :</p>
                <ul>
                    <li>Username: <b>{{@user.username}}</b></li>
                    <li>Password: <i>Your Cloud password.</i></li>
                </ul>
            </div>
            <img src="{{@unit.publicUri}}/images/register-cloud.png" class="img-responsive">
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 col-md-offset-1 col-lg-offset-1 add-padding-top-2x add-padding-bottom-2x">
            <h5><strong>Step 3</strong></h5>
            <div class="add-min-height">
                <p>To successfully register the device,</p>
                <ul>
                    <li>Tap <b>ALLOW</b> to provide the necessary permissions.</li>
                    <li>Tap <b>ACTIVATE</b> to enable the device administrator.</li>
                </ul>
            </div>
        </div>
    {{else}}
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 add-padding-top-2x add-padding-bottom-2x">
            <h5><strong>Step 1</strong></h5>
            {{#if isVirtual}}
                <div class="add-min-height">
                    <ol>
                        <li>Unzip the 'android-tryit.zip file and run the 'start' script on your terminal.</li>
                        <li>Download and install the Android SDK.
                            <ul>
                                <li>If you already have an Android SDK on your computer, please provide the location of
                                    the
                                    SDK.
                                </li>
                                <li>Else, this tool will download and install the minimum SDK components required to run
                                    the
                                    emulator.
                                    This is a one-time process.
                                </li>
                            </ul>
                        </li>
                        <li>Next, you will be asked to create an AVD:
                            <ul>
                                <li>If you don't have one, the WSO2_AVD will be created for you.</li>
                                <li>Else, you can use an existing AVD to try out IoT Android agent.</li>
                            </ul>
                        </li>
                    </ol>
                </div>
                <img src="{{@unit.publicUri}}/images/android-tryit.png" class="img-responsive">
            {{else}}
                <div class="add-min-height">
                    <p>Let's start by installing the Android agent on your device. Open the downloaded file, and tap
                        <b>INSTALL</b>.</p>
                </div>
                <img src="{{@unit.publicUri}}/images/install_agent.png" class="img-responsive">
            {{/if}}
        </div>

        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 add-padding-top-2x add-padding-bottom-2x">
            <h5><strong>Step 2</strong></h5>
            <div class="add-min-height">
                <p>Tap Skip to proceed with the default enrollment process.</p>
            </div>
            <img src="{{@unit.publicUri}}/images/set_profile.png" class="img-responsive">
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 add-padding-top-2x add-padding-bottom-2x">
            <h5><strong>Step 3</strong></h5>
            <div class="add-min-height">
                <p>Enter the server address based on your environment, in the text box provided.</p>
            </div>
            <img src="{{@unit.publicUri}}/images/registration.png" class="img-responsive">
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 add-padding-top-2x add-padding-bottom-2x">
            <h5><strong>Step 4</strong></h5>
            <div class="add-min-height">
                <p>Enter your:</p>
                <ul>
                    <li>Organization: <b>{{@user.domain}}</b></li>
                    <li>Username: <b>{{@user.username}}</b></li>
                    <li>Password: <i>Your password.</i></li>
                </ul>
            </div>
            <img src="{{@unit.publicUri}}/images/register.png" class="img-responsive">
        </div>
    {{/if}}
</div>

{{#zone "topCss"}}
    {{css "css/styles.css"}}
{{/zone}}

{{#zone "bottomJs"}}
    {{js "js/type-view.js"}}
{{/zone}}
