{{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 ANDROID TRY-IT EMULATOR</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">Experience Android Device Management Agent with our Try-it Emulator</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 Try-it Emulator</a></div>
        {{else}}
            <h3 class="text-center">Scan to download 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>
            <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}}
    </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
                    href="https://docs.wso2.com/display/DeviceCloud/Enrolling+an+Android+Device" 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 ANDROID AGENT WITH TRY-IT EMULATOR</h3>
        {{else}}
            <h3 class="uppercase">START ENROLLING YOUR DEVICE</h3>
        {{/if}}
        <hr>
    </div>
</div>

{{#if isCloud}}
    <div class="row grey-bg">
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-md-offset-1 col-lg-offset-1 add-padding-top-2x add-padding-bottom-2x">
            <h5><strong>Step 1</strong></h5>
    {{#if isVirtual}}
        <ol>
            <li>Unzip the 'android-tryit.zip and run 'start' script in your terminal.</li>
            <li>If you already have android sdk in your computer, please provide location of the sdk.
                Otherwise this tool will download and install minimum SDK components which needs to run the emulator.
                This is a one time process.</li>
            <li>This tool will ask to create AVD if you don't have any in your computer.
                Otherwise you can select existing AVD to try out IoT Agent.</li>
        </ol>
        <img src="{{@unit.publicUri}}/images/android-tryit.png" class="img-responsive">
    {{else}}
            <p>Let's start by installing the Android agent on your device. Open the downloaded file, and tap
                <b>INSTALL</b>.</p>
            <img src="{{@unit.publicUri}}/images/install_agent.png" class="img-responsive">
    {{/if}}
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-md-offset-2 col-lg-offset-2 add-padding-top-2x add-padding-bottom-2x">
            <h5><strong>Step 2</strong></h5>
            <p>Enter your:<p>
            <ul>
                <li>Organization: <b>{{@user.domain}}</b></li>
                <li>Username: <b>{{@user.username}}</b></li>
                <li>Password: <i>The WSO2 Cloud password.</i></li>
            </ul>
            <img src="{{@unit.publicUri}}/images/login.png" class="img-responsive">
        </div>
{{else}}
    <div class="row grey-bg">
        <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>
            <p>Let's start by installing the Android agent on your device. Open the downloaded file, and tap
                <b>INSTALL</b>.</p>
            <img src="{{@unit.publicUri}}/images/install_agent.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 2</strong></h5>
            <p>Tap Skip to proceed with the default enrollment process.</p>
            <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>
            <p>Enter the server address based on your environment, in the text box provided.</p>
            <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>
            <p>Enter your:
            <p>
            <ul>
                <li>Username: username/email that you used to sign in to IoT server.</li>
                <li>Password: the WSO2 Iot server password.</li>
                <li>Domain: the name of the domain.</li>
            </ul>
            <img src="{{@unit.publicUri}}/images/install_agent.png" class="img-responsive">
        </div>
{{/if}}

</div>

    <!--<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-8 col-lg-12 padding-double ">
        <h3 class="uppercase">What You Need</h3>
        <hr>
        <ul class="list-unstyled">
            <li class="padding-top-double"><span class="badge">STEP 01</span>   Android
                Mobile.
            </li>
            <li><span class="badge">STEP 02</span>   Go ahead
                and click [Enroll Device].
            </li>
            <li><span class="badge">STEP 03</span>   Proceed
                to the [Prepare] section.
            </li>
        </ul>
        <br>
    </div>
</div>

<div class="row">
    <div class="col-xs-12 col-sm-8 col-md-9 col-lg-9">

        <h3 class="uppercase">What it Does</h3>
        <hr>
        <p class="grey margin-top">Connect and manage your Android device with WSO2 IoT Server.</p>
        <br>

        <a href="javascript:toggleEnrollment()" class="download-link btn-operations"><i class="fw fw-mobile fw-inverse fw-lg add-margin-1x"></i> Enroll Device</a>
        <a href="{{host}}/android-web-agent/public/mdm.page.enrollments.android.download-agent/asset/android-agent.apk" class="btn-operations"><i class="fw fw-download fw-inverse fw-lg add-margin-1x"></i> Download APK</a>
        <a href="javascript:toggleEmailInvite()" class="btn-operations"><i class="fw fw-mail fw-inverse fw-lg add-margin-1x"></i> Invite by Email</a>


        <p class="doc-link">Click <a href="https://docs.wso2.com/display/IoTS300/Android" target="_blank">here</a> for further instructions and troubleshooting.</p>

    </div>
</div>

<div class="col-xs-12 col-sm-12 col-md-8 col-lg-12 padding-double grey-bg">
    <h3 class="uppercase">Prepare</h3><hr>
    <ul class="list-unstyled">
        <li class="padding-top-double"><span class="badge">01</span> Download Device Agent into your Android Mobile.</li>
        <li><span class="badge">02</span> Install Agent APK file.</li>
        <li><span class="badge">03</span> Configure Agent App</li>
    </ul>
    <br>

</div>-->

    <!--<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 padding-double">
    <p class="grey margin-top">Click on the image to zoom</p>
    <center>
        <a href="{{@unit.publicUri}}/images/android_device.png" target="_blank">
            <img src="{{@unit.publicUri}}/images/android_device.png" class="img-responsive">
        </a>
    </center>
</div>-->

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

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