{{unit "cdmf.unit.lib.qrcode"}}
{{unit "cdmf.unit.device.type.android.qr-modal"}}

<div class="col-lg-12  margin-top-double">
    <h1 class="grey ">Android Mobile</h1>
    <hr>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 padding-top">
    <img src="{{@unit.publicUri}}/images/android-icon.png" class="img-responsive">
</div>

<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 padding-top">
    <h4 class="doc-link">Click <a href="https://docs.wso2.com/display/IoTS100/Android"
                                  target="_blank">[ here ]</a> for latest instructions and troubleshooting.</h4>
</div>

<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 padding-top">

    <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>

    <h3 class="uppercase">What You Need</h3>
    <hr>
    <ul class="list-unstyled">
        <li class="padding-top-double"><span class="circle">STEP 01</span>   Android
                                                                             Mobile.
        </li>
        <li class="padding-top-double"><span class="circle">STEP 02</span>   Go ahead
                                                                             and click [Enroll Device].
        </li>
        <li class="padding-top-double"><span class="circle">STEP 03</span>   Proceed
                                                                             to the [Prepare] section.
        </li>
    </ul>
    <br>
    <a href="javascript:toggleEnrollment()" class="download-link btn-operations"><i class="fw fw-mobile fw-inverse fw-lg"></i> Enroll Device</a>
    <br/><br/>
</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="circle">01</span> Download Device Agent into your Android Mobile.</li>
        <li class="padding-top-double"><span class="circle">02</span> Install Agent APK file.</li>
        <li class="padding-top-double"><span class="circle">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>

<br/>

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

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