{{!
  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.
}}
<div class="col-lg-12  margin-top-double">
    <h1 class="grey ">Raspberry Pi</h1>
    <hr>
</div>

<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 padding-top">
    <img src="{{@unit.publicUri}}/images/respberry-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/Raspberry+Pi"
                                  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 a RaspberryPi to WSO2 IoT Server and manage it.</p>
    <br>
    <h3 class="uppercase">What You Need</h3>
    <hr>
    <ul class="list-unstyled">
        <li class="padding-top-double">
            <span class="circle">ITEM 01</span>
            &nbsp;&nbsp;&nbsp;Raspberry Pi with SD Card(Internet Enabled [Wifi or Ethernet]).
        </li>
        <li class="padding-top-double">
            <span class="circle">ITEM 02</span>
            &nbsp;&nbsp;&nbsp;Adafruit DHT11 Temperature Sensor.
        </li>
        <li class="padding-top-double">
            <span class="circle">ITEM 03</span>
            &nbsp;&nbsp;&nbsp;LED Bulb.
        </li>
        <li class="padding-top-double">
            <span class="circle">ITEM 04</span>
            &nbsp;&nbsp;&nbsp;Resister (eg : 470 ohm).
        </li>
        <li class="padding-top-double">
            <span class="circle">STEP 05</span>
            &nbsp;&nbsp;&nbsp;Proceed to [Prepare] section.
    </ul>
    <br>
    <a href="/api-store/apis/info?name={{@uriParams.deviceType}}&version=1.0.0&provider=admin"
       class="btn-operations"
       target="_blank"><i class="fw fw-api"></i> View API</i> &nbsp;
    </a>
    <a href="#" class="download-link btn-operations">
        <i class="fw fw-download"></i>Download Agent
    </a>
    <div id="download-device-modal-content" class="hide">
        <div class="modal-content">
            <div class="row">
                <div class="col-md-7  center-container">
                    <h3>Name your device and download the agent from following link.</h3>
                    <br/>
                    <form id="downloadForm" method="GET"
                          action="{{@app.context}}/api/devices/sketch/download">
                        <div id="invalid-username-error-msg" class="alert alert-danger hidden"
                             role="alert">
                            <i class="icon fw fw-error"></i><span></span>
                        </div>
                        <div class="control-group">
                            <div class="controls">
                                <input class="new-device-name" style="color:#3f3f3f;padding:5px"
                                       type="text"
                                       placeholder="Ex. Lobby_RaspberryPi"
                                       name="deviceName" size="60" required>
                                <br/>
                                <input type="hidden" class="deviceType" name="deviceType"
                                       value="raspberrypi"/>
                                <input type="hidden" class="sketchType" name="sketchType"
                                       value="raspberrypi"/>
                            </div>
                        </div>
                        <div class="buttons" style="padding-bottom: 0px">
                            <a class="btn btn-operations" onclick="downloadAgent()">Download Now</a>
                            &nbsp;&nbsp;
                            <a href="#" id="download-device-download-link"
                               class="btn btn-operations"> Copy Link
                            </a>
                            &nbsp;&nbsp;
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div id="device-agent-downloading-content" class="hide">
        <div class="modal-content">
            <div class="row">
                <div class="col-md-7 col-centered center-container">
                    <h3>Device Agent will downloading shortly.</h3>
                </div>
            </div>
        </div>
    </div>
    <div id="device-400-content" class="hide">
        <div class="modal-content">
            <div class="row">
                <div class="col-md-7 col-centered center-container">
                    <h3>Exception at backend. Try Later.</h3>
                    <div class="buttons">
                        <a href="#" id="device-400-link" class="btn-operations">
                            OK
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="device-401-content" class="hide">
        <div class="modal-content">
            <div class="row">
                <div class="col-md-7 col-centered center-container">
                    <h3>You have to log in first.</h3><br/>
                    <div class="buttons">
                        <a href="#" id="device-401-link" class="blue-button">
                            Goto Login Page
                        </a>&nbsp;&nbsp;
                        <a href="#" onclick="hidePopup();" class="btn-operations">
                            Cancel
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="device-403-content" class="hide">
        <div class="modal-content">
            <div class="row">
                <div class="col-md-7 col-centered center-container">
                    <h3>Action not permitted.</h3><br/>

                    <div class="buttons">
                        <a href="#" id="device-403-link" class="btn-operations">
                            OK
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="device-409-content" class="hide">
        <div class="modal-content">
            <div class="row">
                <div class="col-md-7 col-centered center-container">
                    <h3>Device Sketch does not exist.</h3><br/>
                    <div class="buttons">
                        <a href="#" id="device-409-link" class="btn-operations">
                            OK
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="device-unexpected-error-content" class="hide">
        <div class="modal-content">
            <div class="row">
                <div class="col-md-7 col-centered center-container">
                    <h3>Unexpected error.</h3><br/>
                    <div class="buttons">
                        <a href="#" id="device-unexpected-error-link" class="btn-operations">
                            OK
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br/><br/>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 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>
            &nbsp;&nbsp;&nbsp;Connect RaspberryPi, DHT11 Temperature sensor and LED as per the
            schematic below.
        </li>
        <li class="padding-top-double">
            <span class="circle">02</span>
            &nbsp;&nbsp;&nbsp;Ensure your RaspberryPi Board can connect to Internet.
        </li>
        <li class="padding-top-double">
            <span class="circle">03</span>
            &nbsp;&nbsp;&nbsp;Download RaspberryPi Agent via [Download Agent] button above.
            (Alternatively you can use the "curl" command to directly download the Agent to your
            RaspberryPi.)
        </li>
        <li class="padding-top-double">
            <span class="circle">04</span>
            &nbsp;&nbsp;&nbsp;Copy downloaded Agent into your RaspberryPi.
        </li>
        <li class="padding-top-double">
            <span class="circle">05</span>
            &nbsp;&nbsp;&nbsp;Unzip the downloaded Agent and start terminal to run below commands.
        </li>
        <li class="padding-top-double">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span class="fw-stack fw-lg margin-right">
                <i class="fw fw-ring fw-stack-2x"></i>
                <i class="fw fw-right-arrow fw-stack-1x"></i>
            </span>
            &nbsp;&nbsp;&nbsp;[sudo ./testAgent.sh] &nbsp;&nbsp; - &nbsp;&nbsp; Script to test agent
            functionality.
        </li>
        <li class="padding-top-double">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span class="fw-stack fw-lg margin-right">
                <i class="fw fw-ring fw-stack-2x"></i>
                <i class="fw fw-right-arrow fw-stack-1x"></i>
            </span>
            &nbsp;&nbsp;&nbsp;[sudo ./startService.sh] &nbsp;&nbsp; - &nbsp;&nbsp; Use this to start
            agent as Daemon.
        </li>
    </ul>
    <br>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 padding-double">
    <h3 class="uppercase">Schematic Diagram</h3>
    <hr>
    <p class="grey margin-top">Click on the image to zoom</p>
    <center>
        <a href="{{@unit.publicUri}}/images/schematicsGuide.png" target="_blank">
            <img src="{{@unit.publicUri}}/images/schematicsGuide.png" class="img-responsive">
        </a>
    </center>
    <br/>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 padding-double">
    <h3 class="uppercase">Try Out</h3>
    <hr>
    <ul class="list-unstyled">
        <li class="padding-top-double">
            <span class="circle">01</span>
            &nbsp;&nbsp;&nbsp;You can view all your connected devices at
            <a href="{{@app.context}}/devices">[Device Management]</a> page.
        </li>
        <li class="padding-top-double">
            <span class="circle">02</span>
            &nbsp;&nbsp;&nbsp;Select one of connected devices and check for available control
            operations and monitor Real-Time data.
        </li>
        <li class="padding-top-double">
            <span class="circle">03</span>
            &nbsp;&nbsp;&nbsp;You can also view analytics of the data published to IoT-Server by
            navigating to Device Analytics page.
        </li>
    </ul>
    <br/>
    <p class="grey margin-top">Click on the image to zoom</p>
    <center>
        <a href="{{@unit.publicUri}}/images/myDevices_analytics.png" target="_blank">
            <img src="{{@unit.publicUri}}/images/myDevices_analytics.png" class="img-responsive">
        </a>
    </center>
</div>

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

{{#zone "bottomJs"}}
    {{js "/js/download.js"}}
    {{js "/js/jquery.validate.js"}}
{{/zone}}