{{!
  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 ">Virtual Firealarm</h1>
    <hr>
</div>
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 padding-top">
    <img src="{{@unit.publicUri}}/images/firealarm-icon.png" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-8 col-md-9 col-lg-9 padding-top">
    <h3 class="uppercase">What it Does</h3>
    <hr>
    <p class="grey margin-top">A Virtual Device that mimics the functionality of a real Firealarm.
                               Once run, the Virtual Firealarm will connect to WSO2 IoTServer and
                               push Temperature readings.</p>
    <p>The device supports MQTT and XMPP Communications. It is configured to use MQTT by
       default.</p>
    <br>
    <h3 class="uppercase">What You Need</h3>
    <hr>
    <ul class="list-unstyled">
        <li class="padding-top-double">
            <span class="badge">STEP 01</span>
               Go ahead and [Download] the Device.
        </li>
        <li>
            <span class="badge">STEP 02</span>
               Proceed to [Prepare] section.
        </li>
        <li>
            <span class="badge">STEP 03</span>
               Read [Try Out] section to further experiment with the device.
        </li>
    </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>
    </a>
    <a href="#" class="download-link btn-operations">
        <i class="fw fw-download"></i>Download Agent</a>

    <p class="doc-link">Click <a href="https://docs.wso2.com/display/IoTS300/Virtual+Firealarm"
                                  target="_blank">[ here ]</a> for latest instructions and
        troubleshooting.</p>
    <div id="download-device-modal-content" class="hide">
        <div class="modal-header">
            <h4 class="pull-left modal-title">
                <span class="fw-stack">
                    <i class="fw fw-raspberry fw-stack-2x"></i>
                    <span class="fw-stack fw-move-right fw-move-bottom">
                      <i class="fw fw-circle-outline fw-stack-2x"></i>
                      <i class="fw fw-circle fw-stack-2x fw-stroke text-info"></i>
                      <i class="fw fw-add fw-stack-1x fw-inverse"></i>
                   </span>
                </span>
                  Add your new firealarm device to {{@app.conf.appName}}
            </h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i>
            </button>
        </div>
        <hr>
        <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
            <div class="panel-body col-centered text-center">
                <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_Firealarm"
                                   name="deviceName" size="60" required>
                            <br /><br />
                            <input type="hidden" class="deviceType" name="deviceType"
                                   value="{{@uriParams.deviceType}}" />
                            <input type="radio" name="sketchType" value="virtual_firealarm"
                                   id="virtual_firealarm"
                                   checked>
                            <label for="simple_agent">Simple Agent</label>
                            <input type="radio" name="sketchType"
                                   value="virtual_firealarm_advanced"
                                   id="virtual_firealarm_advanced">
                            <label for="advanced_agent">Advanced Agent</label>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="modal-footer">
            <div class="buttons" style="padding-bottom: 0px">
                <a class="btn btn-operations" onclick="downloadAgent()">Download Now</a>
                <a href="javascript:hidePopup()" class="btn-operations btn-default">Cancel</a>
            </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>
                        <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="badge">01</span>
               Unzip the downloaded Agent.
        </li>
        <li class="padding-top-double">
            <span class="badge">02</span>
               Move into the unzipped Agent folder in the terminal.
        </li>
        <li class="padding-top-double">
            <span class="badge">03</span>
               Unzip the downloaded Agent and start terminal to run this command: [sh
            start-device.sh]
        </li>
    </ul>
    <br>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 padding-double">
    <h3 class="uppercase">The Virtual-Fire-Alarm Device</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="badge">01</span>
               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="badge">02</span>
               Select one of connected devices and check for available control
            operations and monitor Real-Time data.
        </li>
        <li class="padding-top-double">
            <span class="badge">03</span>
               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>

<div id="virtualfirealarm-statistic-response-template" style="display: none">
    <div class="content">
        <div class="row">
            <div class="col-lg-5 col-md-6 col-centered">
                <h3>
                    <span class="fw-stack">
                        <i class="fw fw-circle-outline fw-stack-2x"></i>
                        <i id="status-icon" class="fw fw-error fw-stack-1x"></i>
                    </span>
                    <br>
                </h3>
                <h4>
                    <span id="title"></span>
                    <br>
                </h4>
                <span id="description"></span>
            </div>
        </div>
    </div>
</div>

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

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