{{!
  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 connects to WSO2 IoT Server and pushes the 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 click Download Agent to download the agent.
        </li>
        <li>
            <span class="badge">STEP 02</span>
               Follow the steps under <a href="#prepare">[Prepare]</a>
        </li>
        <li>
            <span class="badge">STEP 03</span>
               Read the [Try Out] section to 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>
    {{#if displayStatus}}
        <a href="javascript:artifactUpload()" class="btn-operations"><i class="fw fw-upload fw-inverse fw-lg add-margin-1x"></i> Deploy Analytics Artifacts</a>
    {{/if}}

    <p class="doc-link">Click <a href="https://docs.wso2.com/display/IoTS310/Enterprise+IoT+solution"
                                  target="_blank">[ here ]</a> for the latest instructions and troubleshooting tips.
    </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="hidden" name="sketchType" value="virtual_firealarm"
                                   id="virtual_firealarm">
                        </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>
               Navigate to the unzipped agent directory via the terminal.
        </li>
        <li class="padding-top-double">
            <span class="badge">03</span>
               Start the agent using the <span style="font-family: monospace;">sh start-device.sh</span> command.
        </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>
               View all the connected devices in the
            <a href="{{@app.context}}/devices">[Device Management]</a> page.
        </li>
        <li class="padding-top-double">
            <span class="badge">02</span>
               Try out the operations on your devices and monitor real-time data.
        </li>
        <li class="padding-top-double">
            <span class="badge">03</span>
               Navigate to the device's analytics data page and view the data published by the device.
        </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}}
