{{!
  Copyright (c) 2016, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.

  WSO2 Inc. licenses this file to you under the Apache License,
  Version 2.0 (the "License"); you may not use this file except
  in compliance with the License.
  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing,
  software distributed under the License is distributed on an
  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  KIND, either express or implied. See the License for the
  specific language governing permissions and limitations
  under the License.
}}
{{#defineZone "contentTitle"}}
    <div class="row wr-device-board">
        <div class="col-lg-12 wr-secondary-bar">
            <span class="page-sub-title">{{@uriParams.deviceType}} Agent Download</span>
        </div>
    </div>
{{/defineZone}}

<style type="text/css">
    .circle {
        background: none repeat scroll 0 0 #191919;
        border-radius: 50px;
        height: 50px;
        padding: 10px;
        width: 50px;
        color: #fff;
    }
    .padding-top-double {
        padding-top: 20px;
    }
    .padding-double {
        padding: 20px;
    }
    .grey {
        color: #333;
    }
    hr {
        display: block;
        height: 1px;
        border: 0;
        border-top: 1px solid #7f7f7f;
        margin: 1em 0;
        padding: 0;
        opacity: 0.2;
    }
    .light-grey {
        color: #7c7c7c;
    }
    .uppercase {
        text-transform: uppercase;
    }
    .grey-bg {
        background-color: #f6f4f4;
    }
</style>

<div class="container">
    <div class="col-lg-12  margin-top-double">
        <h1 class="grey ">{{deviceType.displayName}}</h1>
        <hr>
        <p class="margin-bottom-double light-grey ">{{#defineZone "deviceTypeHeading"}}Connect your {{deviceType.displayName}} device
            to the WSO2 device cloud. {{/defineZone}}</p>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 padding-top">
        <img src="{{@app.context}}{{deviceType.image}}" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-8 col-lg-8 padding-top">
        {{#if deviceType.ingredients}}
        <h3 class="uppercase">Ingredients</h3>
        <hr>
        <p class="grey margin-top">Hardware Requirements </p>
        <br>
        <ul>
            {{#itr deviceType.ingredients}}
                <span class="fw-stack fw-lg margin-right">
                    <i class="fw fw-circle-outline fw-stack-2x"> </i>
                    <i class="fw fw-right-arrow fw-stack-1x"></i>
                </span> {{value}}<br/>
                <!--<p class="padding-top-double"><span class="circle">0{{key}}</span> {{value}}</p>-->
            {{/itr}}
        </ul>
        <br>
        {{/if}}

        {{#if deviceType.downloadBtnText}}
            <a href="#" class="download-link btn-operations" data-devicetype="{{@uriParams.deviceType}}" data-sketchtype="{{@uriParams.deviceType}}"><i class="fw fw-download"></i> {{{deviceType.downloadBtnText}}}</a>
        {{else}}
            <a href="#" class="download-link btn-operations" data-devicetype="{{@uriParams.deviceType}}" data-sketchtype="{{@uriParams.deviceType}}"><i class="fw fw-download"></i> Download</a>
        {{/if}}

        <br/><br/>
    </div>

    {{#if deviceType.prepareSteps}}
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-12 padding-double grey-bg ">
            <h3 class="uppercase">Prepare</h3><hr>
            <p class="grey margin-top">Get your device ready</p>
            <br/>
            <ul>
                {{#itr deviceType.prepareSteps}}
                    <p class="padding-top-double"><span class="circle">0{{key}}</span> {{{value}}}</p>
                {{/itr}}
            </ul>
            <br>
    </div>
    {{/if}}

    {{#if deviceType.schematicDiagram}}
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-12 padding-double">
        <h3 class="uppercase">Schematic Diagram</h3><hr>
        <p class="grey margin-top">Click on the image to zoom</p>
        <center>
            <a href="{{@app.context}}{{deviceType.schematicDiagram}}" target="_blank">
                <img src="{{@app.context}}{{deviceType.schematicDiagram}}" class="img-responsive" style="max-width: 500px; max-height: 500px">
            </a>
        </center>
        <br/>
    </div>
    {{/if}}

    {{#if deviceType.quickStartup}}
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-12 padding-double">
        <h3 class="uppercase">Connect (Quick Start)</h3><hr>
        <p class="grey margin-top">Internet of Things Foundation Quickstart connection</p>
        <br/>
        <ul>
            {{#itr deviceType.quickStartup}}
                <p class="padding-top-double"><span class="circle">0{{key}}</span> {{{value}}}</p>
            {{/itr}}
        </ul>
        <br>
    </div>
    {{/if}}

    {{#if deviceType.additionalHtml}}
        {{{deviceType.additionalHtml}}}
    {{/if}}
</div>




{{#if deviceType.showQRCode}}

    <div id="qr-code-modal" data-enrollment-url="{{deviceType.enrollmentURL}}" class="hidden">

    <div class="content">
        <div class="row">
            <div class="col-lg-5 col-md-6 col-centered">
                <h3>
                    Scan QR code to start enrollment
                </h3>
                <h4>
                    Please scan the QR code using your mobile device to retrieve enrollment URL.
                </h4>

                <div class="panel panel-default">
                    <div class="panel-body col-centered ">
                        <div class="qr-code"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">

    $(document).ready(function(){
        toggleEnrollment();
    });


    function toggleEnrollment(){
        $(".modalpopup-content").html($("#qr-code-modal").html());
        generateQRCode(".modalpopup-content .qr-code");
        showPopup();
    }

</script>

{{/if}}