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

<div class="row">
    <div class="col-lg-12">
        <h1 class="grey ">DOWNLOAD THE iOS AGENT</h1>
        <hr>
    </div>
</div>

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 add-padding-top-2x add-padding-bottom-2x">
     
            <h3 class="text-center">Scan to get the iOS 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">                 
                    Type the following URL on your device's internet browser
                    <br><br>
                    <b>{{enrollmentURL}}</b>
                </div>     

    </div>
    {{#if isCloud}}
        <p class="doc-link text-center">Need help? Read <a
            href="https://docs.wso2.com/display/DeviceCloud/Enrolling+an+iOS+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/iOS"
            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 ">
        <h3 class="uppercase">START ENROLLING YOUR DEVICE</h3>
        <hr>
    </div>
</div>

<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>
        <div class="add-min-height">
            <p>Tap <b>Install IoT Server Certificate.</b>
                {{!-- <b>INSTALL</b>.</p> --}}
        </div>
        <img src="{{@unit.publicUri}}/images/3.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>
        <div class="add-min-height">
            <p>Tap <b>Install WSO2 IOT Server agent </b>. Next, go to the app launcher and open the WSO2 IoT Server iOS application.</p>
        </div>
        <img src="{{@unit.publicUri}}/images/4.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>When you open the WSO2 IoTS app for the first time, you may see the Untrusted Enterprise Developer message. 
                Trust the agent by going to <b> Settings > General > Profiles.</b> </p>
        </div>
        <img src="{{@unit.publicUri}}/images/5.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>Tap <b> Allow </b> to let the WSO2 agent access your device location.</p>
        </div>
       
        <img src="{{@unit.publicUri}}/images/7.png" class="img-responsive">
    </div>

</div>
<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 6</strong></h5>
        <div class="add-min-height">
            <p>Enter the server address.</p>
        </div>
        <img src="{{@unit.publicUri}}/images/6.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>
        <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/8.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>
        <div class="add-min-height">
            <p>Accept the End User Licence Agreement (EULA).</p>
        </div>
        <img src="{{@unit.publicUri}}/images/9.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 5</strong></h5>
        <div class="add-min-height">
            <p>Allow the WSO2 IoT Server agent to send notifications by tapping <b> Allow. </b> </p>
        </div>
        <img src="{{@unit.publicUri}}/images/1.png" class="img-responsive">
    </div>

</div>


<br/> 

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

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